在使用vue中会经常遇到watch、computed、methods三个节点，且三者都是以函数为基础的，但实际上三者的应用场景都不同
methods
方法。在methods节点中通常用于定义方法，而方法只有手动去调用或通过事件的去触发才会执行 特性：每调用一次方法都会重新执行一遍代码
new Vue({
el:"#app",
data:{
num：0
},
// 定义方法
methods:{
addNum(){
// 每次调用当前方法都让 num 的值 +1
this.num += 1
}
}
})
computed
计算属性。当页面中有某些数据依赖其他数据进行变动的时候，此时可以使用计算属性， 特性：计算属性的结果会被缓存。当多次调用计算属性时，如果计算属性所依赖的数据没有变动，此时计算属性不会重新计算结果，而是返回上一次数据变动前计算的结果。也就是说只有计算属性所依赖的数据发生变化，计算属性才会重新计算结果
<!-- 使用计算属性直接调用函数名即可（不需要括号） -->
<div v-text="reverseStr"></div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: "hello"
},
// 计算属性
computed: {
// 定义计算属性的函数
reverseStr: function () {
// 必须通过 return 将结果返回
return this.msg.split('').reverse().join('')
}
}
})
</script>
watch
侦听器。watch和computed很相似，当侦听器所侦听的数据项发生了变化，就是立刻触发侦听器所绑定的处理函数，在处理函数中能拿到数据变动后最新的值，从而进行某些具体的业务逻辑操作。一般用于数据变化时执行异步操作或开销较大的操作
<input type="text" v-model="uname">
<script>
var vm = new Vue({
el: '#app',
data: {
uname:""
},
watch: {
uanme(newVal,oldVal){
// 当 uname 的值发生变化就会触发当前侦听器
console.log(newVal,oldVal)
}
}
})
</script>
总结
从上面的示例中可以看出
- methods中定义的方法，需要手动/某个事件去触发才会执行，且每一次调用都会重新去执行一遍代码。所以
methods方法一般用于表示一个具体的操作，主要书写业务逻辑 - computed计算属性，不需要手动去触发，而是通过计算属性所依赖的数据发生了变化然后自动的去触发重新重新计算结果。最大的特点是有计算属性有缓存，不会频繁的重新计算结果，性能会较好与其他两个。最为典型的应用场景就是购物车的结算模块。通过每一件商品的单价和数量计算出总价格
- watch侦听器，也是不需要手动去触发，也是通过所侦听的数据项的变动而触发的。但侦听器没有缓存，只要数据项发生变动就会立刻触发函数，一般用于在数据变化的同时进行异步操作或者是比较大开销的操作。如在注册用户时实时监听用户名是否被可用
