一、说明
watch属性，可以监听data中指定数据的变化，然后可以触发这个watch对象中对应的处理函数。
监听的数据名作为watch对象的属性名，指向对应的处理函数。
处理函数参数：
- 参数一，newVal，新数据。
- 参数二，oldVal，旧数据。
二、watch实现keyup事件
监听输入框的变化进行数据拼接。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id='app'>
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
<input type="text" v-model="fullName">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
firstName:'',
lastName:'',
fullName:''
},
methods: {
},
watch:{
firstName(newVal,oldVal){
console.log('监视到了firstName的变化');
this.fullName = newVal+"-"+this.lastName;
},
lastName(newVal,oldVal){
this.fullName = newVal+"-"+this.firstName;
}
}
});
</script>
</body>
</html>
虽然说上面用keyup事件监听触发methods函数处理使输入框变化也可以实现。
watch有些优势是keyup实现不了的，这里监视的是文本框的数据，但如果是要监视看不见摸不着的、虚拟的，无法使用keyup，例如路由。
三、watch监听路由地址的改变
想要监听路由的改变，即<router-view></router-view>的改变，但它身上没有什么事件，则只能使用watch监听路由地址的改变。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id='app'>
<router-link to='/login'>登陆</router-link>
<router-link to='/register'>注册</router-link>
<router-view></router-view>
</div>
<script>
var login = {
template: '<h1>登陆组件</h1>'
};
var register = {
template: '<h1>注册组件</h1>'
};
var router = new VueRouter({
routes: [{
path: '/',
redirect: '/login'
},
{
path: '/login',
component: login
}, {
path: '/register',
component: register
}
]
});
var vm = new Vue({
el: "#app",
data: {
},
methods: {
},
watch: {
'$route.path'(newVal, oldVal) {
if (newVal == '/login') {
console.log('欢迎进入登陆页面');
} else if (newVal == '/register') {
console.log('欢迎进入注册页面');
}
}
},
router,
});
</script>
</body>
</html>
