基于Vue3最新标准,实现后台前端综合解决方案完整资料代码

1,226 阅读2分钟

基于Vue3最新标准,实现后台前端综合解决方案完整资料代码

Download:百度网盘

提取码:sfz1

Vue 3.0 所采用的 Composition Api 与 Vue 2.x 使用的 Options Api 有什么区别? 代码更利于维护和封装 Vue2 中,我们会在一个 vue 文件的 data,methods,computed,watch 中定义属性和方法,共同处理页面逻辑 ,一个功能的实现,代码过于分散 vue3 中,代码是根据逻辑功能来组织的,一个功能的所有 api 会放在一起(高内聚,低耦合),提高可读性和可维护性,基于函数组合的 API 更好的重用逻辑代码 Vue3 中用 setup 函数代替了 Vue2 中的 befareCreate 和 created Vue3 中用 onUnmounted 代替了 Vue2 中的 beforeDestory Vue3 中用 unmounted 代替了 Vue2 中的 destroyed 三、Proxy 相对于 Object.defineProperty 有哪些优点? 代码的执行效果更快

得分王风娃娃ed_看图王.web.jpg Proxy 可以直接监听对象而非属性 Proxy 可以直接监听数组的变化 Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的 Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改 Proxy 不需要初始化的时候遍历所有属性,另外有多层属性嵌套的话,只有访问某个属性的时候,才会递归处理下一级的属性 四、Vue 3.0 在编译方面有哪些优化? vue3.x 中标记和提升所有的静态节点,diff 的时候只需要对比动态节点内容 Fragments(升级 vetur 插件): template 中不需要唯一根节点,可以直接放文本或者同级标签 静态提升(hoistStatic),当使用 hoistStatic 时,所有静态的节点都被提升到 render 方法之外.只会在应用启动的时候被创建一次,之后使用只需要应用提取的静态节点,随着每次的渲染被不停的复用 patch flag, 在动态标签末尾加上相应的标记,只有带 patchFlag 的节点才被认为是动态的元素,会被追踪属性的修改,能快速的找到动态节点,而不用逐个逐层遍历,提高了虚拟 dom diff 的性能 缓存事件处理函数 cacheHandler,避免每次触发都要重新生成全新的 function 去更新之前的函数 tree shaking 通过摇树优化核心库体积,减少不必要的代码量