【Vue2】计算属性 computed & 侦听器 watch

计算属性 computed

getter

• getter - 获取计算属性时调用

<div id="app"> {{ reMsg }} </div>

let vm = new Vue({
    el: '#app',
    data: { msg: "superman" },
    // 设置 computed
    computed: {
        // 设置计算属性 reMsg
        reMsg: {
            // 设置 getter
            get() {
                console.log("getter");
                // this 指向当前 Vue Component 实例
                return [...this.msg].reverse().join('');
            }
        }
    }
});

• 计算属性 reMsg 会成为当前 Vue Component 实例的属性
  ∴ 能在 template 标签里面直接访问 reMsg
  ∴ 能在 script 标签里面通过 this.reMsg 的形式访问

• getter 的 this 指向当前 Vue Component 实例
  同时，this 会作为 getter 的第 1 参数传递进来

reMsg: {
    // 设置 getter
    get(vm) {
        console.log(vm === this); // true
        return [...this.msg].reverse().join('');
    }
}

• 上例还可以简写：

reMsg(vm) {
    console.log(vm === this); // true
    return [...this.msg].reverse().join('');
}

setter

• setter - 修改计算属性时调用
• setter 的 this 指向当前 Vue Component 实例
• setter 的第 1 参数 val 为计算属性 reMsg 将要被修改成的值

computed: {
    reMsg: {
        get(vm) {
            console.log("getter");
            return [...vm.msg].reverse().join('');
        },
        // 设置 setter
        set(val) {
            console.log("setter");
            this.msg = [...val].reverse().join('');
        }
    }
}

• Vue 知道 vm.reMsg 依赖于 vm.msg，因此当 vm.msg 发生改变时，vm.reMsg 也会被更新 （ 但不会触发 setter ）
  vm.reMsg 更新后，会调用 getter（因为数据被改变后，需要重新渲染页面，渲染页面需要获取更新后的数据）
• 也就是说，setter 方法被调用后，getter 方法也会被调用
• 所以，getter 被调用的情况有：① 初次渲染页面时、② 依赖的数据被改变时、③ 计算属性被改变时
• Vue2 的底层是通过 Object.defineProperty 方法设置的 getter & setter

computed & methods

• 计算属性可以做到的，其实函数也可以做到

• 不同的是，计算属性是基于它们的响应式依赖进行缓存的：
  一个计算属性仅会在其响应式依赖更新时才重新计算，否则都会立即返回先前的计算结果 而不会重复执行 getter

  如果通过调用方法来获取数据值，则每次获取都需要调用一次方法

<!-- 调用方法 -->
<div> {{ reMsgFun() }} </div>
<div> {{ reMsgFun() }} </div>
<div> {{ reMsgFun() }} </div>
<!-- 调用计算属性 -->
<div> {{ reMsg }} </div>
<div> {{ reMsg }} </div>
<div> {{ reMsg }} </div>

methods: {
    reMsgFun() {
        console.log("methods"); // 输出多次
        return [...this.msg].reverse().join('');
    }
},
computed: {
    reMsg() {
        console.log("getter"); // 只输出 1 次
        return [...this.msg].reverse().join('');
    }
}

侦听器 watch

• 侦听器 watch 用于监听 Vue 实例的属性（data 里面的数据、computed 里面的计算属性…）

• 当监听的数据被改变时，侦听器 watch 就会执行对应的方法

  一般用于在数据发生变化时，执行一些异步操作 / 比较复杂的操作（比较简单地操作可以使用 computed 完成）

<!-- .lazy：脱标才会更新数据；不添加 .lazy 则实时更新数据 -->
用户名称：<input type="text" v-model.lazy='name'>
<span v-text="tip"></span>

handler

• watch 有 handler 方法，当监听的数据被改变时，就会调用 handler 方法

  handler 方法接收 2 个参数：修改后的值 newVal、修改前的值 oldVal

let vm = new Vue({
    el: "#app",
    data: { name: '', tip: '' },
    // 设置侦听器 watch
    watch: {
        // 监听数据 name
        name: {
            // name 被改变时，调用 handler
            handler(newVal, oldVal) {
                console.log("newVal", newVal); // 获取修改后的值
                console.log("oldVal", oldVal); // 获取修改前的值
                // 模拟 Ajax：检查昵称是否重复
                this.checkName(newVal);
                // 验证等待
                this.tip = "请等待正在发送请求…";
            }
        }
    },
    methods: {
        checkName(name) {
            // 异步操作
            setTimeout(() => {
                // 判断昵称是否重复
                this.tip = name == 'admin' ? '这个名字已经存在，请你换一个' : '用户名称可以使用';
            }, 2000);
        }
    }
});

如果只设置 handler 方法，监听 name 属性可以简写成：

name(newVal, oldVal) {
    console.log("newVal", newVal);
    console.log("oldVal", oldVal);
    this.checkName(newVal);
    this.tip = "请等待正在发送请求…";
},

immediate

• 配置项 immediate：侦听器是否在页面创建完成后自动触发一次；默认为 false

name: {
    handler(newVal, oldVal) {
        console.log("newVal", newVal); // newVal 
        console.log("oldVal", oldVal); // oldVal undefined  -  一开始不存在旧值，所以是 undefined
        this.checkName(newVal);
        this.tip = "请等待正在发送请求…";
    },
    immediate: true // 在页面创建完成后自动触发一次
}

$watch()

我们也可以通过 Vue 实例设置侦听器：vm.$watch( expOrFn, options / callback )

vm.$watch("name", {
    immediate: true,
    handler(newVal, oldVal) {
        console.log("newVal", newVal);
        console.log("oldVal", oldVal);
        this.checkName(newVal);
        this.tip = "请等待正在发送请求…";
    }
});

$watch 的简写形式：

vm.$watch("name", function (newVal, oldVal) {
    console.log("newVal", newVal);
    console.log("oldVal", oldVal);
    this.checkName(newVal);
    this.tip = "请等待正在发送请求…";
});

注意：如果 callback 使用箭头函数，this 会指向 window（默认 this 指向 Vue 实例）

• vm.$watch 返回一个取消观察函数，用来停止监听，并触发回调：

let unwatch = vm.$watch('name', callback);
// 之后取消观察
unwatch();

deep

默认情况下，如果我们监听的数据是一个 [对象]，那么只有整个对象被修改时，才会触发回调函数
就是说，如果只是修改该对象的某个属性，是不会触发回调函数的

<!-- 修改的是对象数据的属性值 -->
用户名称：<input type="text" v-model.lazy='obj.name'>

let vm = new Vue({
    el: "#app",
    data: { obj: { name: "superman" } }, // 对象数据
    watch: {
        obj(newVal, oldVal) { // 监听对象
            console.log(newVal, oldVal);
        }
    }
});

当然，我们也可以监听对象的指定属性，那么修改该属性值时，也能触发回调函数

"obj.name"(newVal, oldVal) {
    console.log(newVal, oldVal); // 新的属性值, 旧的属性值
}

但是，如果对象的属性较多，我们需要监听多个属性时，这样写就会有大量的冗余代码

此时，我们可以设置 deep: true 开启深度监听
如此，侦听器 watch 便可深度监听对象数据，就是说，即使修改的只是对象数据的属性值，也会触发回调函数

obj: { // 监听对象
    handler(newVal, oldVal) {
        console.log(newVal.name, oldVal.name); // 新的对象数据, 旧的对象数据
    },
    deep: true // 开启深度监听
}

同样的，如果我们监听的数据是一个 [数组]，那么只有整个数组被修改时，才会触发回调函数
就是说，如果只是修改该数组的某一项，是不会触发回调函数的

此时，我们可以设置属性 deep: true 开启深度监听。如此，侦听器 watch 便可深度监听数组数据
就是说，即使修改的只是数组数据的某一元素，也会触发回调函数

watch & computed

computed 能完成的功能，watch 都能完成；watch 能完成的功能，computed 不一定能完成
eg：watch 可以执行异步操作；computed 不能执行异步操作

因为 computed 的数据，是通过 return 语句返回的
假设将 return 语句包裹在定时器中，返回值将 return 给定时器里面的箭头函数，我们将获取不到返回值

注意 2 个原则：

• Vue 管理的函数，this 指向 Vue 实例，最好写成普通函数，否则 this 将丢失，而指向 window
• 异步操作的回调函数，不被 Vue 管理，最好写成箭头函数，这样 this 才能指向 Vue 实例