Vue_侦听器 watch 监听 computed 计算属性

目录

侦听器 watch

handler

immediate

$watch()

deep

项目简单使用 ：

---

侦听器 watch

• 侦听器 watch 可以 监听 Vue 实例 的 属性
• （ data 里面的 数据 、computed 里面的 计算属性 … ）
• 当监听的数据 被改变 ，侦听器 watch 就会执行一些操作
• 用于在数据变化时，执行 异步操作 / 比较复杂 的 操作
• （ 使用 computed 能完成 简单 的 操作 ）

用户名称：

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); // 获取修改前的值
                // 检查昵称是否重复
                this.checkName(newVal);
                // 验证等待
                this.tip = "请等待正在发送请求…";
            }
        }
    },
    methods: {
        checkName(name) {
            // 异步操作
            setTimeout(() => {
                // 判断昵称是否重复
                this.tip = name == 'admin' ? '这个名字已经存在，请你换一个' : '用户名称可以使用';
            }, 2000);
        }
    }
});

如果只设置 handler 方法，我们可以简写：

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

immediate

• 配置项 immediate 默认为 false，表示被监听的数据被修改 则执行 handler 方法

  改为 true 则表示：立即执行一次 handler 方法先

name: {
    handler(newVal, oldVal) {
        console.log("newVal", newVal); // newVal 
        console.log("oldVal", oldVal); // oldVal undefined  -  一开始不存在旧的值，所以是 undefined
        this.checkName(newVal);
        this.tip = "请等待正在发送请求…";
    },
    immediate: true // 立即监听：不管数据有没有变化 ，watch 一上来就先监听一次
}

$watch()

我们也可以通过 Vue 实例调用侦听器

watch：‘vm.watch：`vm.watch：‘vm.watch( expOrFn, callback, [options] )` 

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

默认情况下，如果我们监听的数据是一个 { 对象 } ，

那么只有整个对象被修改时，才会触发回调函数

就是说，如果只是修改该对象的 某个属性 ，是 不会触发 回调函数 的

用户名称：

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 便可深度监听数组数据
就是说，即使修改的只是数组数据的某一项，也会触发回调函数

---

---

项目简单使用 ：