汪微的博客
zane,做一个有思维的开发者

汪微的博客

vue.js源码解读系列 - props、methods、computed与watch如何具体的初始化和工作

2018年04月05日188 browse

vue 的 props、methods、computed与watch都是在vue实例化时 initState(vm) 中去初始化,具体的文件位置为:

core/instance/state.js


1、props

props是vue子组件接收父组件参数的写法,那么props是如何初始化的呢?为什么父组件的数据更新会触发子组件相应视图的更新呢?让我们从源码来解惑?

让我们来到源码之中:


根据以上分析得出:vue初始化后会把所有props参数储存到vm._props中,vm.props使用Obeject.defineProperty转换为可观察者对象,defineReactive方法会收集依赖,同时对vm._props做了vm上的代理,因此如果有任何props参数的更改和访问都会触发defineProperty的get和set操作,进而更新相应的视图。

2、methods如何绑定到vm对象

根据vue传入的参数,我们访问vue的methods方法应该这样this.methods.someMethods才能访问, 而真实开发中我们是这样访问this.someMethods,那么是如何做的呢?

这个问题其实很简单,大家应该都会,我们还是从源码中看看其实现。



3、computed如何初始化



经以上分析可以看出,计算属性最终经过Object.defineProperty转换成了可观察者对象,每次访问计算属性的值时会调用get方法,如果是浏览器端则会缓存计算属性的值,从而直接返回计算之后的值,如果没有缓存者直接执行传入进来的计算属性函数。

4、watch如何监听并执行

vue的watch使用很简单,即监听数据的变化,后执行传入的回调函数。我们从源码来看其实现方式。


以上只是处理了一些参数行的事情,接下来俺看$watch方法


watcher的核心是新建一个watcher对象传入watcher相关key的回调函数,监听的数据在vue初始化时已经转化成观察者对象,因此如果监听的值如果改变就,最终就会执行watcher下的 run 方法,进而执行this.cb方法,此处的this.cb就是上图的expOrFn参数,即我们watch时相应key的value函数。



如果你也对vue的源码开始感兴趣了的话,那就去看吧,细心一点一点的看总能看出一些眉目。


博主 zane 发表于 2018-04-05 12:15:06,添加在了 vue 标签下

打赏

您的支持将鼓励我继续努力与分享。

扫码打赏,建议金额1-10元

提醒:打赏金额将直接进此方账号,无法退款,请您谨慎操作。

评论

正在加载验证码......

提交

评论还要验证码?

2018-04-10 20:35:02