【Vue3】setup（setup函数与scriptsetup）⽰例，⽤法以及原理（持续更
新）
⽬录
Vue3 中的setup ⼀种是setup函数，⼀种是script setup
setup函数
s e tup函数原理说明
由于setup 是在beforeCreate 和 create ⽣命周期阶段，组件还没有创建，即还没有进⼊ data ⽅法 阶段。
setup 返回的结果集 作为 (传统写法)data 和 method 的值，确切点说是绑定到 组件对象的属性。
s e tup函数特性
1、setup函数是处于 ⽣命周期函数 beforeCreate 和 Created 两个钩⼦函数之间的函数 也就说在 setup函数中是⽆法 使⽤ data 和 methods 中的数据和⽅法的
2、setup函数是 Composition API（组合API）的⼊⼝
3、在setup函数中定义的变量和⽅法最后都是需要 return 出去的 不然⽆法再模板中使⽤
setup 函数将接收两个参数，props&context
Props ：props接收⽗组件传⼊的值，为Proxy对象，且为响应式，所以不能使⽤ ES6 解构，它会消除 prop 的响应性
context：官⽅解释=>context 是⼀个普通的 JavaScript 对象，它暴露组件的三个 property：
export default {
setup(props, context) {
// Attribute (⾮响应式对象)
console.log(context.attrs)
// 插槽 (⾮响应式对象)
console.log(context.slots)
// 触发事件 (⽅法)
console.it)
}
}
s e tup函数注意点
1、由于在执⾏ setup函数的时候，还没有执⾏ Created ⽣命周期⽅法，所以在 setup 函数中，⽆法使⽤ data 和 methods 的变量和⽅法
2、由于我们不能在 setup函数中使⽤ data 和 methods，所以 Vue 为了避免我们错误的使⽤，直接将 setup函数中的this修改成了 undefined
3、setup函数只能是同步的不能是异步的
s e tup函数中的watch与com p ute d
看下⾯的setup拆分实例 grandson.vue的例⼦
s e tup拆分实例
main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
App.vue
<script setup>
import Parent from './components/parent.vue'
</script>
<template>
<Parent></Parent>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;  -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
parent.vue
<template>
<div @click="handleClick">我是⽗组件 {{info}}        <son></son>
</div>
</template>
<script>
import { defineComponent } from 'vue'
import son from './son.vue'
import useInfo from './info.js'
export default defineComponent({
setup() {
let {info, handleClick} = useInfo()
return {
info,
handleClick
}
},
components: {
son
}
})
</script>
info.js
import {provide, reactive, ref } from 'vue'
let useInfo = () => {
let info = ref(123);
let datas = reactive({
width: 100,
height: 50,
bg: 'pink'
});
const updateInfo = (val) => {
info.value = val
}
const handleClick = () => {
console.log('handleClick了');
info.value++;
console.log('info.value:' + info.value);
}
provide('info', info);
provide('datas', datas)
provide("updateInfo", updateInfo);
return {
info,
handleClick
}
}
export default useInfo
son.vue
<template>
<div>我是⼦组件 {{info}}
<grand-son ref="compa"></grand-son>
</div>
</template>
<script>
import { defineComponent, inject } from 'vue' import grandSon from './grandSon.vue'; export default defineComponent({
setup() {
const info = inject('info');
return {
info
}
},
components: {
grandSon
}
})
</script>
grandson.vue
<template>
<div>我是孙⼦组件 <button @click="updateInfo('456')">点击更新info</button>{{info}} computed: {{computedInfo}}<br />宽度{{datas.width}},  ⾼度：{{datas.height}}, 背景: {{datas.bg}}</div> </template>
<script>
import { defineComponent , inject, watch, computed} from 'vue'
export default defineComponent({
setup() {
const info = inject('info');
const updateInfo = inject('updateInfo');
const datas = inject('datas');
watch(info, (val) => {
console.log('变了');
console.log(val);
});
const computedInfo = computed(() => {
console.log('computed 改变了info')
return info.value + 10
})
return {
info,
datas,
updateInfo,
computedInfo
reactive声明类型}
},
})
</script>
script setup
script setup 是在单⽂件组件 (SFC) 中使⽤组合式 API 的编译时语法糖。
<script setup>
// 变量
const msg = 'Hello!'
// 函数
function log() {
console.log(msg)
}
// click 那⾥有问题
</script>
<template>
<div>
<div @click="log">我是： {{ msg }}</div>
</div>
</template>
s e tup 包含的⽣命周期
s cr ip t s e tup使⽤⽅法
<script setup></script>
s cr ip t s e tup的作⽤
⾃动注册⼦组件
Vue2
<template>
<div>
<h2>⽗组件!</h2>
<Child />
</div>
</template>
<script>
import Child from './Child.vue'
export default {
component: {
Child // 注册⼦组件后⽅可在template中使⽤    }
}
</script>
Vue3:
<template>
<div>
<h2>⽗组件!</h2>
<Child />
</div>
</template>
<script>
import { defineComponent, ref } from 'vue';
import Child from './Child.vue'
export default defineComponent({
components: {
Child // 注册⼦组件后⽅可在template中使⽤
},
setup() {
return {
}
}
});
</script>
setup script语法
<template>
<div>
<h2>⽗组件!-setup script</h2>
<Child />
</div>
</template>
<script setup>
import Child from './Child.vue'
// 省略了⼦组件注册的过程，import后可直接在template中使⽤
</script>
属性和⽅法⽆需返回
vue3.x语法:
如需在template中使⽤属性和⽅法，必须⼿动返回对应的属性和⽅法。这种composition API的编写规则，相对繁琐。如下:
<template>
<div>
<h2 @click="addCount">购买数量 {{ count}} 件</h2>
</div>
</template>
<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
const count = ref(1)
const addCount = () => {
count.value++
}
return {
count,
addCount
}
}
});
</script>
setup script语法
<template>
<div>
<h2 @click="addCount">购买数量 {{ count}} 件</h2>
</div>
</template>
<script setup>
import { ref } from 'vue';
const count = ref(1)
const addCount = () => {
count.value++
}
</script>
⽀持props、emit和context
vue3.x语法
前⾯setup函数中提及，setup函数包含props和context2个参数，通过这两个参数，达到数据通信及事件触发的⽬的。
setup scrip语法
没有setup()那怎么获取到props和context呢？
setup script语法糖提供了三个新的API来供我们使⽤：defineProps、defineEmit和useContext。
defineProps⽤来接收⽗组件传来的值props；
defineEmit⽤来声明触发的事件表；
useContext⽤来获取组件上下⽂context
d e f ine Pr op s， d e f ine E m its
在 script setup 中必须使⽤ defineProps 和 defineEmits API 来声明 props 和 emits ，它们具备完整的类型推断并且在 script setup 中是直接可⽤的。<script setup>
const props = defineProps({

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。