Vue3 Composition API

特性入口 setup()，

说明：可以看作是一个生命周期，介于 beforeCreate 与 created 之间，新的 setup 组件选项在创建组件之前执行，一旦 props 被解析，并充当合成 API 的入口点

Vue2.x

<template>
    <div>
        <div>{{ count }}</div>
        <button @click="add">增加</button>
    </div>
</template>

<script>
    export default {
        name: "demo",
        data() {
            return {
                count: 0
            }
        },
        methods: {
            add() {
                this.count ++
            }
        }
    }
</script>

说明：count、add()分开不利维护

Vue3.x

<template>

  <div>
      <div>{{ count }}</div>
      <button @click="add">增加</button>
  </div>

</template>

<script>
// 导入ref函数
import {ref} from 'vue'

function increase() {
	// 声明响应式数据count，值为0
    const count = ref(0)
    // 创建方法add
    const add = () => {
        count.value ++
    }
    // 导出数据和方法，便于外界访问
    return {
        count,
        add
    }
}

export default {
  name: 'demo',
  setup() {
  	  //调用increase函数，并获取 count 和 add
      let {count, add} = increase()
      
      //return出需要被访问的值和方法
      return {
          count,
          add
      }
  }
}
</script>

说明：模块组件化，count、add()在一个方法里，便于维护。ref()函数来命名响应式数据的，ref 对我们的值创建了一个响应式引用。使用引用的概念将在整个组合式 API 中经常使用