vue中watch侦听器,deep和immediate的用法
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的用法的更多相关文章
- 第六十六篇:Vue的watch侦听器
好家伙,哇吃侦听器 1.watch侦听器 watch侦听器允许开发者监视数据的变化,从而针对数据的变化做特定的操作 1.1.侦听器的基本用法 <body> <div id=" ...
- Vue框架之侦听器与生命周期
一.计算属性computed和侦听器(watch) 侦听的是单个属性 watch:{ 数据属性的名字:function(value){ }, 数据属性的名字2:function(value){ } } ...
- vue侦听器(引入vue.js写法)
首先在html中引入vue.js,具体怎么下载可以参考https://blog.csdn.net/lvoelife/article/details/129254906,下载后在html中引入: 侦听d ...
- vue 侦听器watch 之 深度监听 deep
<template> <div> <p>FullName: {{person.fullname}}</p> <p>FirstName: &l ...
- Vue学习之vue中的计算属性和侦听器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue中methods(方法)、computed(计算属性)、watch(侦听器)的区别
1.computed和methods 共同点:computed能现实的methods也能实现: 不同点:computed是基于它的依赖进行缓存的.computed只有在它的相关依赖发生变化才会重新计算 ...
- vue从入门到进阶:计算属性computed与侦听器watch(三)
计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...
- vue计算属性和侦听器
一.计算属性: main.js: var app = new Vue({ el: '#app', data: { math: 80, physics: 90, english: 30 }, compu ...
- Vue教程:计算属性computed与侦听器watch(三)
计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...
- Vue.js 源码分析(七) 基础篇 侦听器 watch属性详解
先来看看官网的介绍: 官网介绍的很好理解了,也就是监听一个数据的变化,当该数据变化时执行我们的watch方法,watch选项是一个对象,键为需要观察的数据名,值为一个表达式(函数),还可以是一个对象, ...
随机推荐
- 如何在.net6webapi中实现自动依赖注入
IOC/DI IOC(Inversion of Control)控制反转:控制反正是一种设计思想,旨在将程序中的控制权从程序员转移到了容器中.容器负责管理对象之间的依赖关系,使得对象不再直接依赖于其他 ...
- CMU15445 (Fall 2020) 数据库系统 Project#3 - Query Execution 详解
前言 经过前两个实验的铺垫,终于到了执行 SQL 语句的时候了.这篇博客将会介绍 SQL 执行计划实验的实现过程,下面进入正题. 总体架构 一条 SQL 语句的处理流程可以归纳为: SQL 被 Par ...
- 洛谷 P5065 不归之人与望眼欲穿的人们
题意 一个长 \(n\) 的正整数序列 \(a\),支持单点修改数值,询问所有按位或值大于等于 \(k\) 的区间长度最短为多少. 数据范围:\(1\le n\le 50000, 0\le a_i, ...
- Mysql 5.7 的安装
Mysql的安装 1 windows两种安装方式,入门选手推荐第二种(win10演示) Mysql官网下载地址:https://dev.mysql.com/downloads/mysql/ 2 开始准 ...
- 《系列二》-- 1、BeanFactory.getBean 总览
目录 一句话概括 1 书接上回 2 揭开 doGetBean() 的神秘面纱, 重要操作一览 3 必要的课外知识 3.1 bean 的作用域 Scope 有哪些 3.2 FactoryBean 是什么 ...
- 使用python发送sip协议的OPTIONS
环境:Windows10_x64 Python版本 :3.9.2 sip协议提供了OPTIONS请求方法可用于探测对端状态,今天记录下Windows10环境下使用python3.9简单实现sip ...
- PHP检查更新加载本地版本号并解压覆盖
<?phperror_reporting(0);ob_implicit_flush(true);$begin = microtime(true);//检查更新,加载本地版本号$config = ...
- 解决Springboot项目打成jar包后获取resources目录下的文件失败的问题
前几天在项目读取resources目录下的文件时碰到一个小坑,明明在本地是可以正常运行的,但是一发到测试环境就报错了,说找不到文件,报错信息是:class path resource [xxxx] c ...
- Python + unittest + ddt + HTMLTestRunner + log + excel + mysql + 企业微信通知, 接口自动化框架V2.0,支持多业务处理,仅需维护 excel 用例,无需要编写代码
Python + unittest + ddt + HTMLTestRunner + log + excel + mysql + 企业微信通知 + Jenkins 实现的接口自动化框架. 项目介绍 接 ...
- 这样看C函数才对
什么是函数?从定义来看,函数就是一段可以重复使用的代码块,比如下面这样 void hanshu() { int a = 0; int b = 3; } 这时候就应该有人要跳出来了,这是什么**!确实, ...