当前位置: 首页 > Web前端 > vue.js

Vue3语法变化

时间:2023-03-31 17:46:56 vue.js

视频课地址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中的