1、 Vue2.0 和 Vue3.0 有什么区别?
vue2和vue3双向数据绑定原理发生了改变。
vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 ,结合发布订阅模式的方式来实现的。vue3 中使用了 es6 的 ProxyAPI 对数据代理。Vue3支持碎片(Fragments),就是说在组件中可以拥有多个根节点。
Vue2与Vue3 最大的区别 — Vue2使用选项类型API,Vue3合成型API。旧的选项型API在代码里分割了不同的属性: data,computed属性,methods,等等。新的合成型API能让我们用方法(function)stup(){}来分割,相比于旧的API使用属性来分组,这样代码会更加简便和整洁。
建立数据 data。Vue2把数据放在data中,在Vue3中,我们就需要使用一个新的setup()方法,此方法在组件初始化构造的时候触发。
使用以下三步来建立反应性数据:
从vue引入reactive
使用reactive()方法来声名我们的数据为响应性数据
使用setup()方法来返回我们的响应性数据,从而我们的template可以获取这些响应性数据
2. vue3的带来的好处
- 打包大小减少41%
初次渲染快55%, 更新渲染快133%
内存减少54%
重写虚拟DOM的实现和Tree-Shaking
使用Proxy代替defineProperty实现响应式
Vue3可以更好的支持TypeScript
移除keyCode作为 v-on 的修饰符,同时也不再支持
config.keyCodes
移除
v-on.native
修饰符移除过滤器(filter)
过滤器虽然这看起来很方便,但它需要一个自定义语法,打破大括号内表达式是 “只是 JavaScript” 的假设,这不仅有学习成本,而且有实现成本!建议用方法调用或计算属性去替换过滤器。新的生命周期钩子
beforeDestroy
改名为beforeUnmount
destroyed
改名为unmounted
Vue3.0与Vue2.x中钩子对应关系如下:
beforeCreate===>setup()
created=======>setup()
beforeMount ===>onBeforeMount
mounted=======>onMounted
beforeUpdate===>onBeforeUpdate
updated =======>onUpdated
beforeDestroy ==>onBeforeUnmount
destroyed =====>onUnmounted
data 选项应始终被声明为一个函数