问题一：
在vue中，父组件传递给子组件的数据，我们在挂载后打印它，会得到一个空的值也有可能报错（未定义），但是我们却可以直接渲染到页面上。
那么这是什么原因呢？
刚开始组件挂载，数据并没有从父组件传递过来，所以mounted打印不出来
之所也页面能渲染，因为vue是数据驱动，当数据实时变更后，页面发生diff算法，会更新视图，所以才可以渲染
那么我们想在mounted或其他地方使用它，进行一些逻辑，需要怎么办呢？
我们可以通过watch监听它的变化。
解决方案：
export default {
name: "JobDataTable",
props:["Data"],
watch:{
Data (val, oldVal) {
if (val !== oldVal) {
// 写你需要处理的逻辑
}
}
}
}
prop中的Data是我们接收到的父组件发送过来的数据，我们可以监听它的变化，当它从原本的空值变为有数据的值时，我们就可以进行一些操作。（val是新的值，即现在的值，oldVal是变化前的旧值）
问题二：
我们时常需要通过路由传参实现跳转页面并传递某个参数过去。
但是假设我们有个全局搜索框，我们通过搜索把当前搜索值作为参数跳转到某个页面，已经跳到这个页面了，我们再使用全局的搜索框，这是页面肯定不跳转了（已经处在同一个界面了），只是参数会发生相应的改变，这是我们就需要去监听参数的变化
解决方案：
'$route.query': function (newVal, oldVal) {
// 当参数变化时，处理对应的逻辑
}
附加（路由变化）
'$route.path': function (newVal, oldVal) {
// 当路由变化时，处理对应的逻辑
}
问题三：
特殊需求：我们已经通过路由传参跳转到对应的页面，并把当前参数传递过去了，那么我们人为想改变这个参数怎么办？
解决方案：
this.$router.push({
query: {
"Id": ""
}
});
id是你要改变的参数值，后面的是你要赋予的值，这里我把它置为空。
好了，以上就是vue中一些数据变更，我们需要去实时监听的解决办法，希望对大家有帮助。
如有问题，请指出，接受批评。
网友评论