文章目录
- 监视属性
- 深度监视
- computed VS watch
- computed与watch区别
监视属性
监视属性watch:
1.当被监视的属性变化时,回调函数自动调用,进行相关操作
2.监视的属性必须存在,才能进行监视
3.监视的两种写法:
- new Vue时传入watch属性
- 通过app.$watch监视
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>监视</title>
<script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
<!--第一种写法-->
<h2>今天天气很{{isHot ? '炎热':'凉爽'}}</h2>
<!--第二种写法:通过计算属性-->
<h2>今天天气很{{info}}</h2>
<!--绑定methods的方法-->
<button @click="change">点击切换天气</button>
<!--离谱写法:适用于简单测试-->
<button @click="isHot = !isHot">点击切换天气</button>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
isHot: true
},
methods: {
change: function (){
this.isHot = !this.isHot
}
},
computed: {
info: {
get: function (){
if (this.isHot==true){
return '炎热'
}else{
return '凉爽'
}
},
set: function (){
this.isHot = !this.isHot
}
}
},
watch: {
//监视谁
isHot: {
//什么时候调用?当isHot改变
handler(newValue,oldValue) {
console.log('isHot被修改惹',newValue,oldValue)
},
//初始化时让handler调用一下
immediate: true
}
}
})
//可以替换上面的watch属性
app.$watch('isHot',{
//什么时候调用?当isHot改变
handler(newValue,oldValue) {
console.log('isHot被修改惹',newValue,oldValue)
},
//初始化时让handler调用一下
immediate: true
})
</script>
</body>
</html>
深度监视
深度监视:
1.vue中的watch默认不监测对象内部值的改变(一层)
2.配置deep:true可以检测对象内部值改变(多层次)
备注:
1.vue自身可以监测对象内部值的改变,但vue提供的watch默认不可以
2.使用watch时根据数据的具体结构,决定是否采用深度监视
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>监视简写形式</title>
<script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
<h2>今天天气很{{isHot ? '炎热':'凉爽'}}</h2>
<button @click="change">点击切换天气</button>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
isHot: true,
numbers: {
a: 1,
b: 2
}
},
methods: {
change: function (){
this.isHot = !this.isHot
}
},
computed: {
info: {
get: function (){
if (this.isHot==true){
return '炎热'
}else{
return '凉爽'
}
},
set: function (){
this.isHot = !this.isHot
}
}
},
watch: {
//完整写法
// isHot: {
// // deep: true,深度监视
// handler(newValue,oldValue) {
// console.log('isHot被修改惹',newValue,oldValue)
// },
// //初始化时让handler调用一下
// // immediate: true
// },
//简写
isHot(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
}
})
//完整写法
app.$watch('isHot',{
//什么时候调用?当isHot改变
handler(newValue,oldValue) {
console.log('isHot被修改惹',newValue,oldValue)
},
//初始化时让handler调用一下
immediate: true
})
//不允许写箭头函数,会导致this指向的不是app,
// vue管理的函数(methods中的,computed,watch中的)都得写普通函数,
// 不能写es6里的箭头函数
app.$watch('isHot',function(newValue,oldValue) {
console.log('isHot被修改惹',newValue,oldValue)
})
</script>
</body>
</html>
监视效果:
computed VS watch
计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch
选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的
computed与watch区别
- computed能完成的功能,watch都可以完成
- watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作
注意:
- 所被Vue管理的函数,最好写成普通函数,这样this的指向才是vue实例对象或组件实例对象
- 所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等),最好写成箭头函数,这样this的指向才是vue的实例或组件的实例对象