简单了解一下vue3的createApp

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

咱先可以简单看一下createApp打印出来的一些就是创建出来的是一个组件的实例 看图

在图上上我们看到了一个config对象，在这个对象里有个errorHander方法的 方法 是在渲染和watch监听函数中未捕获的错误 使用方法

var app = createApp(App)
app.config.errorHandler((error,vm,info )=>{
  error // 错误信息
  info // 生命周期的一些钩子函数 在这里
})

这歌一般咱们用到很少，只做一个补充，知道就可以

warnHandler 这个是程序运行时的一些警告会捕获到 用法和 errorHander一样 这里也不过多的赘述了

globalProperties 这个是vue3 添加一些全局方法的属性 这个和vue2有点区别

Vue.prototype.utils = { a: function(){} } // vue2是直接在原型上直接添加
let app = createApp(App)
app.config.globalProperties.utils = { a: function(){} } // 这是vue3添加全局方法的方式

使用方式

vue2 的方式是直接在this里面取就可以了
如 this.utils.a()
vue3 由于没有this
我们需要 在vue里解构出 getCurrentInstance
import  {getCurrentInstance} from 'vue'

setup(props,ctx) {
  let {ctx,proxy} = getCurrentInstance(); 在这个方法里结构出ctx和proxy 这两个都可以
  使用的方式是 ctx.a()或者proxy.a()
}

看上面有两个ctx setup的参数ctx 是当前setup执行的一个上下文，而我们getCurrentInstance方法解构出来的ctx是当前组件实例的上下文 ，大家可以把这个两个分别打印出来，对比的看一下

接下来我们来分析一下如果如果全局的方法的key和组件内方法的key名字相同会咋样

import  {getCurrentInstance} from 'vue'
export default {
  props: {
    utils: Object
  }
  setup(props,ctx) {
     let {ctx,proxy} = getCurrentInstance(); 
     console.log(ctx.utils)
  }
}
大家可以猜一下 会打印全全局 还是打印组件内的， 这个是会打印组件内的，不信大家可以试试
vue3官方说的 如果key相同 组件内部的属性的优先级最高

今天咱们先了解到这