- 1、setup函数是处于生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数 也就说在setup函数中是无法 使用 data 和 methods 中的数据和方法的。
- 2、由于我们不能在 setup函数中使用 data 和 methods，所以 Vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了undefined。
- 3、执行 setup 时，组件实例尚未被创建（在 setup() 内部，this 不会是该活跃实例的引用，即不指向vue实例，Vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了 undefined）
const app = Vue.createApp({
methods:{
handleChange(){
alert('change');
}
},
template: `<child @change="handleChange">parent</child>`
});
app.component('child',{
template: `<div @click="handleClick">123123</div>`,
setup(props, context) {
const { h }=Vue;
const { attrs, slots, emit } = context;
function handleClick(){emit('change')}
return{ handleClick }
}
})
const vm = app.mount('#root');
2、setup函数的两个参数
-
props: props非常好理解，它其实就是父组件传递过来的属性会被放到props对象中，我们在setup函数中如果需要使用属性时，可以直接通过props参数获取，而不再需要再通过this去获取了。
-
context: 我们也称之为是一个SetupContext，它里面包含有三个属性：
- （1）attrs：里面包含了所有的非props属性。
- （2）slots：父组件传递过来的插槽。
- （3）emit：当我们组件内部需要发出事件时会用到emit。
3、setup既然是一个函数 ，那么它也会有返回值，它的返回值是用来做什么的呢 ？
- （1）setup的返回值便是在template模板中被使用。
- （2）也就是说我们可以通过setup的返回值来替代data选项（但是当setup和data选项同时存在时，使用的是setup中的数据）
4、setup使用生命周期函数
const app = Vue.createApp({
setup() {
const {
ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated,
onRenderTracked, onRenderTriggered
} = Vue;
const name = ref('dell')
onBeforeMount(() => {
console.log('onBeforeMount')
})
onMounted(() => {
console.log('onMounted')
})
onBeforeUpdate(() => {
console.log('onBeforeUpdate')
})
onUpdated(() => {
console.log('onUpdated')
})
// 每次渲染后重新收集响应式依赖
onRenderTracked(() => {
console.log('onRenderTracked')
})
// 每次触发页面重新渲染时自动执行
onRenderTriggered(() => {
console.log('onRenderTriggered')
})
const handleClick = () => {
name.value = 'lee'
}
return { name, handleClick }
},
template: `
<div @click="handleClick">
{{name}}
</div>
`,
});
const vm = app.mount('#root');
