-
双向数据绑定
vue2 根据es5 object.definePropert 劫持数据 修改其中的get set 方法实现
vue3 根据es6 新增api Proxy 数据监听
优缺点
vue2 使用defiePropert 监听的是某个属性 导致了直接更改属性或者下标的时候导致页面不会跟着刷新
vue3的Proxy 可以监听数组 对象。不需要在可以的去对数组对象进行特意的操作。
导致vue3相应速度更快 -
api类型
vue2 是data methods 是选项类型
vue3 提供了不同的方法。 属于组合式
优缺点
vue2 所以的变量写一起。方法写一起。在稍微业务繁琐的页面就会导致开发的时候翻来覆去的找。不利于维护和开发
vue3 根据新的api 特性可以分割不同的业务，这样代码会更加简便和整洁。利于维护，开发 -
template 内容碎片化
这个我很喜欢。可以写不同的根。vue3新增 -
变量的定义不同
vue2 数据变量必须定义在 data(){} 方法要放在 methods内
vue3 则不需要 -
生命周期
vue2beforeCreate 组件创建之前
created 组件创建之后
beforeMount 组价挂载到页面之前执行
mounted 组件挂载到页面之后执行
beforeUpdate 组件更新之前
updated 组件更新之后
beforeDestroy 组件销毁前
destroyed 组件销毁vue3
setup 可以代 beforeCreate created
onBeforeMount
onMounted
onBeforeUpdate
onUpdated
onBeforeUnmount
onUnmounted -
vue3新增的响应式相关的函数
新增 ref reactive ，readonly，computed，watch，watchEffect -
vue3 watchEffect
这个监听会第一次就监听 而wacth不会 -
setup法糖
这里组件直接引入就好不需要再写入components中
直接声明变量 使用ref reactive 等。
这里没有this
会用到 defineProps defineEdmits defineAttrs 等语法
因为使用这个语法糖会导致很多都需要引入 ref reactive 这里用到了一个autoimport 自动引入插件 -
特殊api activeed
在keepalive 下使用 组件激活 -
关于首屏加载慢的问题
1、 公共js库 使用页面引入。
2、 路由使用懒加载。使用的时候加载js
3、可以加loading 增加体验 -
vuex pinia
少了mutations
