vue3.x对于vue2.x有哪些性能提升?丨技术开发分享录

vue3.x对于vue2.x有哪些性能提升?

{{ detail.nickname }}

转载 翻译 {{ formatTime(detail.create_time) }} 字数 {{ detail.content && detail.content.length }} 阅读 {{ detail.read_num }} {{ formatTag(v) }}

"## 一、响应式升级\n\n1. vue2.x 中响应式系统的核心是 `Object.definePropertry`\n2. vue3.x 中使用 `Proxy` 对象重写响应式系统\n\n### Proxy优势\n\n- 可以一次性监听所有属性\n- 可以监听动态新增的属性\n- 可以监听删除的属性\n- 可以监听数组的索引和 `length` 属性 \n\n### 两者区别\n\n1、`Object.defineProperty` 无法一次性监听所有属性, `Proxy` 可以\n\n```\nconst personInfo = {\n  name: 'zhangsan',\n  age: 18,\n  sex: '男'\n}\n\n// Object.defineProperty\nObject.keys(personInfo).forEach(key => {\n  Object.defineProperty(personInfo, key, {\n    set() { },\n    get() { }\n  })\n})\n\n// Proxy\nconst proxy = new Proxy(personInfo, {\n  get(target, key) { },\n  set(target, key, newValue) { }\n})\n```\n\n2、`Object.defineProperty` 无法监听动态新增的属性, `Proxy` 可以\n\n```\nconst personInfo = {\n  name: 'zhangsan',\n  age: 18,\n  sex: '男'\n}\n\n// Object.defineProperty\nObject.keys(personInfo).forEach(key => {\n  Object.defineProperty(personInfo, key, {\n    set() { },\n    get() { }\n  })\n})\n\n// Proxy\nconst proxy = new Proxy(personInfo, {\n  get(target, key) {\n    console.log('get', key)\n  },\n  set(target, key, newValue) {\n    target[key] = newValue\n    return true\n  }\n})\n\npersonInfo.from = '合肥'\nconsole.log(proxy) // Proxy 生效 Object.defineProperty 不生效\n```\n\n3、`Proxy` 可以监听删除的属性\n\n```\nconst personInfo = {\n  name: 'zhangsan',\n  age: 18,\n  sex: '男'\n}\n\n// Object.defineProperty\nObject.keys(personInfo).forEach(key => {\n  Object.defineProperty(personInfo, key, {\n    set() { },\n    get() { }\n  })\n})\n\n// Proxy\nconst proxy = new Proxy(personInfo, {\n  get(target, key) {\n    console.log('get', key)\n  },\n  set(target, key, newValue) {\n    target[key] = newValue\n    return true\n  }\n})\n \ndelete personInfo.age\nconsole.log(personInfo) // proxy 生效 Object.defineProperty不生效\n```\n\n4、`Proxy`可以监听数组的索引和 `length` 属性\n\n```\nconst personInfo = [1, 2, 3, 4]\n\n// Object.defineProperty\npersonInfo.forEach((item, index) => {\n  Object.defineProperty(personInfo, index, {\n    set() { },\n    get() { }\n  })\n})\n\n// Proxy\nconst proxy = new Proxy(personInfo, {\n  get(target, key) {\n    console.log('get', key)\n    return key in target ? target[key] : undefined\n  },\n  set(target, key, newValue) {\n    target[key] = newValue\n    return true\n  }\n})\n \npersonInfo[0] = 8 // 都生效\npersonInfo[5] = 6 // proxy 生效\npersonInfo.push(99) // proxy 生效\n```\n\n## 二、编译优化\n\n1、vue2.x 通过标记静态节点,优化 `diff` 的过程\n2、vue3.x 通过标记和提升所有的静态根节点,`diff` 的时候只需要对比动态节点内容\n\n### vue3.x优势\n\n- Fragments ( 升级 Vetur 插件 )\n- 静态提升\n- Patch flag\n- 缓冲事件处理函数\n\n### 两者区别\n\n1、当文件内部不包含任何内容时,`Vue2.x` 编译是空的,`Vue3.x` 编译内部包含 `render` 函数,返回为 `null`\n\n![](https://img2020.cnblogs.com/blog/1069051/202103/1069051-20210317164651884-2015931498.png)\n\n2、放入一个 `Dom`, 可以看到 `vue2.x` 和 `vue3.x` 编译的部分完完全全重构了,之前 `Vue2.x` 采用,`_c` 的模式创建标签,`_v` 为 `Vnode` 节点, 而当前的 `Vue3.x` 通过 `_createBlock` 生成 `block tree`\n\n- Vue2.x 数据更新并触发重新渲染的粒度是组件级的,单个组件内部需要遍历该组件的整个 `vnode` 树\n- Vue3.x 做到了通过编译阶段对静态模板的分析,编译生成了 `Block tree`。`Block tree` 是一个将模版基于动态节点指令切割的嵌套区块,每个区块内部的节点结构是固定的。每个区块只需要追踪自身包含的动态节点。\n\n![](https://img2020.cnblogs.com/blog/1069051/202103/1069051-20210317165132177-999294682.png)\n\n3、新引入`Fragments`(片段)\n\n特性:`Vue3.x` 模板中不需要再创建一个唯一的根节点,模板里可以直接放文本内容或者很多同级的标签, `Vue2.x` 需要唯一的节点\n\n![](https://img2020.cnblogs.com/blog/1069051/202103/1069051-20210317173150399-1519018814.png)\n\n4、静态提升:静态节点都会被提升到 `render` 的外部,只有初始化时会被创建,再次调用 `render` 时不会再次创建,可以直接重用这些静态节点对应的 `vnode`\n\n5、Patch flag\n\n`Patch flag` 大部分是在编译的时候被用到,比如 `SFC` 在被 `vue-loader` 编译的时候,或者 `JSX` 在被 `JSX` 插件编译的时候,这些编译器在编译的过程中会进行判断是否需要用到 `patchFlags`,以此来优化 VUE 应用更新的速度。\n\n6、缓存事件处理函数减少了不必要的更新操作\n\n## 三、源码体积的优化\n\n1、Vue.js 3.x 移除了一些不常用的API\n\n例如:inline-template, filter 等\n\n2、Tree-shaking\n\n`Tree-shaking` 就是把无用的模块进行“剪枝”,很多没有用到的API就不会打包到最后的包里。\n\n`Tree-shaking` 的原理是: 依赖 ES2015 模块语法的静态结构(即 `import` 和 `export`),通过编译阶段的静态分析,找到没有引入的模块并打上标记。\n\n\n参考链接:\n\n- https://www.cnblogs.com/gqx-html/p/14543564.html\n- https://www.136.la/jingpin/show-132219.html\n\n"
PS:写作不易,如要转裁,请标明转载出处。

如果此篇对您有帮助,可小额赞助,以兹鼓励!

猜你想看