Vue中filters，computed， methods， watch的总结

computed

作用：计算属性，根据现有的值生成一个新的属性值，并用return返回新的属性值。
eg: 计算总价

 <div>{{totalPrice}}</div>
 <div>{{totalPrice}}</div>
 computed: {
    totalPrice () {
        console.log('computed属性实现计算总价')
        return this.price * this.total
    }
 }

（1）计算属性将被混入到 vue 实例中，即this 上下文自动地绑定为 Vue 实例，但是计算属性使用了箭头函数，则 this 不会指向这个组件的实例。
（2）计算后的属性不需要在data中定义。
（3）computed属性有依赖缓存，若computed绑定的方法中任意变量改变，该方法才会被重新调用，上例中，页面多次调用totalPrice，但在控制台中只显示一次 'computed属性实现计算总价'。
（4）computed不接受传参，数据都是从data中获取。
场景：需要生成一个新的属性时或者复杂的逻辑计算。

filters

作用：过滤器，相当于把数据进行格式化。比如时间戳格式
eg: 在价格的前面加上人民币￥

<div>{{ price | priceFormat }}</div>

js: 
filters： {
   priceFormat (val){
    return  `￥${val}`
   }
}

（1）需要传参和返回值
场景：文本格式。

watch

作用：监听属性，监听data属性中的数据，当数据发生变化时，自动执行函数。
eg: 城市联动

 watch: {
    curProvs () {
        //获取相应城市...
    }
 }

（1) watch回调函数不可以使用箭头函数，因为箭头函数绑定了父级作用域的上下文，所以this 不是指向 Vue 实例。
（2）监听的属性需要在data中定义。

场景：数据改变时，执行异步操作或开销较大的操作，发请求或者监听路由进行相应操作。

methods

methods中存放的是内部方法、事件的回调。

（1）methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。注意在methods中不要使用箭头函数，因为箭头函数绑定了父级作用域的上下文。
（2）只要发生重新渲染，methods调用总会执行该函数
（3）methods 是函数调用，computed,filters是属性调用。

场景：每次确实需要重新加载，不需要缓存时用methods。

链接: https://www.fly63.com/article/detial/5989