vue3代码setup中this为什么无效

结论:setup并没有通过各种方式去绑定this

vue2,我们可以在optionsApi中调用this来指向当前组件的实例,但是在vue3的setup中并不能这样做,因为setup位于组件创建成功后但是并没有解析datacomputedmethods中间,所以他们无法从setup中调用this去获得

源码阅读

1.vue源码核心部分

image-20211021170443416

2.setup位置

runtime-core内的component文件中,我们发现setup仅在实例创建成功后就开始执行了。

image-20211021172235131

在调用setup中并没有进行值绑定image-20211021173617069

3.执行顺序

调用 createComponentInstance 创建组件实例;

调用 setupComponent 初始化component内 部的操作;

调用 setupStatefulComponent 初始化有状态 的组件;

setupStatefulComponent 取出了 setup 函 数;

通过callWithErrorHandling 的函数执行 setup;

posted @ 2022-01-17 17:03  公吧菜腿  阅读(3465)  评论(1编辑  收藏  举报