computed和watch的区别（vue之watch和计算属性computed）

本文目录

• vue之watch和计算属性computed
• Vue computed和watch
• vue的计算属性理解及与watch的区别
• vue中，计算属性 computed 和 watch 的区别
• watch和computed的区别
• watch和computed的区别及用法是什么
• vue2 中 computed 和 watch 的异同
• vue中computer和watch的区别
• 1、watch和computer的区别

vue之watch和计算属性computed

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

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

一、计算属性computed的特点

二、watch监控自身属性变化

一、watch监控路由对象

watch 监听某个数据的变化（监听完调用什么函数） 一个数据影响多个数据 （比如：浏览器自适应、监控路由对象、监控自身属性变化）
computed 计算后返回新 一个数据受多个数据影响（比如：计算总价格、过滤某些数据）
computed是用来处理你使用watch和methods的时候无法处理（比如有缓存的时候监听不了数据变化），或者是处理起来并不太恰当的情况的，利用computed处理methods存在的重复计算情况

Vue computed和watch

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一般使用在一个数据来影响多个数据的操作，如搜索框

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

vue的计算属性理解及与watch的区别

计算属性:computed

在一个计算函数里可以完成各种复杂的逻辑，包括运算、函数调用等；

如：computed：{

        reversedText:function(){

                return this.text.split(’,’).revetse().join(’,’);

        }

}

可以直接在《div》{{reversedText}}《/div》调用；

依赖于text更新。text发生改变reversedText才发生改变；

虽然在methods里写一个方法也可以起到同样的作用；

但是计算属性是基于它的依赖缓存的；依赖不变计算属性就不会发生改变会缓存下拉；

就是说同一个界面多个地方调用了这个reversedText；如果text不是效应式依赖；

reversedText是写methods中的方法，那么只要重新渲染，调用方法函数就会执行；重新计算；

reversedText是计算属性那么就不需要重新计算；

说说计算属性的setter 和 getter；

get 是用于读取

set是用于写入触发；

比如你在一个方法中触发了这个计算属性，给它赋值，那么就会触发set里面的方法；

然后watch监听的是你定义的变量,当你定义的变量的值发生变化时，调用对应的方法。

watch:{

    text:function () {

      this.msg="dajiahao"

    }

}

text发生改变 调用相应的方法

vue中，计算属性 computed 和 watch 的区别

methods，watch和computed都是以函数为基础的，但各自却都不同；

不存在缓存，执行一次运行一次，执行n次，运行n次

使用场景：当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性
计算属性 computed 是基于data中数据进行处理的，data数据变化，他也跟着变化
当data中数据没有发生改变时，我们调用computed中函数n次，只会进行缓存（执行一次）
每个计算属性都包含两个set、get 属性

使用场景：数据变化时执行异步或开销较大的操作，可以随时修改状态的变化
watch:类似于监听机制+事件机制。
在大部分情况下我们都会使用computed，但如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择。watch为一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。

注，上面的watch方法是当改变值时候，才会触发监听事件，但是我们想刚进入页面时候，就触发监听事件，就要用handler（）方法

1，handler（）：当页面刚进入时，自动绑定watch事件，不需要进行触发

注：

2，第二种

watch和computed的区别

计算属性通常依赖于其他数据属性。对于依赖属性的任何改变都会触发计算属性的逻辑。计算属性基于它们的依赖关系进行缓存，因此只有当依赖项发生变化时，它们才会重新运行，否则他会使用缓存中的属性值。（例如，返回 new Date()的计算属性将永远不会重新运行，因为逻辑将不会运行超过一次）。计算属性在默认情况下是getters，但是如果需要实现类似的功能，则可以设置setter函数。
计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

watch：
watch用来监听当一个数据属性值发生变化时，就可以调用的函数，没有必须依赖的数据属性；属于异步操作；
Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

举个栗子

但数据量较大的时候，用watch更合适；在过滤数据的时候用computed。

computed的基础用法：
计算属性的getter函数---当其依赖的属性的值发生变化的时，这个计算属性的值也会自动更新。多用于"data，computed"的属性。
计算属性的setter函数---当赋值给计算属性的时候，将调用setter函数。多用于在模板组件中需要修改计算属性自身的值的时候，例子如下：

计算属性的缓存---Vue实例中被观察的数据属性发生了改变时才会重新执行getter,但是我们有时候计算属性依赖实时的非观察数据属性，比如下面例子中的Data.now

计算属性getter不执行的场景---当包含计算属性的节点被移除并且模板中其他地方没有再引用该属性的时候，那么对应的计算属性的getter函数方法不会执行
在v-for中使用计算属性，起到类似"过滤器的作用"，例子如下：

watch与computed的set函数的比较---uex 接收 的computed ，用set监测不到变化，必须要用watch才可以生效；（原理：实质没有改变computd的值，只是改变了get的return值 =》 组件外的访问）
v-model 改变的computed，用watch监测不到变化，必须要用computed对象中的set函数方法才能监测得到（原理：相当于每次改变了computed自身的值 =》 组件内的访问）

computed和watch都不可用箭头函数，因为箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。

父组件通过props向子组件传入的值，在子组件中是不可修改的，不然会报错，但是如果需要根据页面需求对props传入的值进行修改的话，则可以在data中重新定义一个变量，改变指向，通过watch来监测props值的改变，并实时修改data中变量的值，例子如下：

这里 watch 的一个特点是，最初绑定的时候是不会执行的，要等到 firstName 改变时才执行监听计算。
那我们想要一开始就让他最初绑定的时候就执行改immediate: true。

handler，Vue.js会去处理这个逻辑，最终编译出来其实就是这个handler。

deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改里面任何一个属性都会触发这个监听器里的 handler。

举个栗子：

watch和computed的区别及用法是什么

一、表达意思不同

1、watch：看，注视；观看（电视节目、比赛等）；关注；照看，守护；当心，留意；监视；表，手表；观察，监视； 警卫队，治安队；警戒时间。

2、computed：计算的，使用计算机的；计算，估算（compute 的过去式和过去分词）。

二、用法不同

1、watch：watch sb doing sth . 表示看到某人正在做某事；watch sb do 看到某人做某事的全部过程。

2、computed：通常在句中作形容词和动词，修饰主语或宾语。

例句：

1、Inside the box was a gold watch. 

盒子里装着一只金表。

2、He looked theatrically at his watch. 

他夸张地看了看表。

3、There’re some things that cannot be computed. 

总会有一些无法计算的东西。

vue2 中 computed 和 watch 的异同

他们回答的他复杂了，小白根本看不懂。

首先两者都是在元素变化后才执行函数，区别在于

1.computed:通过其他元素构造新的元素，当其他元素变化时触发computed；当进入页面时加载dom时自动执行

例如:

com:function(){b+c} 当b或者c变化时,执行com函数;

使用场景(多对一):

computed=a+b+c;当其它任意元素发生变化时都可以触发computed重新构造给com赋值;

computed:{

com:function(){

return this.a+this.b+this.c

}

}

2.watch:就是观察本身,当本身值变化时触发watch;

例如:

wat:function(data){ ... }

当自身变化时执行wat函数；

使用场景(一对多):

watch元素发生变化时，我们可以在函数里分别重新定义其它元素；

例如

watch:{

wat:function(data){

this.a=data+1;

this.b=data*2;

this.c="hello"

}

}

对比代码:

vue中computer和watch的区别

computed用于处理复杂的逻辑运算，主要和methods储存方法来进行区分；methods储存方法，computed储存需要处理的数据值；methods每次都会调用，computed有缓存机制，只有改变时才执行，性能更佳。

watch顾名思义，用于监听数据变化，其中可以监听的数据来源有三部分：props、data、computed内的数据；watch提供两个参数（newValue，oldValue），第一个参数是新值，第二个参数保存旧值；

1.支持缓存，只有依赖数据发生改变，才会重新进行计算

2.不支持异步，当computed内有异步操作时无效，无法监听数据的变化

3.computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过的数据通过计算得到的

4.如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed

5.如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

1.不支持缓存，数据变，直接会触发相应的操作；

2.watch支持异步；

3.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；

4.当一个属性发生变化时，需要执行对应的操作；一对多；

1、watch和computer的区别

***隐藏网址***
wactch：

computer：

下面来看一个错误：

错误：Duplicated key ’otherName’.也就是说这里有多个otherName属性，很明显，data里已经定义一个，在computed属性里又return了一次
修改：把data里的otherName去掉即可

方法监听数据的变化： 每当触发重新渲染时，调用方法将总会再次执行函数，性能会低