vue2计算属性和侦听器官网介绍

1、功能不同，计算属性用于解决模板语法冗余问题；侦听器侦听data中某一个数据变化。

2、计算属性有缓存机制，侦听器没有缓存机制

• 计算属性支持缓存，只有当依赖项数据发生改变，才会重新进行计算
• 侦听器是不支持缓存的，数据变化，就会直接触发响应的操作

3、计算属性不支持异步操作，侦听器支持异步操作

• 计算属性是不支持异步操作的，当计算属性computed内有异步操作的时候，无法监听数据的变化，此时计>算属性computed是无效的；
• watch支持异步的操作：监听的函数接受到两个参数，第一个参数是最新的值，第二个参数是输入之前的值。

4、计算属性可以给vue新增属性，侦听器必须是data中已有属性

5、计算属性只要使用了就会立即执行一次，侦听器默认只有当数据第一次执行才会执行

6、侦听器可以通过设置immerdiate为true，也可以像计算属性一样立即执行一次

• 侦听器中的immediate属性： immediate设置为 true 的意思就是组件加载立即触发回调函数执行

7、擅长处理的场景

• 计算属性：就是一个数据受多个数据的影响；比如项目中的购物车计算价格，数据的全选和反选；
• 侦听器：一个数据影响多个数据；比如项目中的搜索框

计算属性

computed: {fullName: {// getter，该函数不接受参数，当初次读取计算属性或者计算属性所依赖的数据发生变化时被调用get: function () {return this.firstName + ' ' + this.lastName},// setter，接受一个可选参数（计算属性被修改之后的值），当计算属性被修改时被调用set: function (newValue) {var names = newValue.split(' ')this.firstName = names[0]this.lastName = names[names.length - 1]}}
}

如果计算属性computed需要对数据进行修改，需要写get和set两个方法，当数据变化时，就调用set方法

侦听器

var watchExampleVM = new Vue({el: '#watch-example',data: {question: '',},watch: {// 如果 `question` 发生改变，这个函数就会运行question: function (newQuestion, oldQuestion) {console.log(newQuestion);console.log(oldQuestion);}}
})//immediate属性======================
var watchExampleVM = new Vue({el: '#watch-example',data: {question: '',},watch: {// 如果 `question` 发生改变，这个函数就会运行question:{handler(newQuestion, oldQuestion) {console.log(newQuestion);console.log(oldQuestion);},// 代表在wacth里声明了name这个方法之后立即先去执行一次handler方法immediate: true}}
})//deep属性======================
/*
侦听器中的deep属性，deep设置为 true 的意思就是深入侦听，修改对象里面任何一个属性都会触发这个监听器里面的 handler 方法来处理响应的逻辑
*/
//不适用deep

//使用deep