vue中computed（计算属性）和watch在实现父子组件props同步时的实际区分

vue中computed和watch的对比是一个很有意思的话题。
看过官网教程以后，我们往往更倾向多使用computed。computed优点很多，却在某些时候不太适用。
今天我们就稍微讨论一下，当我们在编写一个子组件时，需要同步父子组件的属性props时，computed与watch的选用。
举个例子好了。
首先看computed：

props: {letter: {type: String,default: a}
},computed: {innerLetter: {get () {return this.letter;}set (value) {this.$emit('change-letter', value);}}
}

再来看看watch：

props: {letter: {type: String,default: a}
},data () {return {innerLetter: this.letter}
}watch: {letter (value) {this.innerLetter = letter;}
}methods: {changeLetter (value) {this.$emit('change-letter', value);}
}

两种写法要实现的功能都是要实现向子组件传入的props能够与父组件保持一致，这两种写法都很常见。
我们来看看他们的区别是什么：

computed写法更简便，innerLetter作为letter的全权代理在子组件里可以像一个普通变量一样取值赋值。
computed写法，子组件内view的渲染，完全依靠父组件传入的props。如果父组件的props不响应子组件发出的change-letter事件，则子组件对innerLetter的赋值就失效了。
computed写法，子组件的渲染依赖父组件对change-letter的响应，所以当编写强交互组件，或独立打包的外部plugin时，应谨慎使用或尽量不使用。
watch写法更复杂，也更灵活，innerLetter作为一个data属性，可以在子组件内部随意改变其值，view会直接实时同步变化，父组件也通过接收change-letter事件来进行同步。
watch写法可以自定义change-letter的时机，当子组件innerLetter需要响应mousemove等密集事件时，子组件的view层渲染更实时，子组件也可以通过过滤来减少change-letter事件发送的频率。
watch写法，在子组件仅read父组件的值，而不需要对其值进行修改时，完全可以用computed替代，computed性能更好，写法更简单。

ok，两种写法的区别你get到了么？

转载于:https://www.cnblogs.com/yinzhida/p/10673952.html

vue中computed（计算属性）和watch在实现父子组件props同步时的实际区分相关推荐

Vue中computed计算属性和data数据获取的问题
获取到数据(对象.数组),截取一部分显示到页面中,用computed计算属性来实现截取数据然后直接输出到页面. <div class="detailBox"><h ...
Vue中computed(计算属性)、methods、watch的区别
初学vue,阅读api后,发现Vue提供了多种逻辑处理的方法,单纯的方法methods,computed(计算属性)以及watch等,充分理解这三者的区别,才能写出更加健壮的Vue代码. 1.meth ...
vue 中 computed 计算属性的用法
计算属性实质就是一个方法,只不过在使用的时候只把方法名称作为属性使用,不需要加(),而不是当做方法使用. 只有计算属性的方法内部所用到的任何data中的数据发生变化,就会立刻重新计算这个计算属性的值. ...
面试题！vue中的计算属性、方法、侦听属性
1.计算属性详细的内容可跳转至vue 计算属性可以使用计算属性来代替在表达式中进行的复杂运算,以便于能够更方便的维护与复用逻辑. 计算属性是在选项对象中使用 computed 字段来定义. 特点: ...
Vue中computed 计算机属性、getter、setter
计算属性在模板表达式中放入太多逻辑时,会让模板重且难以维护.比如: // 错误示例 <div id="example">{{ message.split('').re ...
五十八、Vue中的计算属性，方法和侦听器
@Author:Runsen @Date:2020/10/15 本篇是水篇,记录前端的学习,争取早日拿到前端offer 计算属性,方法和侦听器所以,对于任何复杂逻辑,你都应当使用计算属性.(官方原话 ...
vue的computed计算属性学习
模板内的表达式是非常便利的,但是它们实际上只用于简单的运算.在模板中放入太多的逻辑会让模板过重且难以维护.这时候需要使用到vue的计算属性computed. 文件目录结构如下:利用vue脚手架创建这 ...
vue 中的计算属性
一.Vue的计算属性是什么? 它的计算属性是 computed 二.计算属性computed的特点有哪些? computed是计算属性.实时响应的.计算属性会依赖于它所使用的data中的属性,只要是依 ...
vue中关于计算属性
首先vue计算属性出现的意义和价值是为了便于data中数据运算而产生的.产生的结果用新的属性来存储,准确的说计算属性的属性值根据data中的数据变化而变化.注:data中的数据不能数据运算.如以下代码 ...

vue中computed（计算属性）和watch在实现父子组件props同步时的实际区分

vue中computed（计算属性）和watch在实现父子组件props同步时的实际区分相关推荐

最新文章

热门文章