Vue入门：Options Api之data和methods介绍

data属性选项

data是传入对象中的一个选项，也是一个 option api，就是其中的一个属性。

const app = Vue.createApp({
  data() { // data : function() { } es6增强写法
    return {
      message: "hello world"
    }
  }
})

• 在Vue3中，data属性必须传入一个函数，否则会直接报错
• data返回的对象会被Vue的响应式系统劫持，可以理解为监听，之后对该对象的修改或访问都会在劫持中被处理，如：
  • 在template或者papp中通过{{counter}}访问counter，可以从对象中获取到数据，所以修改counter的值时，app中的{{counter}}也会发生改变。

Vue3中是用Proxy实现数据劫持的。

methods属性

methods是传入对象中的一个选项，也是一个 option api，就是其中的一个属性。

        <div id="app">
            <h2>计数器counter: {{counter}}</h2>
            <button @click="increment">+1</button>
            <button @click="decrement">-1</button>
        </div>

        <script src="./vue.js"></script>
        <script>
            const app = Vue.createApp({
                data() {
                    return {
                        counter: 0,
                    }
                },
                methods: {
                    // increment: function() {}
                    increment() { // es6写法
                        this.counter++
                    },
                    decrement() {
                        this.counter--
                    },
                },
            })
            app.mount('#app')
        </script>
    </body>

methods属性是一个对象，通常会在这个对象中定义很多方法：

• 这些方法可以被绑定到模板中
• 在该方法中，可以使用this关键字来直接访问到data中返回的对象的数据。在执行函数的时候，会绑定一个this，然后访问到data中返回的对象的数据。

Vue官方文档里说明了，不应该使用箭头函数来定义methods函数（例如plus: () => {this.a++}）。理由是箭头函数绑定了父级作用域的上下文，所以this将不会按照希望指向组件实例，this.a将是undefined。那么接下来有几个问题：
问题一：为什么不能在methods属性中使用箭头函数
因为在methods中要使用data返回对象的数据，那么这个this是必须有值的，并且希望能通过this获取到data返回的对象中的数据。
那么，我么这个this能是window吗？答案是不能的，因为在window中，我们便无法获取到我们想要的数据（data返回的对象中的数据）了。如果我们使用的是箭头函数，那么这个this就会是window。
为什么使用的是箭头函数，这个this就会是window呢？
若把methods中的函数改为箭头函数写法，根据箭头函数的this规则（它会在自己的上层作用域中查找 this），箭头函数没有自己的this，那么其会一直往上找，会找到的是全局作用域，因为它的this指向的是window。
问题二：不使用箭头函数的情况下，this到底指向的是什么？
Vue中就是对methods中的所有函数进行了遍历，并通过bind方法给其绑定this。