Vue-watch
一、说明
watch: {}用来监听数据的改变，每当被监听的数据改变时，就会执行对应的方法。一般用来监听路由路径的改变。
二、注意
watch中监视的变量发生改变时，执行的方法没有返回值
三、watch监听变量
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 1.字符串拼接案例, 输出结果为【用户名---密码】-->
name:<input type="text" v-model="name">
pwd:<input type="text" v-model="pwd">
result:<input type="text" v-model="result">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name: '',
pwd: '',
result: ''
},
methods: {},
watch: { // 2.监视数据变量的改变，变量值改变时，会调用对应的方法，该方法可以有两个形参，用来接收新值和旧值
name: function (newVal, oldVal) {
this.result = newVal + "---" + this.pwd
},
pwd(newVal, oldVal) {
this.result = this.name + "---" + newVal
}
}
})
</script>
</body>
</html>
三、watch监听路由路径
通过 $route.path 获取当前的路由地址，然后通过watch来监听
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../lib/vue.js"></script>
<script src="../lib/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>当前地址{{curPath}}</h1>
<!-- 6.router-link-->
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<!-- 5.router-view-->
<router-view></router-view>
</div>
<!-- 1.定义组件模板-->
<template id="login">
<h1>登录组件</h1>
</template>
<template id="register">
<h1>注册组件</h1>
</template>
<script>
// 2.创建组件模板对象
var login = { template: '#login' }
var register = { template: '#register' }
// 3.创建路由对象
var router = new VueRouter({
routes: [
{path: '/', redirect: '/login'},
{path: '/login', component: login},
{path: '/register', component: register},
]
})
var vm = new Vue({
el: '#app',
data: {
curPath: '/'
},
methods: {},
router, // 4.注册路由
watch: { // 5.监听路由路径，$route.path
'$route.path': function (newVal, oldVal) {
this.curPath = newVal
}
}
})
</script>
</body>
</html>
更新时间：2019-12-22
来源：CSDN
作者：SevenSongyun
链接：https://blog.csdn.net/SevenSongyun/article/details/103654053