data、methods、computed、watch

data

data选项是一个函数，返回一个对象

        data() {
          return {
            value: "请输入信息",
          };
        },

实例创建后再添加propety，响应式系统不会跟踪。对尚未提供所需值的property使用null、undefined等占位

注意事项：
vue2的data可以是对象，但vue3的data只能是函数，否则报错
vue2自定义组件里的data要使用函数，否则使用对象的话。有多个自定义组件使用同一个data的话。data就会互相污染修改

methods

方法，对data数据进行修改的方法

        methods: {
          add() {
            this.items.push("item" + this.items.length);
          },
        },

注意：
里面的方法不要使用箭头函数，因为使用箭头函数的话里面的this就指向window了，而不是当前的实例了。

computed

当有一个变量，这个变量如果依赖于data里面的某个属性，那么就可以用computed计算属性

    <div id="app">
      <fieldset>
        <legend>computed</legend>
        {{count}}
        <button @click="add">click</button>
      </fieldset>
    </div>
    <script>
      const App = {
        data() {
          return {
            books: ["book0"],
          };
        },
        methods: {
          add() {
            this.books.push("book" + this.books.length);
          },
        },
        computed: {
          count() {
            return this.books.length;
          },
        },
      };
      Vue.createApp(App).mount("#app");
    </script>

注意：
计算属性有缓存机制，如果依赖的数据未发生改变，则不会重新计算而是直接使用缓存值
不要使用箭头函数，否则this就不是实例对象

watch

watch会监控data中某个property变化，执行函数

    <div id="app">
      <fieldset>
        <legend>watch</legend>
        {{count}}
        <button @click="add">click</button>
      </fieldset>
    </div>
    <script>
      const App = {
        data() {
          return {
            count: 0,
          };
        },
        methods: {
          add() {
            this.count++;
          },
        },
        watch: {
          count(newcount, oldcount) {
            console.log(oldcount + "->" + newcount);
          },
        },
      };
      Vue.createApp(App).mount("#app");
    </script>

以上代码中的watch就是监听了count数据的变化，count数据每变化一次就把旧值和新值打印出来

什么时候需要用watch？？？
1.当只需要根据data中某个property的变化做出反应，但不一定需要结果时
2.当有异步操作时
3.当需要用到旧值时