[vue] watch对比computed

原创

wx5909dcbadae4c 2022-12-21 10:22:41 博主文章分类：vue ©著作权

©著作权归作者所有：来自51CTO博客作者wx5909dcbadae4c的原创作品，请联系作者获取转载授权，否则将追究法律责任

文章目录

computed计算属性实现姓名案例
watch监视实现姓名案例
对比
姓名案例新需求时使用watch法
computed和Iwatch之间的区别:

computed计算属性实现姓名案例

<div id="root">
  姓：<input type="text" v-model="firstName"> <br/><br/>
  名：<input type="text" v-model="lastName"> <br/><br/>
  全名：<span>{{fullName}}</span> <br/><br/>
</div>

const vm = new Vue({
  el:'#root',
  data:{
    firstName:'张',
    lastName:'三',
  },
  computed:{
    fullName(){
      console.log('get被调用了')
      return this.firstName + '-' + this.lastName
    }
  }
})

watch监视实现姓名案例

<div id="root">
    姓：<input type="text" v-model="firstName"> <br /><br />
    名：<input type="text" v-model="lastName"> <br /><br />
    全名：<span>{{fullName}}</span> <br /><br />
</div>

const vm = new Vue({
   el: '#root',
   data: {
       firstName: '张',
       lastName: '三',
       fullName: '张-三'
   },

   watch: {
       firstName(val) {
           this.fullName = val + '-' + this.lastName
       },
       lastName(val) {
           this.fullName = this.firstName + val + '-'
       },

   }
})

对比

在姓名案例中，data数据中，watch方法需要先设置好一些变量。比如fullname，computed则不用。

在watch中需要监视两个变量。computed需要计算一次全名的组合，返回一个fullname即可。
在不同的案例，这两个方法有不同的特点和优势。当前案例，使用计算属性更简便。

姓名案例新需求时使用watch法

1.假设有新需求，即，输入框内输入姓名后，显示全名处，延迟1秒后显示。计算属性，则无法实现。

const vm = new Vue({
  el:'#root',
  data:{
    firstName:'张',
    lastName:'三',
    fullName:'张-三'
  },
  watch:{
    firstName(val){
    延时1000毫秒后执行全名的更新
      setTimeout(()=>{
        this.fullName = val + '-' + this.lastName
      },1000);
    },
    lastName(val){
      this.fullName = this.firstName + '-' + val
    }
  }
})