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。

阅读 2.4k

泽浩沉
再淡的墨水胜于最强的记忆

希望自己能够自由地对各种事情发表自己的意见

285 声望
18 粉丝
0 条评论
你知道吗?

希望自己能够自由地对各种事情发表自己的意见

285 声望
18 粉丝
宣传栏