vue之watch和计算属性computed

区别一： watch监听的是一个变量 （或者一个常量） 的变化，这个变量可能是一个单一的变化也可能是一个数组。computed可以监听很多个变量，但是这个变量一定是vue实例里面的。

watch和computed均可以监控程序员想要监控的对象，当这些对象发生改变之后，可以触发回调函数做一些逻辑处理。

一、计算属性computed的特点

二、watch监控自身属性变化

一、watch监控路由对象

watch 监听某个数据的变化（监听完调用什么函数） 一个数据影响多个数据 （比如：浏览器自适应、监控路由对象、监控自身属性变化）

computed 计算后返回新 一个数据受多个数据影响（比如：计算总价格、过滤某些数据）

computed是用来处理你使用watch和methods的时候无法处理（比如有缓存的时候监听不了数据变化），或者是处理起来并不太恰当的情况的，利用computed处理methods存在的重复计算情况

title: vue-watch数组和对象

date: 2017-03-21

本文通过示例介绍vue如何监听数组和对象的变化。

数组更新检测

这部分仅支持通过下列方法 *** 作数组

针对array[index]=newVal可采用Vueset(array, index, newValue)或者arraysplice(index, 1, newValue)代替；

针对arraylength=newVal可采用arraysplice(newLength)代替；

watch选项

实例watch

响应式原理/变化检测

watch选项”watch vue实例data中的“对象属性”变化：

vue实例watch data中的“对象属性”变化：

如果希望在过程中添加响应式对象属性，则可通过Vueset(obj,'propetyName',val)或者vm$set(obj,'propetyName',val);

如果希望在过程中批量添加响应式对象属性，可采用thissomeObject = Objectassign({}, thissomeObject, { a: 1, b: 2 })；此时，handler函数接收的oldVal是原obj，newVal是变化后的obj；

监听数组中对象的变化：

说明：配置了deep为true后，vue会监听对象属性的变化，如果对象属性是引用类型的，则会深入监听，深入监听的规则与以上监听数组、对象规则一致，如：

arr[0]abcpush(3);会被监听到

vm$set(vmarr[0]ab,'propetyName',val);会被监听到

等等……

computed是一个计算属性,类似于过滤器,对绑定到view的数据进行处理，根据计算所依赖的属性动态返回新的计算结果。

computed和data的定义不可重名，否则是会报错的。

computed是基于它们的响应式依赖进行缓存的 ，只在相关响应式依赖发生改变时它们才会重新求值，如果依赖没有改变，多次访问 fullName 这个计算属性，都会立刻返回之前的结果，不必再重新计算。

计算属性默认只有 getter，不过在需要时你也可以提供一个 setter。

watch选项是一个对象，键是data里面的数据，值是对应的回调函数，回调函数有两个参数分别为修改后的值newValue和修改前的值oldValue。Vue 实例将会在实例化时调用$watch()，遍历 watch 对象的每一个属性。

watch在实例加载时是默认不监听的，使用 immediate:true ，可以在首次加载时也做监听。

watch只监听数据的值是否发生改变，而不会去监听数据的地址是否发生改变。也就是说，watch想要监听引用类型数据的变化，需要进行深度监听，使用 deep:true 可进行深度监听。

computed与watch的应用场景：computed一般应用在多个数据影响一个数据的 *** 作，如购物车。watch一般使用在一个数据来影响多个数据的 *** 作，如搜索框

1computed函数必须用return返回计算的值，watch没有return的必须要求

2computed有缓存，如果依赖的值没有改变，调用computed函数时则不会执行函数重新计算，直接返回缓存的值。watch没有缓存，每次监听的值发生改变都会执行。

var vm=new Vue({

    data:{

        a:1,

        b:{

            c:1        }

    },

    watch:{

        a(val, oldVal){//普通的watch监听            consolelog("a: "+val, oldVal);

        },

        b:{//深度监听，可监听到对象、数组的变化            handler(val, oldVal){

                consolelog("bc: "+valc, oldValc);//但是这两个值打印出来却都是一样的            },

            deep:true        }

    }

})

vma=2

vmbc=2

a是一个普通的值，当a的值变化时会被监听到，b是一个对象，不能直接像a那么写，需要深度监听才能捕捉到，但是当我想去捕捉b对象中某一个值的变化时却发现，打印出来的两个值是不一样的

这样就只能知道对象发生变化却不知道具体哪个值发生了变化，如果想监听对象某一个值得变化可以利用计算属性computed

var vm=new Vue({

    data:{

        b:{

            c:1        }

    },

    watch:{

        newValue(val, oldVal){

            consolelog("bc: "+val, oldVal);

        }

    },

    computed: {

    newValue() {

    return thisbc

    }

    }

})

vmbc=2

用watch去监听computed计算过的值就可以直接知道是哪个对应的值发生了变化

watch: { // 监听路由传值变化，当页面不重新加载的时候需要加载不同模型

    $route () {

      thissceneName = this$routequerysceneName

      windowTTSaddObjectToScene(thissceneName)

    }

  }

总结：

1 计算属性computed在使用时，一定要注意，函数里面的变量都会被监听，只要里面的某一个值变动，便会将整个函数执行一遍。 而watch只是监听某一个值，若是监听的值里面也有很多变量，也会全部监听

2 计算后的属性可不在 data 中定义，如果定义会报错，因为对应的computed作为计算属性定义并返回对应的结果给这个变量,变量不可被重复定义和赋值。  而watch监听data中定义的变量变化

computed特性

1是计算值，

2应用：就是简化tempalte里面{{}}计算和处理props或$emit的传值

3具有缓存性，页面重新渲染值不变化,计算属性会立即返回之前的计算结果，而不必再次执行函数

watch特性

1是观察的动作，

2应用：监听props，$emit或本组件的值执行异步 *** 作

3无缓存性，页面重新渲染时值不变化也会执行

接下来介绍下 各自的方法：

链接：>

数据

情况一，监视 ref 所定义的一个响应式数据

情况二，监视 ref 所定义的多个响应式数据

情况三，监视 reactive 所定义的一个响应式数据

输出结果：

情况四，监视 reactive 所定义的一个响应式数据中的某个属性,(需要写到函数里面)

情况五，监视 reactive 所定义的一个响应式数据中的某些属性,(需要用数组包裹，在写到函数里面)

输出结果：

输出结果：

watchEffect

watch 的套路是：既要指明监视的属性，也要指明监视的回调

watchEffect 的套路是：不用指明监视哪个属性，监视的回掉中用到那个属性，那就监视哪个属性

watchEffect 有点像computed：

总结：

以上就是关于vue之watch和计算属性computed全部的内容，包括:vue之watch和计算属性computed、vue-watch、Vue computed和watch等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！