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。