vue2.0用 watch 观察 prop 变化(不触发)
时间: 2023-09-06 08:04:58 浏览: 89
在Vue 2.0中,我们可以使用watch属性来观察prop的变化,但是不触发watch的回调函数。这是因为Vue默认会在父组件传递给子组件的prop发生变化时,自动更新子组件的数据和视图。
如果我们希望监听prop的变化,但不触发watch回调函数,我们可以使用immediate修饰符。通过在watch属性中添加immediate: true,可以让Vue在初始化组件时不触发watch回调函数。代码如下所示:
```javascript
props: {
name: {
type: String,
default: ''
}
},
watch: {
name: {
immediate: true,
handler(newValue, oldValue) {
// 在prop变化时不触发watch回调函数,但可以获取到最新的prop值和旧值
console.log('Prop变化,新值为:', newValue, '旧值为:', oldValue)
}
}
}
```
在这个例子中,我们定义了一个名为name的prop,并在watch属性中使用了immediate: true。当父组件传递给子组件的name属性发生变化时,Vue会自动更新子组件的数据和视图。但是由于设置了immediate为true,watch的回调函数不会在初始化组件时被触发。只有当prop的值再次发生变化时,watch回调函数才会被触发,并且可以获取到最新的值和旧值。
通过使用immediate修饰符,我们可以灵活地控制watch的触发时机,使其不仅能够监听prop的变化,还可以在需要的时候进行相应的处理。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)