Vue3中新的API

常用的 Composition API（组合API）

setup

1. Vue3.0新增的配置项，值为一个函数
2. setup是所有Composition API的
3. 组件中所用到的：数据，方法等等，均需要配置在setup函数中
4. setup函数的两种返回值：
   • 若返回是一个对象，对象中的属性，方法，在模板中均可以直接使用
   • 若返回一个渲染函数，则可以自定义渲染内容
5. setup的两个注意点：
   • setup的执行时机：在beforeCreate之前执行一次，this是undefined
   • setup的参数：
     • props：值为对象，包含外部传递过来，且组件内部申明接收了的属性
     • context：上下文对象
       • attrs：值为对象，包含组件外部传递过来，但是没有在props中配置中申明的属性，相当于this.$attrs
       • slots：收到的插槽的内容，相当于this.$slots
       • emit：分发自定义时间的函数，相当于this.$emit。（值得注意的是，Vue3中使用emit，需要使用emits去接收父组件传过来的数据，和props
         差不多）

PS：

1. 尽量不要与Vue2的配置项混用：
   • Vue2配置项(data,methods,computed…)中可以访问到setup中的属性，方法。
   • 但在setup中不能访问到Vue2中的配置
   • 如果有重名，setup优先
2. setup函数不能是一个async函数（后面学习异步组件，也行，需要的是Suspense和异步组件引入的配合），因为返回值不在是一个return的对象，而是promise，模板看不到return对象中的属性

<template>
    <h1>{
  {name}}</h1>
    <button @click="sayHi"></button>
</template>
<script>
exprot default {
    name: 'App',
    setup(props,context) {
        const name = "景天" // 不是响应式的数据
        function sayHi() {
            console.log(`Hi,我是${name}`)
        }
        
        // 返回值是一个对象
        return {
            name,
            sayHi
        }
        
        // 返回值是一个渲染函数
        return () => h('h1','这是渲染函数渲染的内容')
    }
}
</script>

ref函数

1. 作用：定义一个响应式的数据，或者说是生成一个引用实现对象
2. 语法：const xxx = ref(initValue)
   • 创建一个包含响应式数据的引用对象（reference对象）
   • JS中操作数据需要：xxx.value
   • 模板中读取数据：直接使用即可

PS：

1. ref接收的数据可以是基本类型数据，也可以是对象类型
2. 基本类型的数据：响应式是靠Object。defineProperty()的get和set完成的
3. 对象类型的数据：内部使用了reactive函数

<template>
    <h1>{
  {name}}</h1>
    <h1>{
  {age}}</h1>
    <button @click="sayHi"></button>
</template>
<script>
import {ref} from 'vue'
exprot default {
    name: 'App',
    setup() {
        const name = ref("景天") 
        const age = ref(18) 
        const job = ref({
            type: '前端'，
            money：'30K'
        }) // 其实Vue3帮你调用了reactive函数
        // 在setup中访问ref定义的基本数据类型的数据，需要 .value才能拿到值
        function sayHi() {
            name.value = '飞蓬'