1. 计算属性
在
computed属性对象中定义计算属性的方法，在页面中使用{{方法名}}来显示计算的结果
- 定义：要用的属性不存在，要通过已有属性计算得来。
- 原理：底层借助了
Objcet.defineproperty方法提供的getter和setter。 - get函数什么时候执行？
- 初次读取时会执行一次。
- 当依赖的数据发生改变时会被再次调用。
- 优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
- 备注：
- 计算属性最终会出现在vm上，直接读取使用即可。
- 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
// 完整写法
fullName:{
get(){
console.log('get被调用了')
return this.firstName + '-' + this.lastName
},
set(value){
console.log('set',value)
const arr = value.split('-')
this.firstName = arr[0]
this.lastName = arr[1]
}
}
//简写
fullName(){
console.log('get被调用了')
return this.firstName + '-' + this.lastName
}
2 监视属性
- 当被监视的属性变化时, 回调函数自动调用, 进行相关操作
- 监视的属性必须存在，才能进行监视
- Vue中通过 watch 属性或者 $watch 进行属性监视
vm.$watch('isHot', {
immediate: true,
handler(newValue, oldValue){
console.log('天气改变了',newValue, oldValue)
}
})
watch里面的isHot其实是key，应该写为 'isHot' ,不加单引号是简写形式
watch:{
isHot:{
immediate: true,
handler(newValue, oldValue){
console.log('天气改变了',newValue, oldValue)
}
}
}
- watch中
immediate和handler函数的含义——
- immediate 为 true 时 在初始化时调用 handler，默认为false
- 当被监视的数据发生改变时，调用handler函数
- 深度监视
- 含义： 监视多级结构中某个属性的变化
- Vue中的 watch 默认不监测对象内部值的改变（一层）。
- 可以使用 'numbers.a'这种方法进行监视，但当多级结构中有多个属性需要监视时会比较麻烦
- 配置
deep:true可以监测对象内部值改变（多层）。
data:{
numbers: {
a: 1,
b: 2
}
}
watch:{
// 监视多级结构中单个属性的变化
'numbers.a':{
handler(newValue, oldValue){
console.log(newValue, oldValue)
}
}
// 监视多级结构中所有属性的变化
numbers:{
deep: true,
handler(newValue, oldValue){
console.log('天气改变了')
}
}
}
简写形式(当配置项里面不需要immediate、deep，只有handler时，可以简写)
//简写
isHot(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue,this)
}
vm.$watch('isHot',function(newValue, oldValue){
console.log('天气改变了',newValue, oldValue)
}
)
3. 计算属性与监听属性的区别
-
计算属性变量在computed中定义，监视属性监听的是已经在 data 中定义的变量, 当该变量变化时，会触发 watch 中的方法.
-
computed 具有缓存功能，可以监听对象某个具体属性。
-
watch可以进行深度监听，监听对象的变化。
-
计算属性是声明式的描述一个值依赖了其他值，依赖的值改变后重新计算结果更新DOM。监视属性的是命令式的定义变量，当定义的值发生变化时，执行相对应的函数。
-
computed能完成的功能，watch都可以完成。watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作（比如当firstName变化时，fullName等1秒钟再变化）。
4. 注意事项
- 所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
- 所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。
5. 例子
<div id="demo">
姓：<input type="text" placeholder="First Name" v-model="firstName"><br>
名：<input type="text" placeholder="Last Name" v-model="lastName"><br>
姓名1（单向）：<input type="text" placeholder="Full Name1" v-model="fullName1"><br>
姓名2（单向）：<input type="text" placeholder="Full Name2" v-model="fullName2"><br>
姓名3（双向）：<input type="text" placeholder="Full Name3" v-model="fullName3"><br>
<p>{{fullName1}}</p>
<p>{{fullName1}}</p>
<p>{{fullName1}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
const vm = new Vue({
el: '#demo',
data: {
firstName: 'A',
lastName: 'B',
fullName2: 'A B'
},
computed: {
// 什么时候执行：初始化显示 / 相关的data属性数据发生改变
// 做什么的: 计算并返回当前属性的值
fullName1() { //计算属性中的一个方法，方法的返回值作为属性 （回调函数）
console.log('fullName1()') // 必然会掉用
return this.firstName + ' ' + this.lastName;
},
fullName3: { //不是函数是一个对象，里面有两个方法
get() {
// 回调函数 ： 1. 你定义的 2. 你没有调用 3. 但他最终执行了
// 1. 什么时候调用？ 2. 用来做什么
// 回调函数 当需要读取当前属性值时回调 根据相关的数据计算并返回当前属性的值
return this.firstName + ' ' + this.lastName;
},
set(value) {
// 回调函数 监视当前属性值的变化 当属性值发生改变时回调 更新相关的属性数据
const names = value.split(' ');
this.firstName = names[0];
this.lastName = names[1];
}
}
},
watch: { //配置监视
firstName: function(value){ // firstName 发生了变化
console.log(this); //就是vm对象
this.fullName2 = value + ' ' + this.lastName;
}
}
});
vm.$watch('lastName', function(value) {
//更新fullName2
this.fullName2 = this.firstName + ' ' + value;
})
</script>
上一篇：
下一篇：
