详解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就是node吗

vue.js中如何注册组件

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

分析一下vue.use的源码

vue.js什么是混入

vue.js如何判断对象是否为空

命令行方式怎么安装vue.js

vue.js怎么让网页定时刷新

vue.js与微信小程序区别是什么

vue.js怎样写一个轮播图

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




打赏

取消

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

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

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

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

评论

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