计算属性(computed)

定义

要用的属性不存在,要通过已有属性计算得出

原理

底层借助了Object.defineproperty方法提供的gettersetter
get函数什么时候执行?
(1)初次读取时
(2)当依赖的数据发生改变时会被再次调用

优势

与methods实现相比,内部有缓存机制(复用),效率更高,调试更方便

备注

(1)计算属性最终会出现在vm上,直接读取使用即可
(2)如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变

计算属性实现姓名案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="root">
姓:<input type="text" v-model="firstName"> <br/><br/>
名:<input type="text" v-model="lastName"> <br/><br/>
全名:<span>{{fullName}}</span> <br/><br/>
</div>
······
const vm = new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三'
},
computed:{
fullName(){
return this.firstName + this.lastName
}
}
})

监视属性(watch)

监视的两种写法

(1)new Vue时传入watch配置(常用)
(2)通过vm.$watch监视

注意事项

(1)当被监视的属性变化时, 回调函数自动调用, 进行相关操作
(2)监视的属性必须存在,才能进行监视

监视属性实现姓名案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="root">
姓:<input type="text" v-model="firstName"> <br/><br/>
名:<input type="text" v-model="lastName"> <br/><br/>
全名:<span>{{fullName}}</span> <br/><br/>
</div>
······
const vm = new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三',
fullName:'张 三'
},
watch:{
firstName(val){
this.fullName = val + ' ' + this.lastName
}
lastName(val){
this.fullName = this.firstName + ' ' + val
}
}
})

computed和watch之间的区别

(1)computed能完成的功能,watch都可以完成。
(2)watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作。

两个重要的小原则

(1)所被Vue管理的函数,最好写成普通函数,这样this的指向才是vm 或 组件实例对象。
(2)所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的回调函数),最好写成箭头函数,这样this的指向才是vm或组件实例对象。