vue深究第一弹：computed与watch的异同
最近在开发vue的过程中，不断用到了计算属性（computed）和观察者(watch)，从逻辑上感觉它们很相似，但是尝试混用它们的时候，又出现了一些问题，那么它们到底有什么异同呢？
1. computed VS data
问计算属性与观察者异同这个问题之前，首先要明确为啥会有计算属性，即computed vs data。在vue中，数据有时有被处理一下再展示出来的需求，例如：
var vm = new Vue({
el: '#example',
data: {
message: 'Hello',
name: 'tomczhang'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
},
getWelcome: function () {
return this.message + ' ' + this.name
}
}
})
不管是reversedMessage还是getWelcome方法，单纯写在data中都显得很不优雅，所以，建立一个computed动态的去处理它们是很有必要的。
2. watch VS data
既然vue中数据和view是双向绑定的，那当用户输入文本的时候，vue就能监听到视图进行了变动，并将变动的数据传递给我们（具体的变动原理见此）。观察者就是系统监听到视图变动后调用的方法，参数分别是老的值和新的值。我们利用watch就可以改变data值。例如：
var vm = new Vue({
el: '#demo',
watch: {
userInput: function (oldValue, newValue) {
this.message = newValue;
}
}
})
当然我们针对例子1中的代码也可以用观察者来解决，这也是我写这篇文章的主因，像这样：
var vm = new Vue({
el: '#example',
data: {
message: 'Hello',
name: 'tomczhang',
welcome: ''
},
watch: {
welcome: function () {
this.welcome = this.message + ' ' + this.name；
}
}
})
3. computed vs watch
BB了那么多，马上进入我们的正题。
相同： computed和watch都起到监听/依赖一个数据，并进行处理的作用
异同：它们其实都是vue对监听器的实现，只不过computed主要用于对同步数据的简单处理，watch则主要用于数据输入时异步操作或者开销较大的情况。能用computed的时候优先用computed，避免了多个数据影响其中某个数据时多次调用watch的尴尬情况。对于视图层的改变则优先使用watch。
例如这样：
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
相应的computed版本
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
参考：
1）计算属性和观察者：https://cn.vuejs.org/v2/guide...
原文地址：https://segmentfault.com/a/1190000012656519
最新文章
- mysql启动失败：不能创建pid文件
- requirejs：模块加载(require)及定义(define)时的路径小结
- android 单元测试
- tensorflow资料补充（很棒）
- [译]Mongoose指南 - Connection
- Uva 548 Tree
- DBSet Class（EF基础系列11）
- Android布局居中的几种做法
- Matlab生成.dll文件在.NET中加载失败与平台的关系及解决方案
- HDU 5874 Friends and Enemies 【构造】 (2016 ACM/ICPC Asia Regional Dalian Online)
- SDL显示内存中的图像
- php 模拟POST提交的2种方法
- [转]makefile文件的编写规则及实例
- Chapter 1 First Sight——7
- 非常好用的弹出层 layer，常用功能demo，快速上手！
- nodejs-2.httpfuwu
- Day 15 模块
- CentOS安装glibc异常Protected multilib versions
- JavaScript 下拉框 左边添加至右边
- JMeter http(s)测试脚本录制器的使用