vue中的watch实际上是用来监听vue实例中的数据变化。
监听String
<template>
<div @click="stringClick">{
{msg}}</div>
</template>
<script>
export default {
name: "jianting",
data() {
return {
msg: "1223"
};
},
watch: {
msg: function(newVal, oldVal) {
console.log("newVal:", newVal, "oldVal:", oldVal) // 新值，旧值
}
},
methods: {
stringClick() {
this.msg = Math.random() * 100;
}
}
};
</script>
监听对象
<template>
<div @click="click">
<div>
姓名：{
{obj.name}}，
年龄：{
{obj.age}}，
他的儿女有：
</div>
<div
v-for="(item, index) in obj.children"
:key="index">
姓名：{
{item.name}}，
年龄：{
{item.age}}
</div>
</div>
</template>
<script>
export default {
name: "jianting",
data() {
return {
obj: {
name: "Tony",
age: 50,
children: [
{
name: "小明",
age: 12
},
{
name: "小花",
age: 5
}
]
}
};
},
watch: {
obj: {
handler: function(newVal, oldVal) {
console.log("newVal:", newVal);
console.log("oldVal:", oldVal);
},
deep: true, // 深度监听
immediate: true // 立即执行
},
// 监听对象中的某个值
"obj.name": function(newVal, oldVal) {
console.log("newVal obj.name:", newVal);
console.log("oldVal obj.name:", oldVal);
}
},
methods: {
click() {
this.obj.name = "未知";
}
}
};
</script>
watch监听对象的时候，需要加deep:true，只有这样才能深入底层去实时监听，没有加的话，对象是监听不到变化的,添加immediate时会在侦听开始之后被立即调用
监听路由
通过watch监听，当路由发生变化时执行
方法一监听以及路由
监听一级路由：路由组件的渲染区域为router-view，
作为顶层出口，它将匹配到的路由组件渲染在该区域中，
路由组件渲染默认的方式是销毁 - 创建，
因此$watch是监听不到一级路由的变化的。
所以，要想使用$router监听一级路由，需要让组件成为复用组件，
也就是使用keep-alive包裹router-view。
<keep-alive>
<router-view />
</keep-alive>
watch: {
$route: {
handler: function(to, from) {
console.log(to，'新'，from, '旧');
if(from && (from.name === 'adoptSelect')){
this.active = 2
}
},
// 深度观察监听
deep: true,
immediate: true
}
}
方法二 监听子路由：
需要在有子路由的情况下，才能在当前组件监听到子组件的路由变化，直接使用下面的方式即可。
watch：{
$route(to, from){
console.log('去哪里',to, '从哪里来',from)
console.log(to.path)
}
}
或者
watch: {
'$route.path': function (newVal, oldVal) {
if (newVal === '/login') {
console.log('欢迎进入登录页面');
}
if (newVal === '/register') {
console.log('欢迎进入注册页面');
}
}
}
方法三
watch: {
'$route' : 'getPath' // 获取路径
},
methods: {
getPath(){
console.log( this .$route.path);
}
}
key-用来阻止“复用”的
Vue 为我们提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的 key 属性即可(Vue文档原话)
<router-view :key= "key" ></router-view>
computed: { //计算属性
key() {
return this .$route.name !== undefined
?
this .$route.name + new Date()
:
this .$route + new Date()
}
}
使用computed属性和Date()可以保证每一次的key都是不同的，
这样就可以如愿刷新数据了。
全局监听路由
(通过vue-router的钩子函数
beforeRouteEnter
/beforeRouteUpdate
/beforeRouteLeave)
一般会在router里面加跳转验证才会用到这个方法
方法一 监听路由导航守卫
watch:{
$route(to,from){
if (to.path == '/' || to.path == '/Prisoner' || to.path == '/Goods' || to.path == '/Time' || to.path == '/Mine' ){
/**
* $store来自Store对象
* dispatch 向 actions 发起请求
*/
this .$store.dispatch( 'showTabBar' );
} else {
this .$store.dispatch( 'hideTabBar' );
}
}
},
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当钩子执行前，组件实例还没被创建
if(from.name !== 'adoptDetail'){
next({
path:'/adopt'
})
}else{
next()
}
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
},
方法二：
在app.vue的create中加入下面代码，然后进行判断
this.$router.beforeEach((to ,from,next) =>{
console.log(to);
next();
})
等等方法