vue中watch和computed的选择

23
五月
2021

vue中watch和computed的区别

watch: 

 1.其他数据变化重新渲染视图时。每次都会执行

 2.可以执行异步方法。

3.监听函数接受两个参数,一个是新值,一个是旧值。

computed:

1.有缓存,在其他数据变化重新渲染视图时,如果计算属性依赖的数据没有变化,则直接去缓存中的。知道依赖的数据变化才会重新计算

2.不能写异步方法。无法监听数据的变化

3.computed 属性值是函数默认走get方法,函数的返回值就是属性值;在computed中属性都要一个get和set方法。数据变化时调用的是set方法

总结:应根据使用场景去选择watch和computed来提高性能

eg:

// 利用computed 可以减少循环执行次数,computed只会在count改变后会执行,other改变后更新视图,computed不会执行,从而达到性能优化

<div>{{sum}}</div>
<div>{{other}}</div>
<script>
export default {
    
    data() {
        count: 1,
        other: "1"
    },
    computed: {
        sum(){
            let i = 10000
            while(i > 0) {
                i--
            }
            return this.count + 1
        }
    }
}
</script>

 

TAG

网友评论

共有访客发表了评论
请登录后再发布评论,和谐社会,请文明发言,谢谢合作! 立即登录 注册会员