Vue3中的setup函数

组件中用到的数据、方法等都要配置在setup中。

setup函数有两种返回值：

        1.返回一个对象，则对象中的属性、方法，在模板中均可直接使用（重点）。

//此时数据并非响应式
setup(){
    let name = '佩奇'
    let age = '2'
    function sayHello(){
        alert(`我叫${name}，今年${age}岁了。`)
    }
    
    return{
     name,
     age,
     sayHello
    }
}

        2.返回一个渲染函数，则可以自定义渲染内容。

        这种写法会覆盖掉html中的内容，展示return的渲染内容。

//先引入h函数
import {h} from 'vue'


setup(){

    return ()=>h('h1','你好')
}

注意：

   1.尽量不要与Vue2配置混用。

• Vue2 配置（data、methods、computed等）中可以访问到setup中的属性、方法
• setup中不能访问到Vue2配置（data、methods、computed等）   
• 如果有重名，setup优先         

    2.setup不拿是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性。（也可以返回Promise实例，但需要Suspense和异步组件的配合）

    3.setup在beforeCreate之前执行一次，this是undefined

    4.setup可以接收参数

props:['xxx'],
emits:['xx],
setup(props,context){


}

• props:值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
• context：上下文对象

• attrs:值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性，相当于this.$attrs。
• slots：收到的插槽内容，相当于this.$slots。
• emit：分发自定义事件的函数，相当于this.$emit。