vue学习说明

文档

学习链接：https://staging-cn.vuejs.org/
先期学习需要掌握以下重点，剩下的可以过一遍，等到用到的时候再深入了解。

组合式 vs 选项式

Vue 的组件可以按两种不同的风格书写：选项式 API 和组合式 API。 两种方式其实都是在做一个事，如何描述组件，或者说设置组件的关键参数 如：响应式变量（ui）、方法（函数）、生命周期、依赖收集（watch、computed）等

选项式 API

用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。

<script>
  export default {
    // data() 返回的属性将会成为响应式的状态
    // 并且暴露在 `this` 上
    data() {
      return {
        count: 0
      }
    },

    // methods 是一些用来更改状态与触发更新的函数
    // 它们可以在模板中作为事件监听器绑定
    methods: {
      increment() {
        this.count++
      }
    },

    // 生命周期钩子会在组件生命周期的各个不同阶段被调用
    // 例如这个函数就会在组件挂载完成后被调用
    mounted() {
      console.log(`The initial count is ${this.count}.`)
    }
  }
</script>

<template>
<button @click="increment">Count is: {{ count }}</button>
</template>

组合式 API

通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与