vue之computed和watch

计算属性 computed

侦听器or观察者 watch

一直以来对computed和watch一知半解，用的时候就迷迷糊糊的，今天仔细看了看文档，突然茅塞顿开，原来就是这么简单啊：

computed，通过别人改变自己

watch，通过自己改变别人

需要注意的是，computed会缓存数据，只有在满足以下两个条件时才会重新计算：

1、存在依赖型数据，即存在于VUE的data等对象的实下的实例数据

2、依赖型数据发生改变

如果不满足以上两个条件，computed不会重新计算，只会拿缓存的数据。而watch，只要调用他，他就会执行。

注意：computed会缓存数据，所以进行开销较大的操作时不适合用它。

非依赖型数据发生改变时，这是使用methods方法即可。

computed也可以通过自己改变别人

computed默认只有 getter ，不过在需要时也可以提供一个 setter：

computed: {fullName: {// getterget: function () {return this.firstName   ' '   this.lastName},// setterset: function (newValue) {var names = newValue.split(' ')this.firstName = names[0]this.lastName = names[names.length - 1]}}}

然后运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。

什么时候使用

computed

1、其他依赖型数据发生改变，自身也要改变的时候

2、自身改变了，想要改变其他数据的时候，这时需要添加setter

watch

1、自身改变时改变其他数据

2、当需要在数据变化时执行异步或开销较大的操作时

原文地址：https://segmentfault.com/a/1190000012610140

更多专业前端知识，请上【猿2048】www.mk2048.com

vue之computed和watch相关推荐

vue中computed（计算属性）和watch在实现父子组件props同步时的实际区分
vue中computed和watch的对比是一个很有意思的话题. 看过官网教程以后,我们往往更倾向多使用computed.computed优点很多,却在某些时候不太适用. 今天我们就稍微讨论一下,当我 ...
vue方法调用失败后多次调用_浅析Vue中 computed / watch / methods的区别
思考:请说下Vue中computed 和 watch 的区别( 面试题 ) 构造选项 computed / watch / methods computed ● computed 起初构想在Vue的 ...
vue，computed，计算属性
vue,computed,计算属性用法: computed: {didiFamily: {// getterget: function () {return this.data_i + ' ' + ...
Vue中computed分析
Vue中computed分析在Vue中computed是计算属性,其会根据所依赖的数据动态显示新的计算结果,虽然使用{{}}模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的,在模板中放入太 ...
Vue warn]: Computed property XXXl was assigned to but it has no setter.错误
Vue warn]: Computed property "XXXl" was assigned to but it has no setter.错误解决:直接修改HTML中的v ...
VUE中computed 、created 、mounted 的先后顺序
VUE中computed .created .mounted 的先后顺序 1.computed .created .mounted 的先后顺序 created => computed => ...
vue的computed如果没有出现在模板里面，当它依赖的响应式属性发生变化，getter会触发吗？
有知乎网友问: vue的computed如果没有出现在模板里面,当它依赖的响应式属性发生变化,getter会触发吗? 先说答案,不会触发! 原因说穿了其实也很简单,因为你没有在模板中使用该计算属性,所 ...
[Vue warn]: Computed property “userInfo“ was assigned to but it has no setter.
[Vue warn]: Computed property "userInfo" was assigned to but it has no setter. 一.报错信息二.报错 ...
深究vue中computed顺序、watch顺序、响应次数
文章目录前言深究步骤 1.代码 2.输出结果 3.分析过程总结前言深究vue中computed顺序.watch顺序.响应次数深究步骤 1.代码 <template><di ...
Vue中computed计算属性和data数据获取的问题
获取到数据(对象.数组),截取一部分显示到页面中,用computed计算属性来实现截取数据然后直接输出到页面. <div class="detailBox"><h ...