就针对watch和computed的区别

本文链接： https://blog.csdn.net/weixin_44195250/article/details/100558867

首先说下watch与computed的共同点：

他们都以vue的依赖作为基础 当所依赖的数据发生改变的时候
 会触发相关的函数去实现数据的变动

computed：计算属性（通过属性计算而得来的属性）
computed是一个计算属性，computed是依赖vm中data的属性变化而变化的，就是当data中的属性发生改变的时候计算属性会重新计算，当前函数才会执行并进行缓存，如果没有发生改变，则当前函数不会执行,

但是当其他的数据发生改变的时候computed属性不会重新计算，就会调用当前函数的时候结果会从缓存中读取，从而提升性能。

尽量不要在computed中对data中的属性做赋值操作

watch：属性监听监听属性的变化

但是特殊情况下是监听不到数组的变化的 例：数据的修改 ，通过length来清空数组

想要监听数组的变化需要用splice 或$set

watch只会监听数据的值是否发生改变 
 而不会去监听数据的地址是否发生改变 
 如果需要监听对象的变化 就需要进行深度监听 deep+handler

默认情况下watch第一次不会执行的 
 需要通过声明immediate的值为true可以立即执行handler
而且watch的方法默认不会执行，只有依赖的属性发生改变才执行

所以immediate用来做页面首次加载的时候做一次监听

watch中的函数不需要调用

但是computed需要

watch与computed使用的场景 
   1、watch:一个数据影响多个数据        
        例如:网络请求 模糊查询 浏览器自适应 监控路由对象
    2、computed:一个数据受多个数据的影响        
         例如:商品购物车的结算  过滤某些商品数据

watch无法监听数组的情况，以及解决方案

无法监听数组的情况 
1.利用索引直接设置一个数组项时，例如：arr[indexOfItem] = newValue; 
2.修改数组的长度时，例如：arr.length = newLength; 
3. 解决方案  1.this.$set(arr, index, newVal);  2.使用数组 splice 方法

就针对watch和computed的区别

猜你喜欢