vue中watch和computed的选择

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>