Vue3.0尝鲜

Vue3官网API地址：https://v3.vuejs.org/guide/installation.htmlVue2.0迁移Vue3.0https://v3.vuejs.org/guide/migration/introduction.html#overview异同点：3.0比2.0快2倍·3.0去掉了filter，没有beforeCreate创建，取而代之的是setup·reactivity可以作为库单独使用·可以抽取单独的函数代替mixin，比mixin更好的解决了重复的水平垂直跳转·支持多个子节点分片·setup中没有this·proxy实现了响应性没有setdelete兼容性不好·响应性能得到了很大的提升，属性的递归遍历是初始化时不需要·响应性不区分数组和Object3.0兼容IE12及以上Compositionapi可以与optionsAPIⅠ共存:vm=Vue.createApp({})||newVue({})Vue实例化一个对象Ⅱ：全局方法组件指令mixinmountuseprovideⅢ：LifeCyclebeforeCreate,created,beforeMount,mounted,beforeUpdate,updated,activated,deactivated,beforeDestroy,destroyed,errorCaptured*API/Func名称Vue3Vue2.x全局挂载属性/方法ivm.confi.globalProperties.xxx=xxxVue.prototype.xxx=xxx自定义元素vm.config.isCustomElement=tag=>tag.startWith('str-')Vue.config.ignoredElements=['my-custom-web-component','another-web-component',/^str-/]合并策略vm.config.optionsMergeStrategies.hello=(toVal,fromVal,vm)=>{Vue.config.optionMergeStrategies.myOption=function(toVal,fromVal){//返回合并后的值}全局方法所有全局方法都挂载在vm实例中，而不是提供静态方法Ⅱ提供了一个全局注入方法provide(key,value)提供一个unmount方法unmount(ele)所有全局方法都是Vue构造函数的静态方法InstantiationVue.createApp({})newVue({})实例化参数ObjectObjectInstantiate传入propsVue.createApp({props:['propA']},{propA:'a'})constComp=Vue.extend(comp)newComp({propsData:{}})定义组件import{defineComponent}from'vue'constComp=defineComponent({})constComp=Vue.component('name',{})异步组件import{defineAsyncComponent}from'vue'asyncComp:defineAsyncComponent(()=>import(componentPath))asyncComp:()=>import(componentPath)nextTickimport{createApp,nextTick}from'vue'vm.$nextTick()lifecycleⅲaddedrenderTracked(fordebuggingwhenvnoderendersforthefirsttime),renderTriggered(vnodere-transferWhendyeing,debugisused)beforeDestroy变为beforeUNmountdestroyed变为unmountedⅲmixinsnochangenochangeextendsnochangenochangenewfeatureresolveComponent允许解析组件如果组件在如果未找到或未定义组件，则当前应用程序实例返回该组件。constapp=Vue.createApp({})app.component('MyComponent',{/*...*/})import{resolveComponent}from'vue'render(){constMyComponent=resolveComponent('MyComponent')}返回值：componentresolveDynamicComponent允许使用使用的相同机制解析组件。返回已解析的组件或新创建的以组件名称作为节点标记的VNode。如果找不到该组件，将发出警告。不太明白是什么意思，下次再补充。import{resolveDynamicComponent}from'vue'render(){constMyComponent=resolveDynamicComponent('MyComponent')}resolveComponent，resolveDynamicComponent只能在渲染函数或函数组件中使用。如果指令在当前应用程序实例中可用，则resolveDirective允许通过名称解析指令。返回指令或未定义constapp=Vue.createApp({})app.directive('highlight',{})import{resolveDirective}from'vue'render(){consthighlightDirective=resolveDirective('highlight')}withDirectivesallowapp对VNode的指令。返回带有应用程序指令的VNode。import{withDirectives,resolveDirective}from'vue'constfoo=resolveDirective('foo')constbar=resolveDirective('bar')returnwithDirectives(h('div'),[[foo,this.x],[bar,this.y],[directive,value],[directive,value,arg,modifiers]//指令名称、指令值、参数、修饰符...])以下是2.x中的重大更改列表：#GlobalAPI全局VueAPI已更改为使用应用程序实例全局和内部API已被重组为可摇树#v-model组件上的模板指令用法已被重新设计key和非v-for节点上的用法已更改v-if和v-for在同一元素上使用时的优先级已更改v-bind="object"现在是顺序敏感的v-on:event.native修饰符已删除v-for中的ref引用数组不再注册#Components功能组件只能使用普通功能创建功能性单文件组件(SFC)上的