tog

浅聊VUE3

VUE3 🎉🎉🎉

分享By 卢方舟

带来的全新的构建工具

Vite

Webpack-build

是一个静态模块打包工具，每个模块组合成n个bundles,静态资源展示。

webpack

webpack-code

                        
                        // a.js
                        const a = () => {...}
                        export { a }

                        // b.js
                        const b = () => {...}
                        export { b }

                        
                        // c.js
                        import {a} from './a.js'
                        import {b} from './b.js'

                        const c = () => a() + b()

                        export { c }

↓

                    
                        // bundle.js
                        const a = ()=>{...}
                        const b = ()=>{...}
                        const c = () => a() + b()

                        export { c }

so vite coming - hmr

                    
    +-----------------+               +-------------------+
   |                 |               |                   |
   |  Vite Dev Server| <-----------  | Browser or Client |
   |                 |               |                   |
   +-----------------+               +-------------------+
           |                                  |
           | (1) Request for module A         |
           | -------------------------------->|
           |                                  |
           | (2) Resolve module A             |
           |                                  |
           | (3) Compile module A             |
           |                                  |
           | (4) Send module A to browser     |
           | <--------------------------------|
           |                                  |
           | (5) Request for module B         |
           | -------------------------------->|
           |                                  |
           | (6) Resolve module B             |
           |                                  |
           | (7) Compile module B             |
           |                                  |
           | (8) Send module B to browser     |
           | <--------------------------------|
           |                                  |
           | ...                              |
           |                                  |
           | (9) Change made to module A      |
           |                                  |
           | (10) Recompile module A          |
           |                                  |
           | (11) Send update to browser      |
           | <--------------------------------|
           |                                  |
           | (12) Update made in browser      |
           |                                  |
           | (13) Apply update to module A    |
           |                                  |
           | (14) Done                        |
           | -------------------------------->|
           |                                  |

vite-compile

vite-demo

vite这种方式会有什么问题呢？

如果模块过多，初始化会带来性能问题。

解决方案

通过optimize指令，进行预构建，原理类似webpack 的 dll-plugin，提前将 package.json 中的dependencies 打包成一个一个ES Module 模块这样在真面初始化时能减少大量请求

vite / webpack实际体验

计算平台-BDCP

| 构建工具 | 启动速度 | 生产构建速度 | |---------|-------|-------| | `vite 2.9` | `127ms` | `7.518s` | | `webpack 4` | `15455ms` | `11.6s` |

Vue 3.0 新特性

Composition Api
响应性 Api

不同的版本，API的颠覆

options api

一个功能分散到了不同的vue的配置项中

composition api

代码根据逻辑功能来组织的，一个功能的所有api会放在一起
更加关注逻辑分离
高内聚，低耦合

options-api

缺点：

mixin逻辑抽离不够灵活
this的多次使用
typescript提示不太友好

composition-api

Page 对比

VUE2-CODE

                    
                            export default {
                                data() {
                                  return {
                                    // 过滤
                                    filters: {},
                                    // 表格
                                    tableData: [],
                                    // 分页
                                    paginations: {}
                                  }
                                },
                                created() {
                                  this.getTableData()
                                },
                                methods: {
                                  // 过滤
                                  filterData() {...},
                                  handleSearch() {...},
                                  // 表格逻辑
                                  getTableData() {...},
                                  handleOperate(row, type) {...},
                                  // 分页逻辑
                                  handleCurrentChange(val) {...}
                                }
                            }

VUE3-CODE

响应性原理

响应式对比

Object.defineProperty()

对属性的读取、修改进行拦截（数据劫持）

Proxy和Reflect

通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。
通过Reflect（反射）: 对源对象的属性进行操作。

性能提升：
Vue3使用了更快的虚拟DOM算法，减少了不必要的DOM操作，并采用了更高效的渲染机制，从而提升了性能。
TypeScript支持：
Vue3原生支持TypeScript，可以提供更好的类型检查和自动补全。
更好的Tree-Shaking：
Vue3使用了静态分析技术，使得Tree-Shaking更加精确和有效。
新的内置指令：
Vue3增加了一些新的内置指令，例如v-model、v-on、v-if等，使得指令的使用更加方便。