详解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方法;

阅读剩余部分

相关阅读 >>

vue.js是前端框架吗?

vue.js服务端渲染是什么

vue.js怎么引入外部js

vue.js是什么软件

vue.js怎样刷新组件

vue的响应式原理是什么?

vue.js如何上传文件

vue.js中如何获取url的值

vue.js主要应用哪方面

详解javascript中动态合并两个对象的属性

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




打赏

取消

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

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

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

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

评论

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