视频课地址https://www.bilibili.com/video...杨存昌课堂笔记:https://juejin.cn/post/686637...P5:全局API改成Application那里vue2中有很多全局API可以在程序实例调用时改变vue的行为,比如Vue.component,这样所有创建的Vue实例共享同一个全局配置。vue3中使用CreateApp返回app实例,暴露了一系列全局API。示例如下:Vue.config-->app.configVue.config.productionTip-->removedVue.config.ignoredElement-->app.isCustomElementVue.component-->app.componentVue.directive-->app.directiveVue.mixin->app.mixinVue.use-->app.useVue.filter-->removedP6:Vue2中很多global-api作为静态函数直接挂在构造函数上,比如Vue.nextTick(),如果我们从不在代码中使用,就会形成所谓的死代码。Vue3将全局API抽离成独立的函数,使得打包工具的tree-shaking优化可以排除这些死代码。受影响的API:Vue.nextTickVue.observablee(被Vue.reactive取代)Vue.versionVue.compile(仅在完整构建中)Vue.set(仅在兼容构建中)Vue.delete(仅在兼容构建中)P7:.syncsyntaxSugar被移除并统一为v-model参数形式。句法糖:指在计算机语言中加入的某种语法。这种语法对语言的功能没有影响,反而更方便程序员使用。1.子组件传递值的未命名双向绑定语法糖扩展为:子组件comp接收属性和自定义事件:app.component('comp',{template:'{{modelValue}}
',props:['modelValue']})2.子组件按值和命名的双向绑定语法糖扩展为:子组件comp接收属性和自定义事件:app.component('comp',{template:'{{counter}}
',props:['counter']})P8:渲染函数API修改渲染函数变得更易用,修改要点如下:h函数不再传入,需要我们手动导入。方便摇树。展平道具结构。如:on:{click(){}}-->onClick(){}。scopedSlots删除,统一到插槽。渲染函数h(约定为createElement函数的别名)使用:h(label,[labelpropsattribute,]labeltextstring/subelementarray)import{h}from'vue'//手动导入渲染函数app.component('comp',{render(){this.$slots.default()//执行获取插槽内容的函数this.$slots.content()//以前是this.$scopedSlots.content()constemit=this.$emitreturnh('div',[h('div',{onClick(){emit('update:modelValue','newvalue')}},'我是RenderTest'),h('div',{onClick(){}},'我是RenderTest'),])}})P9:功能组件只能通过简单的函数来创建,functional选项有很大的变化,舍弃了功能组件。主要有以下几点:功能组件的性能提升在vue3中可以忽略不计,所以在vue3中推荐状态组件。函数式组件只能以纯函数的形式声明,接受两个参数,props和context。SFC中的不能添加功能属性来声明功能组件。{functional:true}组件选项已删除。P10:异步组件使用变化。异步组件必须用defineAsyncComponent显式包装。组件选项重命名为loader。Loader函数不再接受resolve和reject并且必须返回一个Promise。定义一个异步组件import{defineAsyncComponent}from'vue'//不配置的异步组件constasyncPage=defineAsyncComponent(()=>import('./NextPage.vue'))//异步组件会被拆分成单独的文件,加载需要时//带配置的异步组件,loader选项是之前的组件>import('./NextPage.vue'),delay:200,timeout:3000,errorComponent:ErrorComponent,loadingComponent:LoadingComponent})P11:组件数据选项总是声明为函数。自定义组件的白名单。vue3中的自定义组件检测发生在模板编译时。如果要添加一些vue以外的自定义元素,需要在vue-loader的编译选项中设置isCustomElement让检测过去,以免控制台出现警告。vue3设置动态组件时,is属性只能用在component标签上,dom中的模板解析换成了v-is。P12:自定义命令API与组件一致。vue3中的命令API和组件是一致的,如图:bind-->beforeMountinserted-->mountedbeforeUpdate:new!在元素本身更新之前调用,组件生命周期钩子与update非常相似,componentUpdated-->updatedbeforeUnmount-->new!在元素即将被移除前调用,类似unbind-->unmountedP13:动画过渡类名更改v-enter-->v-enter-from对应v-enter-tov-leave-->v-leave-from对应v-leave-to组件watch选项和实例$watch方法不再支持点分隔符字符串路径,但可以使用计算函数作为$watch参数。this.$watch(()=>this.foo.bar,(v1,v2)=>{console.log(this.foo.bar)})vue2中应用根容器的outerHTML(如
)会被根组件的模板替换,或者编译成模板;vue3现在被根容器的innerHTML取代。P14:$on,$off,$once去掉,由第三方库提供P15:清除Vue3核心特性的案例