详解vue.js中watch的使用


本文摘自PHP中文网,作者青灯夜游,侵删。

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

1

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

1

2

3

4

5

6

7

8

9

10

11

new Vue({

  el: '#root',

  data: {

    cityName: 'shanghai'

  },

  watch: {

    cityName(newName, oldName) {

      // ...

    }

  }

})

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

1

2

3

4

watch: {

    cityName: 'nameChange'

    }

 }

immediate和handler

这样使用watch时有一个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。

比如当父组件向子组件动态传值时,子组件props首次获取到父组件传来的默认值时,也需要执行函数,此时就需要将immediate设为true。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

new Vue({

  el: '#root',

  data: {

    cityName: ''

  },

  watch: {

    cityName: {

      handler(newName, oldName) {

        // ...

      },

      immediate: true

    }

  }

})

监听的数据后面写成对象形式,包含handler方法和immediate,之前我们写的函数其实就是在写这个handler方法;

阅读剩余部分

相关阅读 >>

4个很 nice 的vue router过渡动效,快来收藏!

怎样启动一个vue.js项目

vue.js怎么获取input里面的值

vue.js如何阻止事件冒泡

vue中值得关注的21个开源项目(推荐)

vue.js属于前端框架么

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

怎么用npm卸载vue.js

vue.js图片怎么渲染

使用vue.js需要什么知识

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




打赏

取消

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

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

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

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

评论

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