Vue3理解(1) 目录选项式 API (Options API) 组合式 API (Composition API

选项式API,就是需要把代码规范化,例如data定义,methods写方法,computed写方法等，选项所定义的属性都会暴露到函数内部的this上它会指向当前组件的实例。

选项式 API 是在组合式 API 的基础上实现的！

组合式API，我们可以使用导入的API函数来描述组件逻辑，在单文件组件中,组合式API通常与搭配使用，使用setup告诉Vue在编译的时候进行处理,让我们更简洁的使用组合式API

每个Vue应用都是通过createApp函数创建一个新的应用实例

import {createApp} from 'vue'

const app = createApp({
    /*跟组件选项*/
})

我们传入 createApp 的对象实际上是一个组件，每个应用都需要一个“根组件”，其他组件将作为其子组件。

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

const app = createApp(App)

应用实例在调用的时候需要通过.mount()方法后才能渲染出来,参数可以式一个DOM元素也可以是一个CSS选择器字符串

app.mount('#app')

应用实例会暴露一个.config对象允许我们配置一些应用选项,例如定义全局组件,全局错误处理器等

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


app.component('button',button)

应用实例并不只限于一个,createApp Api允许你在同应该页面拥有多个共存的Vue应用,而且每个应用都有自己的配置和全局资源作用域

const app1 = createApp({
  /* ... */
})
app1.mount('#container-1')

const app2 = createApp({
  /* ... */
})
app2.mount('#container-2')