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

本文主要是介绍【Vue2】计算属性 computed 侦听器 watch，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

计算属性 computed

getter

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

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

let vm = new Vue({el: '#app',data: { msg: "superman" },// 设置 computedcomputed: {// 设置计算属性 reMsgreMsg: {// 设置 getterget() {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: {// 设置 getterget(vm) {console.log(vm === this); // truereturn [...this.msg].reverse().join('');}
}

• 上例还可以简写：

reMsg(vm) {console.log(vm === this); // truereturn [...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('');},// 设置 setterset(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: '' },// 设置侦听器 watchwatch: {// 监听数据 namename: {// name 被改变时，调用 handlerhandler(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  -  一开始不存在旧值，所以是 undefinedthis.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 实例

这篇关于【Vue2】计算属性 computed 侦听器 watch的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---