详解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项目

vue.js如何操作dom

vue.js如何设置时间格式

vue.js插槽有什么用

vue.js和安装有什么区别

为何使用vue.js

vue.js怎么部署到服务器上

怎么检查vue.js是否安装成功了

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




打赏

取消

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

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

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

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

评论

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