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. 10个 Istio 流量管理 最常用的例子,你知道几个?

    10 个 Istio 流量管理 最常用的例子,强烈建议收藏起来,以备不时之需. 为了方便理解,以Istio官方提供的Bookinfo应用示例为例,引出 Istio 流量管理的常用例子. Bookinf ...

  2. JS引擎中的线程,事件循环,上下文

      线程 浏览器中有哪些进程呢? 1.浏览器进程:浏览器的主进程,负责浏览器的界面界面显示,与用户交互,网址栏输入.前进.后退,以及页面的创建和销毁. 2.渲染进程(浏览器内核):默认一个tab页面一 ...

  3. 【HMS Core】Android Studio安装Toolkit登录报错{"httpCode":500,"errorCode":"00012005"...

    [问题描述] 在Android Studio安装Toolkit插件,安装后登录,报错 ​ ​ [问题分析] 此种情况一般是由于开发者账户未实名造成的 [解决方案] 1.检查开发者账户是否实名,登录联盟 ...

  4. Git 多账号配置

    本地登录多账号并连接对应的远程仓库,主要就是 密钥配对,我这里刚开始配了密钥也将密钥复制到ssh但是还是连接不到第二个远程仓库,后来发现是需要 密钥代理 1.在当前项目下更改git账号信息: git ...

  5. 寻找一个好的工程师不只是看ta的刷题能力

    面试一个工程师,该考察什么能力,如果单单背诵一些概念.题目好像是在考察记忆力,最终项目里还是得解决实际问题.但解决实际问题的能力真的不易考察,导致大部分公司面试前期都只能通过试题来筛选求职者,到面试后 ...

  6. React学习时,outlet 路由配置 (prop传参处理,跳转的实现,父子数据共享)

    index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App' ...

  7. 安装Hadoop单节点伪分布式集群

    目录 安装Hadoop单节点伪分布式集群 系统准备 开启SSH 安装JDK 安装Hadoop 下载 准备启动 伪分布式模式安装 配置 配饰SSH免密登录本机 测试启动 单节点安装YARN 伪分布式集群 ...

  8. .net core提示502.5错误

    最近给WindowsServer2012服务器部署.Net Core项目,部署后一直显示502.5错误,具体如下: 网上找了一大堆解决办法都行不通,最后在stackoverflow中找到说是缺少一个补 ...

  9. 【Mybatis】学习

    Mybatis 学习 环境搭建 pom.xml <!--log4j--> <dependency> <groupId>org.slf4j</groupId&g ...

  10. HTB靶场之Sandworm

    准备: 攻击机:虚拟机kali. 靶机:Sandworm,htb网站:https://www.hackthebox.com/,靶机地址:https://app.hackthebox.com/machi ...