vue watch用法是什么-木庄网络博客

本文摘自PHP中文网，作者coldplay.xixi，侵删。

vue watch用法是：1、当fullName值变化时，watch监听到并且执行；2、watch执行handler方法和immediate属性；3、使用deep属性，深度监听，常用语对象下面属性的改变。

【相关文章推荐：vue.js】

vue watch用法是：

1、基本用法：

当fullName值变化时，watch监听到并且执行

<div>
      <p>FullName: {{fullName}}</p>
      <p>FirstName: <input type="text" v-model="firstName"></p>
</div>
  
new Vue({
  el: '#root',
  data: {
    firstName: 'Dawei',
    lastName: 'Lou',
    fullName: ''
  },
  watch: {
    firstName(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    }
  } 
})

2、handler方法和immediate属性

上面的例子是值变化时候，watch才执行，我们想让值最初时候watch就执行就用到了handler和immediate属性

watch: {
  firstName: {
    handler(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    },
    // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法，如果设置了false，那么效果和上边例子一样
    immediate: true
  }
}