计算属性 computed
-
定义:要用的属性不存在,需要通过已有属性计算得来
-
原理:底层借助了objcet.defineproperty()方法提供的 getter和setter
-
get函数什么时候执行?
a、初次读取时会执行一次
b、当依赖的数据发生改变时会被再次调用 -
优势:与methods 实现相比,内部有缓存机制(复用),效率更高,调试方便
-
备注:
a、计算属性最终会出现在vm上,直接读取使用即可
b、如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变
c、如果计算属性确定不考虑修改,可以使用计算属性的简写形式
<template>
<div class="hello">
<h1>{{ number }}</h1>
</div>
</template>
<script>
export default {
name: 'ComputedAndWatch',
data(){
return {
num:1
}
},
computed:{
//完整写法
// number:{
// get(){
// return this.num+10
// },
// set(value){
// this.num = value
// }
// },
// 简写
number(){
return this.num*10
}
}
}
</script>
侦听属性 watch
- 当被监视的属性变化时,回调函数自动调用,进行相关操作
- 监视的属性必须存在,才能进行监视,既可以监视data,也可以监视计算属性
- 配置项属性
immediate:false,改为true,则初始化时调用一次handler(newValue,oldValue) - 4.监视有两种写法
a.创建Vue时传入watch: {}配置
b.通过vm.$watch()监视
<template>
<div class="hello">
<h1>{{ number }}</h1>
<input type="button" @click="changeNum" value="增加">
</div>
</template>
<script>
export default {
name: 'ComputedAndWatch',
data(){
return {
num:1
}
},
methods:{
changeNum(){
this.num += 1;
}
},
watch:{
// 完整写法
// num:{
// immediate:true,
// handler(newValue,oldValue){
// console.log(newValue,oldValue);
// }
// }
// 简写
num(newValue,oldValue){
console.log(newValue,oldValue);
}
}
}
</script>
深度侦听
- Vue中的watch默认不监测对象内部值的改变(一层)
- 在watch中配置deep:true可以监测对象内部值的改变(多层)
- Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以
- 使用watch 时根据监视数据的具体结构,决定是否采用深度监视
watch:{
// 完整写法
num:{
immediate:true, // 初始化时调用一次
deep:true, // 开启深度监视
handler(newValue,oldValue){
console.log(newValue,oldValue);
}
}
}
计算属性VS侦听属性
computed和watch之间的区别
- computed能完成的功能,watch都可以完成
- watch 能完成的功能,computed不一定能完成,例如watch可以进行异步操作
两个重要的小原则
- 所有被Vue管理的函数,最好写成普通函数,这样 this的指向才是vm或组件实例对象
- 所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的回调函数),最好写成箭头函数,这样this的指向才是vm或组件实例对象