1. 计算属性 computed
computed: 以类似于定义一个“属性”的形式，监听data中，其他属性的变化， 具备缓存机制
export default {
name: 'computed',
computed: { //计算属性, data的属性变化,都会关联到这个方法，只要有被引用
fullName: function() {
return this.firstName + this.lastName;
},
//等价于上面fullName方法，计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter
//
// fullName: {
// get: function() {
// return this.firstName + '|' + this.lastName;
// },
// set: function(value) {
// var names = value.split('|')
// this.firstName = names[0]
// this.lastName = names[names.length - 1]
// }
// }
},
data() {
return {
firstName: '',
lastName: '',
allName: ''
}
},
}
2. 侦听器 watch
watch: 对data中的属性进行观察监听其数据变动
created() {
},
// 侦听属性:观察和响应 Vue 实例上的数据变动
watch: {
firstName: function(value) {
console.log('firstName:' + value);
this.allName = value + this.lastName;
},
lastName: function(value) {
console.log('lastName:' + value);
this.allName = this.firstName + value;
}
},
3. 定义方法函数 methods
methods： vue支持在插值表达式中使用函数
methods: {
fullNameEvent: function() {
return this.firstName + this.lastName;
}
}
4. 区别
computed和watch的差异
1.computed里属性名是自定义的，它可以监听一个或多个它所依赖的数据项；而watch一次只能监听一个属性，这个属性函数接收两个参数，一个是新值一个是旧值。
2.computed里自定义的属性不能与data里的属性重复，否则会报错；而watch里监听的属性必须是已存在的，其要么是data里的属性，要么是computed里计算出来的属性。
3.watch是允许异步操作的（访问一个API），并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。
computed和methods的差异
1.computed是响应式的，methods并非响应式。。
2.调用方式不一样，computed定义的成员像属性一样访问，methods定义的成员必须以函数形式调用。
3.computed是带缓存的，只有其引用的响应式属性发生改变时才会重新计算，而methods里的函数在每次调用时都要执行。
3.computed中的成员可以只定义一个函数作为只读属性，也可以定义get/set变成可读写属性，这点是methods中的成员做不到的。
