vue3

1带来的新特性/亮点。Performancevue3在性能上比vue2快2倍。重写虚拟DOM，实现运行时编译和更新性能，提升SSR速度。2.tree-shakingsupportvue3中的核心API都支持tree-shaking，并且这些API都是通过封装的方式引入的，而不是直接实例化Injection只会对使用到的函数或者特性进行封装（按需封装），也就是功能多，体积小尺寸。3.在CompositionAPIvue2中，我们一般使用mixin来复用逻辑代码，使用起来还是比较方便的，但是也存在一些问题：比如代码源不清晰，method属性冲突等。基于此，vue3中引入了CompositionAPI（组合API），使用纯函数分离复用代码。它与React中的钩子概念非常相似。更好的逻辑重用和代码组织更好的类型推断一个简单的例子//AsyncComponent.vue5.BetterTypeScriptsupport用过vue2中TypesScript的小朋友应该都有体会，写起来有点难受。Vue3使用ts重写，开发者在使用vue3时有更好的类型支持和更好的书写体验。6.CustomRendererAPI这个api定义了虚拟DOM的渲染规则，也就是说使用自定义的API可以达到跨平台的目的。下面是一个简单的例子。//App.jsimport{defineComponent,h}from'vue';exportdefaultdefineComponent({render(){returnh('Article',{onClick(){console.log('点击文章');}},[h('Title',{align:'center'},'这是文章标题')]);}});//main.jsimport{createRenderer}from'vue';importAppfrom'./App.js';import'./assets/index.css';const{createApp}=createRenderer({createElement(type){letnodeType='div';switch(type){case'Article':nodeType='article';break;case'Title':nodeType='h1';break;case'Content':nodeType='p';break;}returndocument.createElement(nodeType);},insert(child,parent,anchor){parent.insertBefore复制代码(child,anchor||null);},setElementText(node,text){node.textContent=text;},patchProp(el,key,prevValue,nextValue){console.log(el,key,prevValue,nextValue);switch(key){case'onClick':el.addEventListener('click',nextValue);休息;默认值：el.setAttribute(key,nextValue);}}});createApp(App).mount(document.querySelector('#app'));更多：用vue3写的ToDoList