Vue：（十）watch对比computed

最新推荐文章于 2023-02-11 13:11:17 发布

置顶空谷有来人

最新推荐文章于 2023-02-11 13:11:17 发布

阅读量216

点赞数

分类专栏： Vue 前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_41377877/article/details/128183572

版权

前端同时被 2 个专栏收录

48 篇文章 0 订阅

订阅专栏

Vue

38 篇文章 2 订阅

订阅专栏

computed能完成的功能，watch都可以完成
watch能完成的功能，computed不一定能完成。例如：watch可以进行异步操作

两个重要的小原则：

所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象
所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数、Promise的回调函数等），最好写成箭头函数，这样this的指向才是vm 或组件实例对象

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>计算属性_methods</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      姓：<input type="text" v-model="firstName" /><br /><br />
      名：<input type="text" v-model="lastName" /><br /><br />
      全名：<span>{{fullName}}</span>
    </div>
    <script type="text/javascript">
      new Vue({
        el: '#root',
        data: {
          firstName: '空谷',
          lastName: '有来人',
          fullName: '空谷-有来人',
        },
        watch: {
          firstName(val) {
            this.fullName = val + '-' + this.lastName
          },
          lastName(val) {
            this.fullName = this.firstName + '-' + val
          },
        },
      })
    </script>
  </body>
</html>

我是空谷有来人，谢谢大家。