目录
在Vue中，computed、watch和methods是处理响应式数据的三种方式。它们的主要区别在于计算方式、响应方式和使用场景。
computed
computed是一种计算属性，它会根据所依赖的响应式数据自动计算出一个新的值，并且该计算结果会被缓存起来，只有当所依赖的数据发生变化时才会重新计算，也就是说, 当所依赖的数据没有发生改变时, 多次访问计算属性它会立即返回之前缓存的计算结果, 而不会再次执行computed中的函数。而且computed本质上是一个只读属性，它不会修改任何响应式数据，只是根据所依赖的数据计算出一个新的值。
使用computed的好处在于它可以将复杂的计算逻辑封装在一个属性中，并且只有在需要时才会计算，并且在依赖数据没有发生变化时只返回上一次的计算缓存值，从而提高了代码的可读性和性能。
computed: {
get: function () {
return this.firstName + ' ' + this.lastName;// 必须要有return
},
}
watch
watch是一种观察者模式，它会在所观察的响应式数据发生变化时执行一个回调函数，在回调中会传入newVal和oldVal两个参数。watch可以监听一个或多个响应式数据，并可以执行一些异步操作，例如发送网络请求或者操作本地存储等。
使用watch的好处在于它可以监控数据的变化并执行相应的操作。例如，我们可以使用watch来监听一个输入框的变化，并根据输入框的值发送网络请求：
watch: {
inputValue(newValue, oldValue) {
// 根据输入框的值发送网络请求
fetch('http://example.com/api?query=' + newValue)
.then(response => response.json())
.then(data => this.result = data);
}
}
在这个例子中，当inputValue发生变化时，watch会自动执行回调函数，并根据输入框的值发送网络请求。
methods
methods是一个普通的JavaScript方法，它可以接收参数并且可以执行任意的JavaScript代码。methods不会自动响应数据变化，需要手动调用才能更新视图。methods方法是每次调用, 都会执行函数的, methods而且它不是响应式的。
使用methods的好处在于它可以执行任意的JavaScript代码，并且可以根据具体的需求传入不同的参数。例如，我们可以使用methods来处理用户的点击事件：
methods: {
handleClick(event) {
// 处理用户的点击事件
console.log('User clicked on', event.target);
}
}
在这个例子中，当用户点击某个元素时，会调用handleClick方法，并将事件对象作为参数传入。
归纳三者不同点
methods，watch和computed都是以函数为基础的，但各自却都不同；
1、methods
不存在缓存，执行一次运行一次，执行n次，运行n次
2、computed
使用场景：当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性
计算属性 computed 是基于data中数据进行处理的，data数据变化，他也跟着变化
当data中数据没有发生改变时，我们调用computed中函数n次，只会进行缓存（执行一次）
每个计算属性都包含两个set、get 属性
<div>{{get}} </div> //调用时候，直接写上函数名即可
computed: {
get: function () { //这里不适合写 get()，语法规定
return this.firstName + ' ' + this.lastName;// 必须要有return
},
}
3、watch
使用场景：数据变化时执行异步或开销较大的操作，可以随时修改状态的变化
watch:类似于监听机制+事件机制。
在大部分情况下我们都会使用computed，但如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择。watch为一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。
// 这里直接用 v-model 来绑定，不需要添加 change 事件
<input type="text" v-model="name" /> {{tip}}
data() {
return {
name: "",
tip: ""
};
},
methods: {
checkName(value) {
var arg = this;
setTimeout(() => {
if (value == "aa") {
arg.tip = "用户名已存在";
} else {
arg.tip = "用户名可以使用";
}
}, 1000);
}
},
watch: {// 数据变化时执行异步或开销较大的操作
name(value) {
this.checkName(value);
this.tip = "正在验证......";
}
}
watch的高级用法
上面的watch方法是当改变值时候，才会触发监听事件，但是我们想刚进入页面时候，就触发监听事件，就要用handler（）方法
1，handler（）：当页面刚进入时，自动绑定watch事件，不需要进行触发
watch: {// 页面加载时，就自动触发此事件
name:{
handler(new){
this.checkName(value);
this.tip = "正在验证......";
}
}
}
2，immediate属性：布尔值
immediate：true：首次加载就监听数据变化
immediate：false：只有发生改变才监听
watch: {// 页面加载时，就自动触发此事件
name:{
handler(new){
this.checkName(value);
this.tip = "正在验证......";
},
immediate: true
}
}
3，deep:true；当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，此时就需要deep属性对对象进行深度监听。
data（） {
return {
name: {
'fristname': 'a',
'lastname': 'a'
},
nameCount:0
}
}，
watch: {
name: {
handler(newVal) {
this.name++
},
deep: true
}
}
设置deep:true则可以监听到name的变化，此时会给name的所有属性都加上这个监听器，当对象属性较多时，每个属性值的变化都会执行handler。
如果只需要监听对象中的一个属性值，可以字符串的形式监听对象属性：
watch: {
'name.first': {
handler(newVal) {
this.name++
},
deep: true
}
}
