watch和computed的区别

computed和watch的区别
1.computed能完成的功能,watch都可以完成。
2.watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作(setTimeout).
两个重要的小原则
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。
2.所有不被vue所管理的函数(定时器的回调函数、ajax的回调函数等、promise的回调函数)最好写成箭头函数，这样this的指向才是vm或组件实例对象。

//watch异步小案例
<div id="root">
    姓<input type="text" v-model="firstName"><br />
    名<input type="text" v-model="lastName"><br />
    全名：<span>{{fullName}}</span>
  </div>
  <script>
    Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示。

    // 创建vue实例
    const vm = new Vue({
      // el:'#root',//el用于指定当前vue实例为哪个1容器服务
      data: {//data用于存储数据，用于el指定的容器使用
        firstName: 'liu',
        lastName: 'muye',
        fullName:'liu-muye'
      },
      methods: {
      },
      computed: {

      }

    })
    vm.$mount('#root'); //代替el，第二种写法
    // watch可以使用setTimeout延迟使用，computed不能开启异步任务🌟
    // watch里面setTimeout写的箭头函数,
    vm.$watch('firstName',function(newValue,oldValue){
      console.log('123');
      setTimeout(() => {
        console.log(this);
       return this.fullName = newValue + '-' + this.firstName
      },1000)
    })
    vm.$watch('lastName',function(newValue,oldValue){
      console.log('123');
      this.fullName = this.firstName + '-' + newValue

    })
  </script>

如果您喜欢此博客或发现它对您有用，则欢迎对此发表评论。也欢迎您共享此博客，以便更多人可以参与。如果博客中使用的图像侵犯了您的版权，请与作者联系以将其删除。谢谢！

watch和computed的区别

特色标签

链接