Vue中的三种Watcher

2021 年 6 月 8 日
笔记
VUE

Vue中的三种Watcher

Vue可以说存在三种watcher，第一种是在定义data函数时定义数据的render watcher；第二种是computed watcher，是computed函数在自身内部维护的一个watcher，配合其内部的属性dirty开关来决定computed的值是需要重新计算还是直接复用之前的值；第三种就是whtcher api了，就是用户自定义的export导出对象的watch属性；当然实际上他们都是通过class Watcher类来实现的。

描述

Vue.js的数据响应式，通常有以下的的场景：

数据变->使用数据的视图变。
数据变->使用数据的计算属性变->使用计算属性的视图变。
数据变->开发者主动注册的watch回调函数执行。

三个场景，对应三种watcher：

负责视图更新的render watcher。
执行计算属性更新的computed watcher。
用户注册的普通watcher api。

render watcher

在render watcher中，响应式就意味着，当数据中的值改变时，在视图上的渲染内容也需要跟着改变，在这里就需要一个视图渲染与属性值之间的联系，Vue中的响应式，简单点来说分为以下三个部分：

Observer: 这里的主要工作是递归地监听对象上的所有属性，在属性值改变的时候，触发相应的Watcher。
Watcher: 观察者，当监听的数据值修改时，执行响应的回调函数，在Vue里面的更新模板内容。
Dep: 链接Observer和Watcher的桥梁，每一个Observer对应一个Dep，它内部维护一个数组，保存与该Observer相关的Watcher。

根据上面的三部分实现一个功能非常简单的Demo，实际Vue中的数据在页面的更新是异步的，且存在大量优化，实际非常复杂。
首先实现Dep方法，这是链接Observer和Watcher的桥梁，简单来说，就是一个监听者模式的事件总线，负责接收watcher并保存。其中subscribers数组用以保存将要触发的事件，addSub方法用以添加事件，notify方法用以触发事件。

function __dep(){
    this.subscribers = [];
    this.addSub = function(watcher){
        if(__dep.target && !this.subscribers.includes(__dep.target) ) this.subscribers.push(watcher);
    }
    this.notifyAll = function(){
        this.subscribers.forEach( watcher => watcher.update());
    }
}

Observer方法就是将数据进行劫持，使用Object.defineProperty对属性进行重定义，注意一个属性描述符只能是数据描述符和存取描述符这两者其中之一，不能同时是两者，所以在这个小Demo中使用getter与setter操作的的是定义的value局部变量，主要是利用了let的块级作用域定义value局部变量并利用闭包的原理实现了getter与setter操作value，对于每个数据绑定时都有一个自己的dep实例，利用这个总线来保存关于这个属性的Watcher，并在set更新数据的时候触发。

function __observe(obj){
    for(let item in obj){
        let dep = new __dep();
        let value = obj[item];
        if (Object.prototype.toString.call(value) === "[object Object]") __observe(value);
        Object.defineProperty(obj, item, {
            configurable: true,
            enumerable: true,
            get: function reactiveGetter() {
                if(__dep.target) dep.addSub(__dep.target);
                return value;
            },
            set: function reactiveSetter(newVal) {
                if (value === newVal) return value;
                value = newVal;
                dep.notifyAll();
            }
        });
    }
    return obj;
}

Watcher方法传入一个回调函数，用以执行数据变更后的操作，一般是用来进行模板的渲染，update方法就是在数据变更后执行的方法，activeRun是首次进行绑定时执行的操作，关于这个操作中的__dep.target，他的主要目的是将执行回调函数相关的数据进行sub，例如在回调函数中用到了msg，那么在执行这个activeRun的时候__dep.target就会指向this，然后执行fn()的时候会取得msg，此时就会触发msg的get()，而get中会判断这个__dep.target是不是空，此时这个__dep.target不为空，上文提到了每个属性都会有一个自己的dep实例，此时这个__dep.target便加入自身实例的subscribers，在执行完之后，便将__dep.target设置为null，重复这个过程将所有的相关属性与watcher进行了绑定，在相关属性进行set时，就会触发各个watcher的update然后执行渲染等操作。

function __watcher(fn){
    this.update = function(){
        fn();
    }
    
    this.activeRun = function(){
        __dep.target = this;
        fn();
        __dep.target = null;
    }
    this.activeRun();
}

这是上述的小Demo的代码示例，其中上文没有提到的__proxy函数主要是为了将vm.$data中的属性直接代理到vm对象上，两个watcher中第一个是为了打印并查看数据，第二个是之前做的一个非常简单的模板引擎的渲染，为了演示数据变更使得页面数据重新渲染，在这个Demo下打开控制台，输入vm.msg = 11;即可触发页面的数据更改，也可以通过在40行添加一行console.log(dep);来查看每个属性的dep绑定的watcher。

<!DOCTYPE html>
<html>
<head>
    <title>数据绑定</title>
</head>
<body>
    <div id="app">
        <div>{{msg}}</div>
        <div>{{date}}</div>
    </div> 
</body>
<script type="text/javascript">

    var Mvvm = function(config) {
        this.$el = config.el;
        this.__root = document.querySelector(this.$el);
        this.__originHTML = this.__root.innerHTML;

        function __dep(){
            this.subscribers = [];
            this.addSub = function(watcher){
                if(__dep.target && !this.subscribers.includes(__dep.target) ) this.subscribers.push(watcher);
            }
            this.notifyAll = function(){
                this.subscribers.forEach( watcher => watcher.update());
            }
        }


        function __observe(obj){
            for(let item in obj){
                let dep = new __dep();
                let value = obj[item];
                if (Object.prototype.toString.call(value) === "[object Object]") __observe(value);
                Object.defineProperty(obj, item, {
                    configurable: true,
                    enumerable: true,
                    get: function reactiveGetter() {
                        if(__dep.target) dep.addSub(__dep.target);
                        return value;
                    },
                    set: function reactiveSetter(newVal) {
                        if (value === newVal) return value;
                        value = newVal;
                        dep.notifyAll();
                    }
                });
            }
            return obj;
        }

        this.$data = __observe(config.data);

        function __proxy (target) {
            for(let item in target){
                Object.defineProperty(this, item, {
                    configurable: true,
                    enumerable: true,
                    get: function proxyGetter() {
                        return this.$data[item];
                    },
                    set: function proxySetter(newVal) {
                        this.$data[item] = newVal;
                    }
                });
            }
        }

        __proxy.call(this, config.data);

        function __watcher(fn){
            this.update = function(){
                fn();
            }
            
            this.activeRun = function(){
                __dep.target = this;
                fn();
                __dep.target = null;
            }
            this.activeRun();
        }

        new __watcher(() => {
            console.log(this.msg, this.date);
        })

        new __watcher(() => {
            var html = String(this.__originHTML||'').replace(/"/g,'\\"').replace(/\s+|\r|\t|\n/g, ' ')
            .replace(/\{\{(.)*?\}\}/g, function(value){ 
                return  value.replace("{{",'"+(').replace("}}",')+"');
            })
            html = `var targetHTML = "${html}";return targetHTML;`;
            var parsedHTML = new Function(...Object.keys(this.$data), html)(...Object.values(this.$data));
            this.__root.innerHTML = parsedHTML;
        })

    }

    var vm = new Mvvm({
        el: "#app",
        data: {
            msg: "1",
            date: new Date(),
            obj: {
                a: 1,
                b: 11
            }
        }
    })

</script>
</html>

computed watcher

computed函数在自身内部维护的一个watcher，配合其内部的属性dirty开关来决定computed的值是需要重新计算还是直接复用之前的值。
在Vue中computed是计算属性，其会根据所依赖的数据动态显示新的计算结果，虽然使用{{}}模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的，在模板中放入太多的逻辑会让模板过重且难以维护，所以对于任何复杂逻辑，都应当使用计算属性。计算属性是基于数据的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值，也就是说只要计算属性依赖的数据还没有发生改变，多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数，当然如果不希望使用缓存可以使用方法属性并返回值即可，computed计算属性非常适用于一个数据受多个数据影响以及需要对数据进行预处理的条件下使用。
computed计算属性可以定义两种方式的参数，{ [key: string]: Function | { get: Function, set: Function } }，计算属性直接定义在Vue实例中，所有getter和setter的this上下文自动地绑定为Vue实例，此外如果为一个计算属性使用了箭头函数，则this不会指向这个组件的实例，不过仍然可以将其实例作为函数的第一个参数来访问，计算属性的结果会被缓存，除非依赖的响应式property变化才会重新计算，注意如果某个依赖例如非响应式property在该实例范畴之外，则计算属性是不会被更新的。

<!DOCTYPE html>
<html>
<head>
    <title>Vue</title>
</head>
<body>
    <div id="app"></div>
</body>
<script src="//cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            a: 1,
            b: 2
        },
        template:`
            <div>
                <div>{{multiplication}}</div>
                <div>{{multiplication}}</div>
                <div>{{multiplication}}</div>
                <div>{{multiplicationArrow}}</div>
                <button @click="updateSetting">updateSetting</button>
            </div>
        `,
        computed:{
            multiplication: function(){
                console.log("a * b"); // 初始只打印一次 返回值被缓存
                return this.a * this.b;
            },
            multiplicationArrow: vm => vm.a * vm.b * 3, // 箭头函数可以通过传入的参数获取当前实例
            setting: {
                get: function(){
                    console.log("a * b * 6");
                    return this.a * this.b * 6;
                },
                set: function(v){
                    console.log(`${v} -> a`);
                    this.a = v;
                }
            }
        },
        methods:{
            updateSetting: function(){ // 点击按钮后
                console.log(this.setting); // 12
                this.setting = 3; // 3 -> a
                console.log(this.setting); // 36
            }
        },

    })
</script>
</html>

whtcher api

在watch api中可以定义deep与immediate属性，分别为深度监听watch和最初绑定即执行回调的定义，在render watch中定义数组的每一项由于性能与效果的折衷是不会直接被监听的，但是使用deep就可以对其进行监听，当然在Vue3中使用Proxy就不存在这个问题了，这原本是Js引擎的内部能力，拦截行为使用了一个能够响应特定操作的函数，即通过Proxy去对一个对象进行代理之后，我们将得到一个和被代理对象几乎完全一样的对象，并且可以从底层实现对这个对象进行完全的监控。
对于watch api，类型{ [key: string]: string | Function | Object | Array }，是一个对象，键是需要观察的表达式，值是对应回调函数，值也可以是方法名，或者包含选项的对象，Vue实例将会在实例化时调用$watch()，遍历watch对象的每一个property。
不应该使用箭头函数来定义watcher函数，例如searchQuery: newValue => this.updateAutocomplete(newValue)，理由是箭头函数绑定了父级作用域的上下文，所以this将不会按照期望指向Vue实例，this.updateAutocomplete将是undefined。

<!DOCTYPE html>
<html>
<head>
    <title>Vue</title>
</head>
<body>
    <div id="app"></div>
</body>
<script src="//cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            a: 1,
            b: 2,
            c: 3,
            d: {
                e: 4,
            },
            f: {
                g: 5
            }
        },
        template:`
            <div>
                <div>a: {{a}}</div>
                <div>b: {{b}}</div>
                <div>c: {{c}}</div>
                <div>d.e: {{d.e}}</div>
                <div>f.g: {{f.g}}</div>
                <button @click="updateA">updateA</button>
                <button @click="updateB">updateB</button>
                <button @click="updateC">updateC</button>
                <button @click="updateDE">updateDE</button>
                <button @click="updateFG">updateFG</button>
            </div>
        `,
        watch: {
            a: function(n, o){ // 普通watcher
                console.log("a", o, "->", n);
            },
            b: { // 可以指定immediate属性
                handler: function(n, o){
                    console.log("b", o, "->", n);
                },
                immediate: true
            },
            c: [ // 逐单元执行
                function handler(n, o){
                    console.log("c1", o, "->", n);
                },{
                    handler: function(n, o){
                        console.log("c2", o, "->", n);
                    },
                    immediate: true
                }
            ],
            d: {
                handler: function(n, o){ // 因为是内部属性值 更改不会执行
                    console.log("d.e1", o, "->", n);
                },
            },
            "d.e": { // 可以指定内部属性的值
                handler: function(n, o){
                    console.log("d.e2", o, "->", n);
                }
            },
            f: { // 深度绑定内部属性
                handler: function(n){
                    console.log("f.g", n.g);
                },
                deep: true
            }
        },
        methods:{
            updateA: function(){
                this.a = this.a * 2;
            },
            updateB: function(){
                this.b = this.b * 2;
            },
            updateC: function(){
                this.c = this.c * 2;
            },
            updateDE: function(){
                this.d.e = this.d.e * 2;
            },
            updateFG: function(){
                this.f.g = this.f.g * 2;
            }
        },

    })
</script>
</html>

每日一题

//github.com/WindrunnerMax/EveryDay

参考

//cn.vuejs.org/v2/api/#watch
//www.jianshu.com/p/0f00c58309b1
//juejin.cn/post/6844904128435470350
//juejin.cn/post/6844904128435453966
//juejin.cn/post/6844903600737484808
//segmentfault.com/a/1190000023196603
//blog.csdn.net/qq_32682301/article/details/105408261

Tags: VUE