在vue中,使用watch来响应数据的变化。watch的用法大致有三种。下面代码是watch的一种简单的用法

html:

<input type="text" v-model="cityName"/>


js:
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属性对对象进行深度监听。

html:
<input type="text" v-model="cityName.name"/>
js 
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。如果只需要监听对象中的一个属性值,
则可以做以下优化:使用字符串的形式监听对象属性:

这样只会给对象的某个特定的属性加监听器。

数组(一维、多维)的变化不需要通过深度监听,对象数组中对象的属性变化则需要deep深度监听。

 
 
 
												

vue watch详细用法的更多相关文章

  1. Vue组件基础用法

    前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...

  2. cdn模式下vue的基本用法

    我们知道jq是简化了dom操作,而react和vue则是通过使用虚拟dom的方式,不需要频繁的更改ui界面,而是通过更改数据的方式来更新界面. 我们知道些jq插件时会在IFFE中传入jQuery,jQ ...

  3. C#播放声音的四种方法 +AxWindowsMediaPlayer的详细用法

    C#播放声音的四种方法 第一种是利用DirectX 1.安装了DirectX SDK(有9个DLL文件).这里我们只用到MicroSoft.DirectX.dll和 Microsoft.Directx ...

  4. 在DOS下的DEBUG命令的详细用法

    在DOS下的DEBUG命令的详细用法 名称 解释 格式 a (Assemble) 逐行汇编 a [address] c (Compare) 比较两内存块 c range address d (Dump ...

  5. __declspec关键字详细用法

    __declspec关键字详细用法 __declspec用于指定所给定类型的实例的与Microsoft相关的存储方式.其它的有关存储方式的修饰符如static与extern等是C和C++语言的ANSI ...

  6. CString.Format的详细用法(转)

    CString.Format的详细用法(转) 在MFC程序中,使用CString来处理字符串是一个很不错的选择.CString既可以处理Unicode标准的字符串,也可以处理ANSI标准的字符串.CS ...

  7. IFRAM的详细用法

    IFRAM的详细用法:   IFRAM的详细用法:  <IFRAME>用于设置文本或图形的浮动图文框或容器. BORDER <IFRAME BORDER="3"& ...

  8. 【转】java.util.vector中的vector的详细用法

    [转]java.util.vector中的vector的详细用法 ArrayList会比Vector快,他是非同步的,如果设计涉及到多线程,还是用Vector比较好一些 import java.uti ...

  9. DOM Style样式对象的详细用法

    DOM Style样式对象的详细用法 HTML Style样式比较复杂,相应访问.修改方法也有所差异.参考相关资料,整理如下. 典型Html文件如下,有三种定义方式. <head>     ...

随机推荐

  1. Java并发知识整理

    整理了一下前段时间学习Java并发的笔记,大约有40篇. 1. Java并发基础知识 并发基础(一) 线程介绍 并发基础(二) Thread类的API总结 并发基础(三) java线程优先级 并发基础 ...

  2. [UGUI]帧动画

    ImageFrameAnimation.cs using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; [R ...

  3. eclipse添加缺失的包/src/main/resource

    右键>>build path>>source 添加文件夹

  4. 使用DolphinPHP的框架中的excel插件导入数据

    直接上函数吧 public function importfile() { if ($this->request->isPost()) { if($_POST['files']) { Cu ...

  5. 关于时间:UTC/GMT/xST/ xDT

    UTC ,Coordinated Universal Time GMT ,Greenwich Mean Time GMT和UTC 一般来说是意义几近相同的, 不过 UTC Coordinated Un ...

  6. RDD中的cache() persist() checkpoint()

    cache只有一个默认的缓存级别MEMORY_ONLY ,而persist可以根据StorageLevel设置其它的缓存级别. cache以及persist都不是action. 被重复使用的(但是)不 ...

  7. C# 趣味小程序(4)——遍历特定目录及其子目录

    //递归方法遍历目录,并统计其中文件的数目        private int statisticFiles(string directory)        {            int st ...

  8. hadoop动态添加删除节点datanode及恢复

    1. 配置系统环境 主机名,ssh互信,环境变量等 本文略去jdk安装,请将datanode的jdk安装路径与/etc/hadoop/hadoop-evn.sh中的java_home保持一致,版本ha ...

  9. leetcode212

    class Solution { public List<String> findWords(char[][] board, String[] words) { List<Strin ...

  10. 利用STM32CubeMX来生成USB_HID_Mouse工程【添加ADC】(1)

    现在原来的基础上添加ADC的功能. 现在(利用STM32CubeMX来生成USB_HID_Mouse工程)基础上新增硬件 JoyStick Shield 游戏摇杆扩展板 与STM32F103C8的连接 ...