vue 计算属性和data_vue中，计算属性 computed 和 watch 的区别

methods，watch和computed都是以函数为基础的，但各自却都不同；

1，methods

不存在缓存，执行一次运行一次，执行n次，运行n次

2，computed

使用场景：当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性

计算属性 computed 是基于data中数据进行处理的，data数据变化，他也跟着变化

当data中数据没有发生改变时，我们调用computed中函数n次，只会进行缓存(执行一次)

每个计算属性都包含两个set、get 属性

{{get}}

//调用时候，直接写上函数名即可

computed: {

get: function () { //这里不适合写 get()，语法规定

return this.firstName + ' ' + this.lastName;// 必须要有return

},

}

2，watch

使用场景：数据变化时执行异步或开销较大的操作，可以随时修改状态的变化

watch:类似于监听机制+事件机制。

在大部分情况下我们都会使用computed，但如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择。watch为一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。

// 这里直接用 v-model 来绑定，不需要添加 change 事件

{{tip}}

data() {

return {

nameValue: "",

tip: ""

};

},

methods: {

checkName(value) {

var that = this;

setTimeout(() => {

if (value == "admin") {

that.tip = "用户名已存在";

} else {

that.tip = "用户名可以使用";

}

}, 2000);

}

},

watch: {// 数据变化时执行异步或开销较大的操作

nameValue(value) {

this.checkName(value);

this.tip = "正在验证......";

}

}

2，watch的高级用法

注，上面的watch方法是当改变值时候，才会触发监听事件，但是我们想刚进入页面时候，就触发监听事件，就要用handler()方法

1，handler()：当页面刚进入时，自动绑定watch事件，不需要进行触发

watch: {// 页面加载时，就自动触发此事件

nameValue:{

handler(new){

this.checkName(value);

this.tip = "正在验证......";

}

}

}

2，immediate属性：布尔值

immediate：true：首次加载就监听数据变化

immediate：false：只有发生改变才监听

watch: {// 页面加载时，就自动触发此事件

nameValue:{

handler(new){

this.checkName(value);

this.tip = "正在验证......";

},

immediate: true

}

}

3，deep:true；是开启深层次的监听，即所有属性都加上监听器，如果其中一个发生改变了就执行handler函数。

watch: {// 页面加载时，就自动触发此事件

nameValue:{

handler(new){

this.checkName(value);

this.tip = "正在验证......";

},

immediate: true,

deep:true

}

}