vue watch 执行一次_【Vue原理】Watch - 源码版

最新推荐文章于 2023-12-04 16:13:17 发布

hitomo

最新推荐文章于 2023-12-04 16:13:17 发布

阅读量2.4k vue watch 执行一次

本文链接：https://blog.csdn.net/weixin_26854829/article/details/113578768

专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧
研究基于 Vue版本2.5.17

今天继续探索 Watch 源码，废话不多说了

带着我的几个疑问开始

1、什么时候初始化

2、怎么确定监听哪些值

3、深度监听怎么回事

4、怎么触发我的函数

这些问题的答案会掺杂在源码的解析中，我发现这几篇的写作套路都差不多.....

也可以看查一下我的白话版

【Vue原理】Watch - 白话版

什么时候初始化

首先，从这个问题开始我们今天的探索之旅，请看源码

function Vue(){
    
    ... 其他处理
    initState(this)

    ...解析模板，生成DOM 插入页面

}



function initState(vm) {
    


    ...处理 data，props，computed 等数据

    if (opts.watch) {
    
        initWatch(this, vm.$options.watch);
    }
}

没错，当你调用 Vue 创建实例过程中，会去处理各种选项，其中包括处理 watch

initWatch

处理 watch的方法是 initWatch，下面就呈上源码

function initWatch(vm, watch) {
        

    for (var key in watch) {
        

        var watchOpt = watch[key];
        createWatcher(vm, key, handler);
    }
}

然后这段源码并没有做什么惊天地泣鬼神的事情，只是简简单单的一个遍历，然后每个watch 都使用一个叫什么 createWatcher 的东西去处理

这个函数到底是干嘛的？暗藏着什么秘密，欢迎来到我们今晚的《走近科学》《源码解析》

createWatcher 来看

立即使用