computed 计算属性
定义:
需要通过已有属性计算得来
要用的属性不存在,
原理:底层借助了 0bjcet.defineproperty()方法提供的getter和 setter
get 函数什么时候执行?
a.初次读取时会执行一次
当依赖的数据发生改变时会被再次调用
b.优势:与 methods 实现相比,
效率更高,
调试方便
内部有缓存机制(复用)
备注:
计算属性最终会出现在 vm 上,直接读取使用即可
a.如果计算属性要被修改,那必须写 set 函数去响应修改,且 set 中要引起计算时依赖的数据发生改变
b.如果计算属性确定不考虑修改,可以使用计算属性的简写形式
watch 监视属性
1.当被监视的属性变化时,回调函数自动调用,进行相关操作
2.监视的属性必须存在,才能进行监视,既可以监视 data,也可以监视计算属性
3.配置项属性 immediate:false,改为 true,则初始化时调用一次 handler(newValue,oldValue)
4.监视有两种写法
a.创建 Vue 时传入 watch:{}配置
b.通过 vm.$watch()监视
深度侦听
1.Vue 中的watch默认不监测对象内部值的改变(一层)
2.在 watch中配置deep:true,可以监测对象内部值的改变(多层)
注意:
Vue自身可以监测对象内部值的改变,但Vue 提供的 watch默认不可以
2.使用watch 时根据监视数据的具体结构,决定是否采用深度监视
计算属性 VS 侦听属性
computed和watch 之间的区别
1.computed 能完成的功能,watch 都可以完成。watch能完成的功能,computed不一定能完成,例如 watch 可以进行异步操作,computed做不到。
两个重要的小原则
所有被 vue 管理的函数,最好写成普通函数,这样 this的指向才是 vm或 组件实例对
象
所有不被 vue 所管理的函数
(定时器的回调函数、ajax 的回调函数等,Promise 的回调函数),最好写成箭头函数,这样 this的指向才是vm或 组件实例对象。
计算属性和侦听属性的测试代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<h1>今天的天气{{str}}</h1>
<h2>{{userName}}</h2>
<h3>{{obj.id}}</h3>
<button @click="func()">点击切换天气</button>
</div>
</div>
</body>
<script src="../vue.js"></script>
<script>
Vue.config.productionTip = false;
var vm = new Vue({
el:"#app",
data() {
return {
bool:true,
userName:"",
obj:{
id:99,
}
}
},
methods: {
func(){
this.bool = !this.bool;
}
},
computed:{
str(){
return this.bool?"炎热":"凉爽"
}
},
watch:{
obj:{
immediate:false,
deep:true,
handler(newVlaue,oldValue){
console.log("--------obj-------");
console.log(newVlaue);
console.log(oldValue);
}
},
bool:{
immediate:true,
handler(newVlaue,oldValue){
console.log(newVlaue);
console.log(oldValue);
if(newVlaue==true){
this.userName = "张三";
this.obj.id = 100;
}else{
this.userName = "李四";
this.obj.id = 99;
}
}
},
str(newVlaue,oldValue){
console.log(newVlaue);
console.log(oldValue);
console.log(this);
}
},
directives:{
}
})
// vm.$watch("userName",{
// immediate:false,
// handler(newVlaue,oldValue){
// console.log("--------userName---------");
// console.log(newVlaue);
// console.log(oldValue);
// console.log(this);
// }
// })
vm.$watch("userName",function(newVlaue,oldValue){
console.log("--------userName---------");
console.log(newVlaue);
console.log(oldValue);
console.log(this);
console.log(this.bool);
})
</script>
</html>