详解vue.js中watch的使用


当前第2页 返回上一页

immediate表示在watch中首次绑定的时候,是否执行handler,值为true则表示在watch中声明的时候,就立即执行handler方法,值为false,则和一般使用watch一样,在数据发生变化的时候才执行handler。

deep

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

1

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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。如果只需要监听对象中的一个属性值,则可以做以下优化:

使用字符串的形式监听对象属性:

1

2

3

4

5

6

7

8

9

watch: {

    'cityName.name': {

      handler(newName, oldName) {

      // ...

      },

      deep: true,

      immediate: true

    }

  }

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

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

相关推荐:

2020年前端vue面试题大汇总(附答案)

vue教程推荐:2020最新的5个vue.js视频教程精选

更多编程相关知识,请访问:编程入门!!

以上就是详解vue.js中watch的使用的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

为何使用vue.js

vue.js如何设置时间格式

vue.js怎么给input添加事件

vue.js怎么引入echars

vue.js的ul-li标签仿select标签

如何启动vue.js项目

简书 jsplumb使用

vue.js循环引用组件报错怎么办

怎样安装vue.js

vue-cli 3.x 自动部署项目至服务器的方法介绍(代码)

更多相关阅读请进入《vue.js》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...