版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
1、vue侦听器的作用
监听data里的数据的变化情况,watch在初始化绑定的时候不会执行，等到改变之后才会去侦听计算; 如果在侦听器中增加immediate:true属性,初始化绑定的时候就会执行。
2、实例代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02_侦听器watch</title>
</head>
<body>
<div id="app">
姓：<input type="text" v-model.lazy.trim="first_name"><br>
名：<input type="text" v-model.lazy.trim="last_name"><br>
全名：<span>{{fullname}}</span>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
first_name: '李',
last_name: '四',
},
computed: {
fullname(){
return this.first_name + this.last_name;
}
},
// 监听data里的数据的变化情况,watch在初始化绑定的时候不会执行，等到改变之后才会去侦听计算; 如果在侦听器中增加immediate:true属性,初始化绑定的时候就会执行
watch: {
immediate: true, //侦听器初始化就执行
first_name: {
handler(newVal, oldVal){
if(newVal != '李三'){
return this.first_name = '李';
}
return this.first_name = newVal;
}
},
last_name: {
handler(newVal, oldVal){
if(newVal != '四五'){
return this.last_name = '四';
}
return this.last_name = newVal;
}
},
}
});
</script>
</html>