1、deep深度监听的用法

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

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

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

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(); // 不用写初始化函数
}

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

vue中watch侦听器,deep和immediate的用法的更多相关文章

  1. 第六十六篇:Vue的watch侦听器

    好家伙,哇吃侦听器 1.watch侦听器 watch侦听器允许开发者监视数据的变化,从而针对数据的变化做特定的操作 1.1.侦听器的基本用法 <body> <div id=" ...

  2. Vue框架之侦听器与生命周期

    一.计算属性computed和侦听器(watch) 侦听的是单个属性 watch:{ 数据属性的名字:function(value){ }, 数据属性的名字2:function(value){ } } ...

  3. vue侦听器(引入vue.js写法)

    首先在html中引入vue.js,具体怎么下载可以参考https://blog.csdn.net/lvoelife/article/details/129254906,下载后在html中引入: 侦听d ...

  4. vue 侦听器watch 之 深度监听 deep

    <template> <div> <p>FullName: {{person.fullname}}</p> <p>FirstName: &l ...

  5. Vue学习之vue中的计算属性和侦听器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Vue中methods(方法)、computed(计算属性)、watch(侦听器)的区别

    1.computed和methods 共同点:computed能现实的methods也能实现: 不同点:computed是基于它的依赖进行缓存的.computed只有在它的相关依赖发生变化才会重新计算 ...

  7. vue从入门到进阶:计算属性computed与侦听器watch(三)

    计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...

  8. vue计算属性和侦听器

    一.计算属性: main.js: var app = new Vue({ el: '#app', data: { math: 80, physics: 90, english: 30 }, compu ...

  9. Vue教程:计算属性computed与侦听器watch(三)

    计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...

  10. Vue.js 源码分析(七) 基础篇 侦听器 watch属性详解

    先来看看官网的介绍: 官网介绍的很好理解了,也就是监听一个数据的变化,当该数据变化时执行我们的watch方法,watch选项是一个对象,键为需要观察的数据名,值为一个表达式(函数),还可以是一个对象, ...

随机推荐

  1. ChatGPT玩法(二):AI玩转Excel表格处理

    前言 在线免费体验ChatGpt:https://www.topgpt.one 你是否还在为记不住Excel的繁琐函数和公式而苦恼?如果是这样,那么不妨试试ChatExcel.即使你对函数一窍不通,也 ...

  2. uniapp主题切换功能的方式终结篇(全平台兼容)

    前面我已经给大家介绍了两种主题切换的方式,每种方式各有自己的优势与缺点,例如"scss变量+vuex"方式兼容好但不好维护与扩展,"scss变量+require" ...

  3. 专访泛境科技:如何借助3DCAT实时云渲染打造元宇宙解决方案

    随着5G.VR/AR等技术的发展,元宇宙(Metaverse)这一概念越来越受到关注.元宇宙是一个由虚拟世界构成的网络空间,其中人们可以通过数字化的身份和形象进行各种社交.娱乐.创作和商业活动.元宇宙 ...

  4. .net 项目静态文件自动压缩打包

    打包工具选型 在 ASP.NET MVC 时代,我们常使用 BundleCollection 设置需要打包压缩的 js 和 css 文件,运行时框架会自动处理打包压缩过程并将最终结果传入响应. ASP ...

  5. CKS 考试题整理 (04)-secret

    Task 在 namespace istio-system 中获取名为 db1-test 的现有secret的内容 将 username 字段存储在名为 /cks/sec/user.txt 的文件中, ...

  6. 一分钟学一个 Linux 命令 - ps

    前言 大家好,我是 god23bin.欢迎来到<一分钟学一个 Linux 命令>系列,每天只需一分钟,记住一个 Linux 命令不成问题.今天要说的是 ps 命令. 什么是 ps 命令? ...

  7. XMLSpy操作手册

    最新发布的XMLSpy会让XML代码的处理更容易,还会有助于这个产品成为最主要的XML编辑器.xmlspy是符合行业标准的XML开发环境,专门用于设计,编辑和调试企业级的应用程序,包括XML, XML ...

  8. Spring容器获取Bean的9种方式

    1 前言 随着SpringBoot的普及,Spring的使用也越来越广,在某些场景下,我们无法通过注解或配置的形式直接获取到某个Bean.比如,在某一些工具类.设计模式实现中需要使用到Spring容器 ...

  9. 【NestJS系列】核心概念:Controller控制器

    前言 控制器主要是用来处理客户端传入的请求并向客户端返回响应. 它一般是用来做路由导航的,内部路由机制控制哪个控制器接收哪些请求. 路由 为了创建基本控制器,我们需要使用@Controller装饰器, ...

  10. 模型部署 — PaddleNLP 基于 Paddle Serving 快速使用(服务化部署 - Docker)— 图像识别 + 信息抽取(UIE-X)

    目录 流程 版本 安装 Docker 安装 PaddleNLP 安装 环境准备 模型准备 压缩模型 下载模型 模型部署 环境配置 启动服务 测试 -- 暂时还没通过 重启 图像识别 + 信息抽取(UI ...