前言

watch 和 computed 是vue实例对象中的两个重要属性,watch是监视属性,用来监视vue实例对象上属性和方法的变化,computed被称为计算属性,可以将data对象中的属性进行计算得到新的属性;由于watch属性监视data对象中的属性变化时,也能拿到data对象中的属性进行计算;因此产生疑问既然两者都能实现同一功能,两者有什么区别呢?下面将以此疑问为突破点结合实例详述两者的区别;

文章の目录

  • 前言
  • watch 实现案例
  • computed 实现案例
  • 对比
  • 写在最后

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>  </body>  <script type="text/javascript">    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。    const vm = new Vue({      el: '#root',      data: {        firstName: '张',        lastName: '三',        fullName: '张-三',      },      watch: {        firstName(val) {          setTimeout(() => {            this.fullName = val + '-' + this.lastName          }, 1000)        },        lastName(val) {          setTimeout(() => {            this.fullName = this.firstName + '-' + val          }, 1000)        },      },    })  </script>

以上为watch通过监视data中的firstName和lastName的变化改变fullName

computed 实现案例

<body>    <!-- 准备好一个容器-->    <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>  </body>  <script type="text/javascript">    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。    const vm = new Vue({      el: '#root',      data: {        firstName: '张',        lastName: '三',      },      computed: {        fullName() {          return this.firstName + '-' + this.lastName        },      },    })

以上为通过computed计算属性实现fullName和firstName、lastName产生联系;

对比

通过对比可以看出,watch和computed都能实现相同的功能,但是首先第一眼看去,computed计算属性实现的案例明显代码更少更精简;但是watch能将fullName的变化改成异步;因此对watch和computed属性做出如下总结:
1、computed能完成的功能watch也能完成
2、watch能完成的功能computed不一定能完成,比如watch可以进行异步操作;
注意:
1.所被Vue管理的函数,最好写成普通函数,这样this的指向才是vm 或 组件实例对象。
2.所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的回调函数),最好写成箭头函数,这样this的指向才是vm 或 组件实例对象。

写在最后

(❁´◡`❁)您的点赞评论收藏⭐是作者创作的最大动力