vue中 methods watch computed的执行顺序

vue中 methods watch computed的执行顺序

今天在做项目的时候，遇到一个问题，一直告诉我一个函数未定义。因为我是使用的计算属性（computed）给子组件传递的数据，于是我就写了一个demo测试了一下。

	<div id="app">
      <h2>{{currentTabComponent}}</h2>
      <button @click="changTab">点击切换</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          currentTab: "张三",
          tabs: ["张三", "李四"],
        },
        computed: {
          currentTabComponent() {
            console.log("computed");
            return this.currentTab;
          },
        },
        watch: {
          currentTab() {
            console.log("watch");
          },
        },
        methods: {
          changTab() {
            console.log("methods");
            for (let item of this.tabs) {
              if (this.currentTab != item) {
                this.currentTab = item;
                break;
              }
            }
          },
        },
      });
    </script>

然后一打开浏览器的时候，就看到computed执行了一次

然后这时，我点击了切换按钮，这里我们可以看到是按顺序执行了method,watch,computed

综上所述：
computed:在文档首次加载时会执行一次，当Vue实例中的data属性变化并被computed中的计算属性引用时，所有的相关计算属性又会执行一次。

watch:侦听器，当computed执行完毕后，执行watch继续侦听缓存中的对应Vue实例的data属性，如若再次侦听到data属性值有变，便又会触发computed。

methods:存放方法的对象，靠某种行为触发里面对应的方法