vue的watch监听

LinMeng
• 阅读 1552

vue的watch监听函数

watch用来响应数据的变化,watch 的用法大致有以下三种:

1. 监听某个变量

 watch: {
     name(newName, oldName) {
        console.log(newName)   //  改变前的值
        console.log(oldName)   // 改变后的值
     }
   } 

2.也可以直接写一个监听处理函数,当每次监听到 name值发生改变时,执行函数。也可以在所监听的数据后面直接加字符串形式的方法名:

watch:{
   name:'Namechange'
 }

immediate(立即处理,进入页面就触发)和handler

以上使用watch时有一个特点,就是当值第一次绑定的时候(即进入页面),不会执行监听函数,只有值发生改变才会执行。 如果我们需要再最初绑定值的时候也执行函数,需要用到immediate属性。 当父组件向子组件动态传值时,子组件props首次获取到父组件传来的默认值时,也需要执行函数,此时就需要将immediate设为true

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

监听的数据后面写成对象形式,包含handler方法和immediate,之前我们写的函数其实就是在写这个handler方法; immediate表示在watch中首次绑定的时候,是否执行handler,值为true则表示在watch中声明的时候,就立即执行handler方法,值为false,则和一般使用watch一样,在数据发生变化的时候才执行handler。

3.深度监听

当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,只有data中的数据才能够监听到变化,此时就需要deep属性对对象进行深度监听。

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

设置deep: true 则可以监听到city.name的变化,此时会给city的所有属性都加上这个监听器,当对象属性较多时,每个属性值的变化都会执行handler。

  • 如果只需要监听对象中的一个属性值,则可以做以下优化:使用字符串的形式监听对象属性
watch: {
       'city.name': {
           handler(newName, oldName) {
          // ...
        },
        deep: true,
        immediate: true
       }
    }

这样只会给对象的某个特定的属性加监听器。数组(一维、多维)的变化不需要通过深度监听,对象数组中对象的属性变化则需要deep深度监听。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Dax Dax
3年前
Vue中计算属性和 watch的区别
通俗来讲,既能用computed实现又可以用watch监听来实现的功能,推荐用computed,重点在于computed的缓存功能computed计算属性是用来声明式的描述一个值依赖了其它的值,当所依赖的值或者变量改变时,计算属性也会跟着改变;watch监听的是已经在data中定义的变量,当该变量变化时,会触发watch中的方法;根据
Stella981 Stella981
3年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Easter79 Easter79
3年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
LinMeng
LinMeng
Lv1
争取早日实现“代码自由” wa !!!
文章
50
粉丝
7
获赞
33