首页 > 其他分享 >vue中watch侦听器,deep和immediate的用法

vue中watch侦听器,deep和immediate的用法

时间:2023-06-28 11:46:17浏览次数:44  
标签:vue formData watch deep handler immediate 监听

1、deep深度监听的用法

当监听一个对象时,可能想监听整个对象的变化,而不仅仅是某个属性。但在默认情况下,如果你正在监听formData对象并且修改了formData.username,对应的侦听器并不会触发,它只在formData对象被整个替换时触发。

监听整个对象被称作深度监听,通过将deep选项设置为true来开启这一特性:

watch: {
        formData: {
            handler(val, oldVal) {
                console.log(val, oldVal);
            },
            deep: true
        }
}
View Code

2、immediate的用法

immediate表示在watch中首次绑定的时候,是否执行handler,当值为true则表示在watch中声明的时候,就立即执行handler方法;当值为false,则和一般使用watch一样,在数据发生变化的时候才执行handler。所以当immediate的值为true时,初始化方法在created或者mounted生命周期中就可以不用写了,已经在watch中写过了。

watch: {
    formData: {
        handler(val, oldVal) {
            console.log(val, oldVal);
            this.getInit();
        },
        immediate: true
    }
},
mounted() {
    // this.getInit(); // 不用写初始化函数
}
View Code

鉴定完毕,欢迎友们一起交流学习!!

 

标签:vue,formData,watch,deep,handler,immediate,监听
From: https://www.cnblogs.com/liushihong21/p/17510985.html

相关文章

  • 深入剖析:Vue核心之虚拟DOM
    前言使用Vue做项目也有两年时间了,对Vue的api也用的比较得心应手了,虽然对Vue的一些实现原理也耳有所闻,例如虚拟DOM、flow、数据驱动、路由原理等等,但是自己并没有特意去探究这些原理的基础以及Vue源码是如何利用这些原理进行框架实现的,所以利用空闲时间,进行Vue框架相......
  • vue定时器
    exportdefault{methods:{fun1(){consttimer=setInterval(()=>{//需要做的事情},1000);//通过$once来监听定时器,在beforeDestroy钩子可以被清除。this.$once('hook:beforeDestroy',()=>{clearInterval(timer);......
  • VUE框架组件中通信方式(4)
    ref-children-parentref方法既可以获取真实的DOM节点,还可以获取到子组件的实例VC,$parent可以在子组件中获取父组件的实例VC,使用方式是在子组件的方法中传入的参数只能是$parent如:<button@click="handler($parent)">点击我爸爸给我10000元</button>示例代码如下;//父组件代码<......
  • 前端Vue自定义手机号文本格式化组件手机号码文本转星号
    前端Vue自定义手机号文本格式化组件,下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13231效果图如下:cc-format-phone使用方法<!--phone:手机号isStar:是否转星号--><cc-format-phone:phone="":isStar="false"></cc-format-phone>......
  • 前端Vue自定义微信支付弹框dialog alert popup
    前端Vue自定义微信支付弹框dialogalertpopup, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13245效果图如下:实现代码如下:cc-payDialog使用方法<!--:money:支付金额 show:是否显示@cancel:取消 @success:确认支付--><cc-payDia......
  • vue自动将px转换成rem
    1.首先下载lib-flexiblenpminstalllib-flexible--save2.在main.js中引用 lib-flexibleimport'lib-flexible/flexible'3.安装px2rem-loader(将px转换成rem)npminstallpx2rem-loader4.配置px2rem(在build/utils.js中配置px2rem)我这边是根据iphone6的设计图尺寸......
  • vue组件-使用Vue.component全局注册组件
    通过components注册的时私有子组件例如:在组件A的components节点下,注册了组件F。则组件F只能用在组件A中;不能被用在组件C中。注册全局组件在vue项目的main.js入口文件中,通过Vue.component()方法,可以注册全局组件。importVuefrom'vue'importAppfrom'./App.vue'//导......
  • vue-组件-使用组件的三个步骤
    组件之间的父子关系使用组件的三个步骤......
  • vue组件-启用less语法以及唯一根节点
    <template><div><divclass="test-box"><h3>这是用户自定义的Test.vue---{{username}}</h3><button@click="changeName">修改用户名</button></div>&l......
  • vue透传 Attributes
    Attributes继承​在此之前,先来弥补一个小知识点,vue3支持多个根节点,vue2不支持,<!--vue2:错误的写法--><template><div></div><div></div></template><!--vue3:正确--><template><div></div><div></......