一、vue3的区别点

main.js的引用，使用creatApp工厂函数。

//mian.js 入口文件

//引入createApp函数
import {createApp} from 'vue'
//引入App根组件
import App from './App.vue'
//创建app实例应用对象
const app=createApp(App)
//挂载根标签
app.mount('#app')

2. 页面可以没有根标签，即不用被一个外层标签包裹。

<template>
    <div>我是标签内容1</div>
    <div>我是标签内容2</div>
</template>

二、setup()函数

vue3中，无需声明data，methods，直接在setup函数中进行变量和函数的声明。返回数据对象或返回渲染函数。setup的执行早于beforeCreated,setup函数中无法获取this，this的值为undefined。

<template>
    <div>App组件</div>
    <div>姓名：{{name}}</div>
    <div>年龄：{{age}}</div>
    <button @click='speak'>说话</button>
</template>
export default{
import {h} from 'vue'
    name:'App',
    setup(){
        let name='张三';
        let age='18';
        function speak(){
            alert('开始说话')
        }
        //返回数据对象
        return {
            name,
            age,
            speak
        }
        //返回渲染函数
        return ()=>{
            return h('h1','渲染内容')
        }
    }
}

注意

vue2语法与vue3语法不要混用。vue2语法中可以访问setup函数内容，setup不能访问vue2中定义内容，vue2和vue3数据重复时，优先vu3数据。
setup函数不能定义为async函数，因为setup函数返回的是promise，不是函数。

三、setup()参数

<template>
    <div>App组件</div>
    <div>姓名：{{name}}</div>
    <div>年龄：{{age}}</div>
    <button @click='speak'>说话</button>
</template>
export default{
    name:'App',
    props:['from','work'],
    emits:['use'],
    setup(props,contxt){
        let name='张三';
        let age='18';
        function speak(){
            alert('开始说话')
        }
        //返回数据对象
        return {
            name,
            age,
            speak
        }
    }
}

setup接收两个数据：props（参数），contxt（上下文）

props:接收组件外部的参数，且组件中声明了接收属性。

contxt:

attrs 接收组件中没有声明接收属性的属性，相当于this.$attrs
slots 接收的插槽内容，node节点列表。相当于this.$slots
emit 触发自定义函数。相当于this.$emit

vue3-setup()函数

一、vue3的区别点

二、setup()函数

三、setup()参数