创建方法对比
对比 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 包装。
- vue3 会对目标数据进行 proxy 代理。
proxy 的优势:
-
proxy 本身的效率就比 defineProperty 高,因为通过反射等更底层的方法,直接从内存中拿数据。
-
proxy 可以监听到属性成员的新增和删除。
-
vue3 是动态的,只有读的时候才会返回读取的值:访问对象就返回一个新的 proxy,访问普通属性就直接返回值 ,极大提升了组件在初始阶段的效率。