首页 > 前端日志 > 前端框架 > vue 中如何让 watch 一绑定就立即执行
2018
05-23

vue 中如何让 watch 一绑定就立即执行

假设我们需要用 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;
    }
  } 
})

 

但是,你如果直接运行起来,就会发现,达不到你的需求。

上面的代码的效果是,当我们输入firstName后,wacth监听每次修改变化的新值,然后计算输出fullName。

这是因为 watch 的一个特点是,最初绑定的时候是不会执行的,要等到 firstName 改变时才执行监听计算。

但是我们的需求是让他最初绑定的时候就执行,该怎么办呢?我们需要修改一下我们的 watch 写法,使用immediate属性即可。

watch: {
  firstName: {
    handler(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    },
    // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
    immediate: true
  }
}

 

在新的watch里面,我们给 firstName 绑定了一个handler方法,之前我们写的 watch 方法其实默认写的就是这个handler,Vue.js会去处理这个逻辑,最终编译出来其实就是这个handler。

而immediate:true代表如果在 wacth 里声明了 firstName 之后,就会立即先去执行里面的handler方法,如果为 false就跟我们以前的效果一样,不会在绑定的时候就执行。

 

 

最后编辑:
作者:eatdao
这个作者貌似有点懒,什么都没有留下。

留下一个回复

你的email不会被公开。