1.vue3简介

107 阅读1分钟
vue2vue3
选项式Api组合式Api
与script setup语法糖搭配使用,setup中导入的顶层变量和函数能够在模板中直接使用;你可以理解为模板中的表达式和 <script setup> 中的代码处在同一个作用域中。

应用实例

通过createApp创建一个应用实例

import { createApp } from 'vue'
const app = createApp({/* 根组件选项 */})

app就是一个应用实例

根组件

createApp接收的对象就是一个根组件实例

import { createApp } from 'vue'
// 从一个单文件组件中导入根组件
import App from './App.vue'
const app = createApp(App)

App就是一个根组件实例

挂件应用

<div id="app"></div>
app.mount('#app')

应用实例需要在调用了mount()函数之后才会渲染出来,mount()函数接收一个dom元素或者是一个css选择器
mount()函数返回的是一个根组件实例而非应用实例

应用配置

.config

设置应用级别的选项 例如应用级别的错误处理器,捕获所有子组件的错误

app.config.errorHandler = (err) => {
  /* 处理错误 */
}

.component

注册全局组件

app.component('TodoDeleteButton', TodoDeleteButton)