网站建设pdf 下载,国内专业网站制作公司,湖北网站推广方案,手机网站打开微信登录这周呢主要就是整理整理学的东西#xff0c;不然看的也记不住#xff0c;把这些学的东西做成笔记#xff0c;感觉会清楚许多#xff0c;这次就把vue2和vue3的区别总结一下#xff0c;明天要考四级#xff0c;嗐#xff0c;本来想着复习四级#xff0c;结果只写了一两套… 这周呢主要就是整理整理学的东西不然看的也记不住把这些学的东西做成笔记感觉会清楚许多这次就把vue2和vue3的区别总结一下明天要考四级嗐本来想着复习四级结果只写了一两套题四级这有点悬呀。1.API vue2:vue2使用选项类型API选项类型API在代码里分割了不同的属性data,computed,methods等一个逻辑散乱在文件不同的位置导致代码可读性变乱 vue3:vue3中使用组合式API将逻辑内容写到一起增强了代码的可读性还提供了逻辑复用性方案 2.生命周期
整体变化不大但在vue3在组合式API中使用生命周期的时候要先引入。而Vue2在选项API中可直接调用生命周期钩子。
vue2vue3beforeCreatecreatedbeforeMountonbeforeMountmountedmountedbeforeUpdateonbeforeUpdateupdatedonupdatedbeforeDestoryonbeforeDestorydestoryedondestoryed除了这些钩子函数vue3还增加了onRenderTracked 和onRenderTriggered函数。 setup是围绕beforeCreate和created钩子函数去运行的所以不需要显示去定义 3.多根节点
vue2中多根节点会报错
//vue2中存在多个节点会报错,但是vue3中支持多个节点
templateheader/headermain/mainfooter/footer
/template
//只能存在一个根节点,需要一个div包裹
templatedivheader/headermain/mainfooter/footer/div
/template
4.异步组件Suspense
vue3提供的Suspense组件有两个插槽#default和#fallback来确保加载完成异步内容是显示默认插槽并将#fallback插槽用作加载状态。
Suspense常见的使用场景
配合vue3中的defineAsyncComponent来加载异步组件时进行loading处理
配合路由使用当未加载完毕时不显示router-view而是渲染fallback的内容
templatediv classchildh3我是Child组件/h3/div
/templatescript
import {ref} from vue
export default {name:Child,setup(){return new Promise((resolve,reject){setTimeout((){resolve({sum})},3000)})}
}
/script
style
.child{background-color:rgb(206, 225, 65) ;padding: 10px;
}
/style Child组件有可能是异步组件也有可能是组件内部处理逻辑或查找操作过多导致加载过慢等未加载完成前显示 Loading…即 fallback 插槽内容加载完成时显示自身即 default 插槽内容
templatediv classapph3我是App组件/h3Suspensetemplate v-slot:defaultChild//templatetemplate #fallbackh3加载中。。。/h3/template/Suspense/div
/templatescript
// import Child from ./components/Child.vue//静态引入
import {defineAsyncComponent} from vue
const Child defineAsyncComponent(()import(./components/Child.vue)) //异步引入
export default {name:App,components:{Child}
}
/scriptstyle
.app{background-color:royalblue ;padding: 10px;
}
/styleSuspense组件会触发三个事件pendingresolve和fallback。
pendingpending事件是在进入挂起状态时触发。resolveresolve事件是在default插槽完成获取新内容时触发。fallbackfallback事件是在fallback插槽的内容显示时触发
5.Telport
vue3提供了Telport组件可将部分DOM移动到vue app之外的地方。比如说经常要是用的dialog弹框
templatebutton clickisShow true点我弹个窗/buttonteleport to#teleport-target//将对话框移动到了teleport-target盒子下面div v-ifisShow classmaskdiv classdialogh4我是一个对话窗组件/h4h4我是一个对话窗组件/h4button clickisShow false关闭弹窗/button/div/div/teleport
/template6.响应式原理
1.vue2响应式原理基础是Object.defineProperty通过Object.defineProperty来劫持各个属性的setter、getter在数据变动时发布消息给订阅者触发相应的监听回调
Object.defineProperty基本用法直接在一个对象上定义新的属性或修改现有的属性并返回对象
2.vue3响应式原理基础是Proxy相较于vue2提供语言全范围响应能力消除了局限性
3.差异如下 vue2 Object.defineProperty不具备监听数组的能力需要重新定义数组的原型来达到响应式Object.defineProperty无法监测到对象属性的添加和删除由于vue会在初始化实例时对属性执行getter和setter转化所有属性必须在data对象上才能让vue将它转化为响应式深度监听需要一次递归对性能影响较大 vue3 基于Proxy和Reflect可以原生监听数组可以监听对象属性的添加和删除不需要一次性遍历data的属性可以显著提高性能 7.TypeScript支持
vue3由typeScript重写相对vue2有更好的typeScript的支持
最后vue3比vue2还新增了响应式的APIreactive、ref等响应式侦听watchEffect等
