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. 一次有关 DNS 解析导致 APP 慢的问题探究

    目录 一.业务背景 二. 问题 三.问题排查 3.1.问题一: 基于DNS 延迟的解析 3.2.问题二:HTTPDNS侧 HTTPDNS基础理论 相关问题 四.优化方向 4.1.域名解析配置 4.2. ...

  2. 【python基础】循环语句-for循环

    1.初始for循环 for循环可以遍历任何可迭代对象,如一个列表或者一个字符串.这里可迭代对象的概念我们后期介绍,先知道这个名词就好了. 其语法格式之一: 比如我们遍历学员名单,编写程序如下所示: f ...

  3. NameError: name 'List' is not defined

    当在python出现该问题是,使用from typing import List.

  4. Linux目录结构及常用命令

    目录 Linux目录结构... 1 Linux目录结构... 1 1. Linux常用命令... 4 1.1 Linux命令初体验... 4 1.2 文件目录操作命令... 8 1.3 拷贝移动命令. ...

  5. 本地python调试 问题笔记

    ImportError: cannot import name 'int_classes' from 'torch._six' 把  "from torch._six import stri ...

  6. Unparseable date: "2019-03-27"

    Unparseable date: "2 public static void main(String[] args) { try { String dateStr="2019-0 ...

  7. Qt源码阅读(五)-deleteLater

    Qt deleteLater作用及源码分析 个人经验总结,如有错误或遗漏,欢迎各位大佬指正 在本篇文章中,我们将深入分析源码,探讨deleteLater的原理. deleteLater是Qt框架提供的 ...

  8. pytest7.4版本的一个变更,可能会影响你的项目

    pytest7.4版本的一个变更,可能会影响你的项目 本文撰写于 2023.7.10 准备工作 项目结构如下 D:\Gitee\DemoRepo (17.97MB) +-- testCases (1. ...

  9. TreeMap运行错误

    Exception in thread "main" java.lang.ClassCastException: Day16_TreeMap.Star cannot be cast ...

  10. 手写promise之分步解析

    promise是es6推出适用于异步请求的构造函数,帮助解决回调地狱的问题,以下内容将自定义实现promise,只包括基本使用,所以一些边界情况考虑没有在内. 如果对promise用法还不熟悉的朋友可 ...