vue中watch的详细用法(转载)
在vue中,使用watch来响应数据的变化。watch的用法大致有三种。下面代码是watch的一种简单的用法:
<input type="text" v-model="cityName"/>

new Vue({
el: '#root',
data: {
cityName: 'shanghai'
},
watch: {
cityName(newName, oldName) {
// ...
}
}
})

直接写一个监听处理函数,当每次监听到 cityName 值发生改变时,执行函数。也可以在所监听的数据后面直接加字符串形式的方法名:
watch: {
cityName: 'nameChange'
}
}
immediate和handler
这样使用watch时有一个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。
比如当父组件向子组件动态传值时,子组件props首次获取到父组件传来的默认值时,也需要执行函数,此时就需要将immediate设为true。

new Vue({
el: '#root',
data: {
cityName: ''
},
watch: {
cityName: {
handler(newName, oldName) {
// ...
},
immediate: true
}
}
})

监听的数据后面写成对象形式,包含handler方法和immediate,之前我们写的函数其实就是在写这个handler方法;
immediate表示在watch中首次绑定的时候,是否执行handler,值为true则表示在watch中声明的时候,就立即执行handler方法,值为false,则和一般使用watch一样,在数据发生变化的时候才执行handler。
deep
当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,只有data中的数据才能够监听到变化,此时就需要deep属性对对象进行深度监听。
<input type="text" v-model="cityName.name"/>

new Vue({
el: '#root',
data: {
cityName: {id: 1, name: 'shanghai'}
},
watch: {
cityName: {
handler(newName, oldName) {
// ...
},
deep: true,
immediate: true
}
}
})

设置deep: true 则可以监听到cityName.name的变化,此时会给cityName的所有属性都加上这个监听器,当对象属性较多时,每个属性值的变化都会执行handler。如果只需要监听对象中的一个属性值,则可以做以下优化:使用字符串的形式监听对象属性:

watch: {
'cityName.name': {
handler(newName, oldName) {
// ...
},
deep: true,
immediate: true
}
}

这样只会给对象的某个特定的属性加监听器。
数组(一维、多维)的变化不需要通过深度监听,对象数组中对象的属性变化则需要deep深度监听。
vue中watch的详细用法(转载)的更多相关文章
- vue中watch的详细用法
在vue中,使用watch来响应数据的变化.watch的用法大致有三种.下面代码是watch的一种简单的用法: <input type="text" v-model=&quo ...
- vue中router-link的详细用法
官网文档地址:https://router.vuejs.org/zh/api/#to 今天项目突然有需求,让vue中的一个页面跳转到另一个页面 // 字符串 <router-link to=&q ...
- 详解Vue中watch的高级用法
我们通过实例代码给大家分享了Vue中watch的高级用法,对此知识点有需要的朋友可以跟着学习下. 假设有如下代码: <div> <p>FullName: {{fullName} ...
- PHP中$_SERVER的详细用法
PHP中$_SERVER的详细用法 $_SERVER['PHP_SELF'] #当前正在执行脚本的文件名,与 document root相关. $_SERVER['argv'] #传递给该脚本的参数. ...
- vue 中 命名视图的用法
今天主要记录 vue中命名视图的用法 先奉上官网网址:https://router.vuejs.org/zh/guide/essentials/named-views.html 一般情况下,一个页面 ...
- vue中this.$set的用法
之前了解这个方法的时候,感觉这一辈子也用不到这个方法,因为当时没有应用场景,但是还真有用的时候,我相信你们也有用到时候. 从三个方面给大家说一下这个this.$set: 1.this.$set实现什么 ...
- Delphi中 TStringList 的详细用法 good
TStringList 类是在Delphi使用最厂的一个对像,我们这里一起来看看 TStringList 的详细用法. 先把要讨论的几个属性列出来:1.CommaText2.Delimiter &am ...
- Java中stream的详细用法
来自于:Java 8 stream的详细用法_旅行者-CSDN博客_java stream 一.概述 Stream 是 Java8 中处理集合的关键抽象概念,它可以指定你希望对集合进行的操作,可以执行 ...
- ecshop中foreach的详细用法归纳
ec模版中foreach的常见用法. foreach 语法: 假如后台:$smarty->assign('test',$test); {foreach from=$test item=list ...
随机推荐
- RedHat Linux下普通用户无法使用sudo命令的解决方法
Ref:http://blog.sina.com.cn/s/blog_4aa35ca101012qb6.html 装完linux系统,发现普通用户无法使用sudo 命令, 提示:User1(普通用户) ...
- java多线程中篇(三) —— 线程的控制(创建,运行,阻塞,中断,结束)
简介 线程的控制就是程序对线程的主要管理,最重要的就是状态的切换维护. 每种转态都有不同的引发事件(对应线程的方法),每种状态又有各自不同的处理步骤和过程,整个线程控制主要就是涉及这些内容. 正文 线 ...
- 创建线程的三种方式(Thread、Runnable、Callable)
方式一:继承Thread类实现多线程: 1. 在Java中负责实现线程功能的类是java.lang.Thread 类. 2. 可以通过创建 Thread的实例来创建新的线程. 3. 每个线程都是通过某 ...
- go context 源码分析
WithCancel func WithCancel(parent Context) (ctx Context, cancel CancelFunc) { c := newCancelCtx(pare ...
- Echarts设置y轴值间隔 以及设置 barWidth : 30,//柱图宽度
需求:如图,y轴之间的距离太小,这样就太过于拥挤了,现在要修改echarts里面的属性,设置y轴值间隔让图表看上去舒服一些. 其实很多问题,真的只是因为自己没有好好的看文档,很多文档上面都写的 ...
- Shiro授权及注解式开发
目的: shiro授权 shiro注解式开发 Shiro授权 首先设计shiro权限表: 从图中我们也清晰的看出五张表之间的关系 ShiroUserMapper Set<String> g ...
- Arm-Linux 移植 mtd-utils 1.x
有关文章:<mtd-utils 的 使用> 背景: 关于在公司的生产环境有关.不希望每次都在uboot下面做nand flash 的烧写:也觉得使用U盘升级的方法比较慢,而且有关的驱动不是 ...
- .net framework 4.0 安装一直失败,错误代码0x80240037,解决
本文链接:https://blog.csdn.net/Chris_Ime/article/details/81626778 今天遇到一问题,在新电脑win7系统上安装.net framework 4. ...
- github的pull request是指什么意思?有什么用处(转)
https://www.cnblogs.com/-walker/p/6093277.html
- IEEE754浮点数
前言 Go语言之父Rob Pike大神曾吐槽:不能掌握正则表达式或浮点数就不配当码农! You should not be permitted to write production code if ...