watch里面的deep和immediate作用及说明
更新时间：2024年08月07日 10:24:24 作者：扛把子小雪
这篇文章主要介绍了watch里面的deep和immediate作用及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
watch里面的deep和immediate作用
先看下问题
faterVisible:这个是父组件中传值到子组件中的监听父组件的打开状态的值
首次父组件打开时，没有加immediate时，不会走对应的方法，第二次打开时才会执行
于是，我加了immediate。。。这样问题就解决了呢
watch属性deep和immediate区别
deep：默认值是 false，代表是否深度监听。immediate：true代表如果在 wacth 里声明了之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行。
watch中的immediate、handler和deep属性
immediate属性
使用watch时有一个特点，就是当值第一次绑定时，不会执行监听函数，只有值发生改变时才会执行。
如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。
handler属性
watch中需要具体执行的方法
deep属性
data（） {
return {
obj: {
'name': "超级无敌暴龙战士",
'age': 999
},
}
},
watch: {
obj: {
// 执行方法
handler(oldValue,newVal) {
console.log(oldValue)
console.log(newValue)
},
deep: true, // 深度监听
immediate: true // 第一次改变就执行
}
// 如果只需要监听对象中的一个属性值，则可以做以下优化：使用字符串的形式监听对象属性：
'obj.name': {
// 执行方法
handler(oldValue,newVal) {
console.log(oldValue)
console.log(newValue)
},
deep: true, // 深度监听
immediate: true // 第一次改变就执行
}
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue-cli3.0项目打包后如何修改访问后端地址，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
这篇文章主要介绍了Vue双向数据绑定的原理，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下2020-10-10
这篇文章主要给大家介绍了关于vue中如何使用echarts动态渲染数据的相关资料,echarts是一款基于JavaScript的开源可视化图表库,它通过简单的配置即可实现各种各样的可视化效果,需要的朋友可以参考下2023-11-11
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
本文讲述的是从开发一款基于Vue2x的响应式自适应轮播组件插件的一个全过程，包含发布到npm，构建自己的npm包，供下载安装使用的技巧,非常不错，具有一定的参考借鉴价值，感兴趣的朋友跟随脚本之家小编一起看看吧2018-05-05
Vue 应用在首屏加载时速度过慢,通常与以下问题有关：打包文件过大、网络请求过多、资源加载过慢,针对这些问题,本文给大家介绍了Vue首屏加载过慢的优化方法,需要的朋友可以参考下2025-01-01
组件之间通信分为三种：父-子；子-父；跨级组件通信。下面，就组件间如何通信做一些总结。需要的朋友可以参考下2018-11-11
这篇文章主要为大家详细介绍了vue iview实现分页功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
本篇文章主要介绍了详解VUE2.X过滤器的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了vue项目如何实现ip和localhost同时访问，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章介绍了Vue.js中v-on指令的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-03-03
最新评论