vue3 Application APi的简单介绍

这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

Application APi就是 一些接口、方法、属性，也就是vue里的一些方法或者属性，我在上一篇文章已经介绍了部分，如ref，onMount等一些生命周期函数

首先介绍介绍一下createApp vue3 把一些方法如 use方法直接放到了createApp()方法创建的实例里 注册组件 component，minix等 vue2和vue3的区别写法 写法不同 但是用法差不多 也可以全局注册和局部注册

    // vue2组件注册写法
    vue.component()
    // vue3组件写法
    import { createApp } from 'vue' // 解构出createApp
    let app = createApp()
    app.components()

这是use的简单写法

import { createApp } from 'vue' // 解构出createApp
import App from './App.vue' // 引入app组件
import router from './router' // 引入router对象
import store from './store' // 引入vuex对象

createApp(App).use(store).use(router).mount('#app')

当然我们的createApp也可以传入一个对象 他可以定义一个组件出来的 如

   createApp({
      name: "app",
      data: funtion() {
         return {
           a: 1,
           b:2
         }
      }
   })

这种方式和vue2的 new Vue() 出来一个实例又很像，当然这个不是主流写法，一般也不会这么用

createApp() 返回一个实例,在这个大组件里,都是共享同一个上下文.

其实vue3是一种是一种混合形势pai 既有options的特性又有compisition特性

// vue2 是把一些选项都写在对象里, 只能写在对象里
export default {
    name: 'app',
    mounted() {},
    methods() {},
 }
 
 // vue3 我们可以吧一些函数直接结构出来 
 import { onMounted,onUnmounted,ref } from 'vue'  大家可以看看 其实是复合的
 export default{
   name: 'app',
   props: {},
   setup() {
      
      retrun {
        name: '',
        age: '',
      }
   },
    
 }

setup相当于是一个入口，我们解构出来的hook，只能放在setup函数里使用，setup函数会在当组件的实力被创建属性初始化完成，会被处罚，在生命周期角度来说，它会在生命周期之前触发，

vue3 没有data函数，在setup返回的对象里属性就，可直接渲染到模版上，这是只是静态数据，双向数据绑定需要用ref，和reactive

ref一般绑 数字 字符串 布尔 reactive 绑 对象或者数组

后面会详细想解释一下 ref reactive等，