监听器和计算属性
监听器:
作用:
监听vue实例上的数据变化
怎么用
new Vue({
watch:{
要监听的变量(变化后的值,变化之前的值){
// 监听的变量一发生改变就会执行这里的方法
}
}
})
监听路由的变化
new Vue({
watch:{
$route(变化后的值,变化之前的值){
// 路由一发生改变就会执行这里的方法
}
}
})
- 可以更改标题,根据不同的路由显示不同的标题
- 解决bug,当我们路由参数变化的时候,界面不会重新初始化的bug
监听对象
默认监听的是对象的引用
当对象属性变化的时候,没有检测到对象的变化,如何解决
- 对对象进行深拷贝
- 监听对象的属性的变化
- 开启深度监听
new Vue({
watch:{
// 监听对象的属性的变化
"obj.name"(变化后的值,变化之前的值){
// 对象name一发生改变就会执行这里的方法
},
//深度监听
obj:{
handler(){
对象一发生改变就会执行这里的方法
},
deep:true
}
}
})
计算属性
当某个属性的值,是依赖于别的属性生成,这个属性就可以设置为计算属性。
怎么声明:
new Vue({
computed:{
// 声明的时候,声名成了函数的形式
fullName(){
// 当他依赖的属性变化的时候,会重新计算
return 返回值就是计算的属性的值
}
}
})
用的时候当做普通的属性使用即可
计算属性的赋值
计算属性绝大多数是不需要的赋值的
new Vue({
computed:{
// 声明的时候,声名成了函数的形式
fullName:{
get(){
// 获取数据的时候会执行get
return 值
},
set(value){
// 设置数据的时候会执行set
}
}
}
})
总结:
- 他是依赖于其他属性的,是其它属性的一个派生。
- 声明的时候声明成函数的,但是使用的时候当做属性使用的
- 计算属性会缓存,只有它依赖的属性变化的时候才会重新计算
计算属性、函数和监听器
- 计算属性: 本质上是一个属性,它别的属性的一个派生。 计算属性会进行缓存,只有它依赖的属性发生的时候才会重新计算(不能写异步操作的)
- 函数: 一般是写业务逻辑的地方
- 监听器: 当我们需要在某写属性变化的时候做一些业务处理的时候,需要用到监听器。(可以添加异步操作)