vue3学习

Vue3带来了什么

1.性能的提升
打包大小减少了41%
初次渲染快了55%，更新渲染快了133%
内存减少54%

2.源码的升级
使用Proxy代替defineProperty实现响应式
重写虚拟DOM的实现和Tree-Shaking

3.拥抱TypeScript
Vue3可以更好的支持TypeScript

4.新的特性
1)Composition API（组合API）
·setup配置
·ref与reactive
·watch与watchEffect
·provide与inject
------------------------------------------------------------------
2)新的内置组件
·Fragment
·Teleport
·Suspense
------------------------------------------------------------------
3)其它改变
·新的生命周期钩子
·data选项应该始终被声明为一个函数
·移除keyCode支持作为v-on的修饰符

需要注意

需注意vuex和router的版本需要4.0以上

Vue2 和 Vue3的区别

相互对比

Vue3由于完全由TS进行重写，在应用中对类型判断的定义和使用有很强的表现。同一对象的多个键返回值必须通过定义对应的接口（interface）来进行类型定义。要不然在 ESLint 时都会报错。

vue2 的双向数据绑定是利用 ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。Vue3 中使用了 es6 的 ProxyAPI 对数据代理。

Vue3支持碎片(Fragments)

Vue2 与 Vue3 最大的区别: Vue2 使用Options API而 Vue3 使用的Composition API

生命周期钩子变化:

Vue2 ~~~~~~~~~~~ vue3

beforeCreate  -> setup()
created       -> setup()
beforeMount   -> onBeforeMount
mounted       -> onMounted
beforeUpdate  -> onBeforeUpdate
updated       -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed     -> onUnmounted
activated     -> onActivated
deactivated   -> onDeactivated

声明全局属性对比

// 声明vue2全局属性
Vue.prototype.x = instance
// 使用
this.x

// 声明vue3全局属性
config.globalProperties.x = instance
// 使用
import {
    getCurrentInstance } from 'vue'
const proxy = getCurrentInstance()
proxy.x // x就是全局属性 instance

渲染方式对比

vue2的渲染方法

// vue2通过引入Vue 并使用new Vue方式
import Vue from 'vue'
const vm = new Vue({
   
	renderL h => h(App)
})
vm.$mount('#app')

vue3的渲染方法

// vue3引入的是一个名为createApp的工厂函数
i