vue学习路线（11.watch对比computed）

一、通过案例对比computed和watch

姓名案例（输入框分别输入姓和名，全名展示姓名的组合）

1.通过computed实现

  <body>
    <div id="app">
      姓：<input v-model="firstName" /><br /><br />
      名：<input v-model="lastName" /><br /><br />
      全名：<span>{{fullName}} </span>
    </div>
    <script type="text/javascript">
      const vm = new Vue({
        el: "#app",
        data() {
          return {
            firstName: "张",
            lastName: "三",
          };
        },
        computed: {
          fullName() {
            return this.firstName + "-" + this.lastName;
          },
        },
      });
    </script>
  </body>

2.通过watch实现

  <body>
    <div id="app">
      姓：<input v-model="firstName" /><br /><br />
      名：<input v-model="lastName" /><br /><br />
      全名：<span>{{fullName}} </span>
    </div>
    <script type="text/javascript">
      const vm = new Vue({
        el: "#app",
        data() {
          return {
            firstName: "张",
            lastName: "三",
            fullName: "",
          };
        },
        watch: {
          firstName(val) {
            this.fullName = val + "-" + this.lastName;
          },
          lastName(val) {
            this.fullName = this.firstName + "-" + val;
          },
        },
      });
    </script>
  </body>

二、总结computed和watch之间的区别

• 1. computed能完成的功能，watch都可以完成。
• 2. watch能完成的功能，computed不一定能完成，例如:watch可以进行异步操作。

三、两个重要的小原则

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