Vue3-setup

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函数，因为返回值不在是一个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>