1、执行下面代码
<script src="../../dist/vue.global.js"></script>
<div id="demo">
<h1>
{{count}}
</h1>
</div>
<script>
const { createApp, ref,toRefs, reactive, watch, onMounted,computed} = Vue
var app = createApp({
setup(){
var count = ref(0)
setTimeout(()=>{
count.value++
},1000)
return {
count
}
},
})
app.mount('#demo')
</script>
2、打断点
3、调用栈分析
在首次挂载组件时,执行setupComponent内的setupStatefulComponent执行了setup,且setup执行优先于beforeCreate,这就说明了,在setup内是不存在created和beforeCreate的钩子的
执行callWithErrorHandling调用setup,给它的参数是[instance.props, setupContext],在createSetupContext函数内可以看到返回的参数对象是什么,这就解释了,setup(props,{slots,emit,expose})
跳过下一个断点
综合结论 如下流程图
4、setup返回值和data值是否可以共存,共存是谁优先一些
var app = createApp({
setup(){
var count = ref(1)
return {
count,
}
},
data(){
return{
count:2
}
}
})
给PublicInstanceProxyHandlers函数内的get函数 打断点,
在读取count值时,会优先读取setupState内的值