-
computed
-
当页面中有某些数据 依赖 其他数据 进行变动的时候,可以使用计算属性。
-
需要注意的是,就算在 data中没有直接声明 出要计算的变量,也可以直接在computed中写入。
-
计算属性默认只有getter,可以在需要的时候自己设定setter:
-
使用场景:computed擅于处理:一个数据受多个数据影响
-
即在这多个依赖数据中,任何一个改变都会导致 受影响的数据的改变
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
- watch
- data中没有相应的属性的话,是不能watch
- watch:类似于监听机制+事件机制:一个数据影响多个数据。
- 适合监控场景,某【一个】变量改变时需要做什么操作;
- 在数据变化的同时进行异步操作或者是比较大的开销,
- watch为一个对象,键是需要观察的表达式,
值是对应回调函数。值也可以是方法名,或者包含选项的对象。
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
},
vue组件props,methods,data,computed,watch的加载顺序
props - > methods - > data - > computed - > watch
父组件向子组件通过props传值,props是一个只读属性,
如果要改变props的值,需要在data中进行定义,
所以props在前,data在后
computed计算属性要使用data里面的数据,
所以data在前,computed在后
vue的props,data,computed的加载顺序的影响
1.因为加载顺序: props->methods->data->computed->watch
2.computed与watch只能作为变化监听,千万不能做初始化!!!
3.所有的init方法必须直接调用数据库或者直接this.$store.getters读取内存而不是通过computed去获取