Vue3 构建应用的重大变化

47 阅读1分钟

创建方法对比

对比 vue2,vue3 去掉了 Vue 构造函数,转而用 createApp 创建 vue 应用。

这种方法更灵活,甚至可以在同一个项目中创建两个独立的 vue 应用。

<div id="app1"></div>
<div id="app2"></div>
...
createApp(App).mount("#app1")
createApp(App).mount("#app2")

vue2 构造函数继承了太多功能,不利于 tree shaking,vue3 把这些功能使用普通函数导出,能利用 tree shaking 优化打包体积。

createApp 创建的是个 vue 应用,不再是组件,设计概念清晰。

使用数据时只能使用 proxy 包装后提供的方法,不能再随意使用以 _ 开头的内部方法了。

数据响应式对比

Vue3 和前代一样,都是在 beforeCreate 之后、 created 之前完成了响应式,但做法不同:

  • vue2 会对所有数据进行递归遍历 defineProperty 包装。

image.png

  • vue3 会对目标数据进行 proxy 代理。

image.png

proxy 的优势:

  • proxy 本身的效率就比 defineProperty 高,因为通过反射等更底层的方法,直接从内存中拿数据。

  • proxy 可以监听到属性成员的新增和删除。

  • vue3 是动态的,只有读的时候才会返回读取的值:访问对象就返回一个新的 proxy,访问普通属性就直接返回值 ,极大提升了组件在初始阶段的效率。