|
这是关于VUE的watch侦听器的学习笔记，这里面介绍了关于VUE的watch侦听器的一些使用方法和注意事项。
侦听属性watch：
1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
2.监视的属性必须存在，才能进行监视，否则就监听不了，在浏览器的控制台上就会报错
3.监视的两种写法：
(1).new Vue时传入watch配置
(2).通过vm.$watch()
深度监听：
1.Vue中的watch默认不监测对象内部值的改变（一层），deep一般默认为false。
2.配置deep:true可以监测对象内部值改变（多层）。
3.当配置为deep:true,.Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
4.使用watch时根据数据的具体结构，决定是否采用深度监视。
computed和watch之间的区别：
1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
这两个的使用，我们要根据具体情况而定。
两个重要的小原则：
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。
案例代码1：主要是介绍了watch的基本使用方法
案例代码2：主要介绍了深度侦听
案例代码3：主要是对比计算属性和侦听属性
案例代码1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>监视天气</title>
<script type="text/javascript" src="../vue_js/vue.js"></script>
</head>
<body>
<div id="wd">
<h1>武汉的今日真的很{{weather}}</h1>
<button @click = "xiugai">切换按钮</button>
</div>
<script>
Vue.config.productionTip = false
const watchExampleVM = new Vue({
el:"#wd",
data:{
isWeather:true
},
computed:{
weather(){
return this.isWeather?'很热':'很冷';
}
},
methods: {
xiugai(){
this.isWeather = !this.isWeather;
}
},
watch:{
isWeather(newValue,oldValue){
console.log("天气变化了"+newValue+","+oldValue);
}
}
});
</script>
</body>
</html>
案例代码2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>深度监视天气的变化</title>
<script type="text/javascript" src="../vue_js/vue.js"></script>
</head>
<body>
<div id="root1">
<h1>武汉的天气是真的{{weatherOfHotOrCold}}</h1>
<button @click="weacherListener">点击按钮进行切换变器，并且监视天气的变化</button>
<h1>我们在一个伟大的国家里，这个国家是{{country.Asia.CH}}</h1>
<button @click="showGreatCountry">我爱中国</button>
</div>
<script>
Vue.config.productionTip = false
const weatherVM = new Vue({
el: '#root1',
data: {
isHotOrCold: true,
country: {
Asia: {
CH: 'China'
}
}
},
computed: {
weatherOfHotOrCold() {
return this.isHotOrCold ? '炎热' : '很冷';
}
},
methods: {
weacherListener() {
this.isHotOrCold = !this.isHotOrCold;
},
showGreatCountry() {
this.country.Asia.CH = '最大的国家---->中国';
}
},
watch: {
isHotOrCold: {
handler(newValue, oldValue) {
console.log(newValue + "---" + oldValue);
}
},
country: {
deep: true,
handler() {
alert(this.country.Asia.CH + "是世界上最伟大的国家");
}
}
}
})
</script>
</body>
</html>
案例代码3：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>姓名案例的watch实现</title>
<script type="text/javascript" src="../vue_js/vue.js"></script>
</head>
<body>
<div id="demo1">
<h1>我们这里使用计算属性实现姓名案例</h1>
姓氏:<input type="text" v-model="surname"></br>
名字:<input type="text" v-model="name"></br>
完整的名字:<span>{{fullName}}</span>
<h1>我们这里使用watch侦听实现姓名案例,全名那里改变的事件比前面延迟一秒钟</h1>
姓氏:<input type="text" v-model="watch_surname"></br>
名字:<input type="text" v-model="watch_name"></br>
完整的名字:<span>{{watch_fullName}}</span>
</div>
<script>
Vue.config.productionTip = false
const vm = new Vue({
el: '#demo1',
data: {
surname: '张',
name: '三',
watch_surname: '李',
watch_name: '四',
watch_fullName: '李-四'
},
computed: {
fullName: {
get() {
return this.surname + "-" + this.name;
}
}
},
watch: {
'watch_surname': {
handler(value1) {
console.log(value1);
this.watch_fullName = value1 + "-" + this.name;
}
},
'watch_name': {
handler(value2) {
setTimeout(() => {
console.log(this);
this.watch_fullName = this.watch_surname + "-" + value2;
}, 1000);
}
}
}
});
</script>
</body>
</html>
|