Vue3基础

一、Vue3的历程与特性

Vue3:两年开发，99位贡献者、2600次提交，628次PR。

Vue3支持Vue2的大多数特性。

Vue3的官方网站

1.性能提升

• 打包大小减少41%
• 初次渲染快55%，更新快133%
• 内存使用减少54%

2.Composition API

• ref和reactive
• computed和watch
• 新的生命周期函数
• 自定义函数-Hooks函数

3.其他新增特性

• Teleport-瞬移组件的位置
• Suspense-异步加载组件的新福音
• 全局API的修改和优化
• 更多试验性特性

二、为什么要有Vue3

Vue2遇到的难题

• 随着功能的增长，复杂组件的代码变得难以维护。
• vue2对于typescript的支持非常有限。

三、Vue3新增API

//mapping vue2 to vue3
beforeCreate -> use setup()
created -> use setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onBeforeUnmount
destroyed -> onUnmounted
activated -> onActivated
deactivated -> onDeactivated
errorCaptured -> onErrorCaptured
//added
onRenderTracked
onRenderTriggered

四、组件的理念

1.Setup函数的使用

//setup为created实例被完全初始化之前执行的函数
setup(props,context){
    return {
  }
}

2.ref,reactive响应式的引用

原理：通过proxy对数据进行封装，当数据变化时，触发模板等内容的更新。

let name = 'abc'
//ref处理基础型数据，通过proxy将'abc'变成proxy({value:'abc'})
let name = ref('abc')

//reactive处理非基础类型的数据
const nameObj = reactive({name:'abc'})
const nameObj = reactive([123])

//readonly只读方法
const nameObj = readonly(nameObj)

//toRefs解决了解构赋值不是响应式数据的问题
//toRefs原理是：proxy({name:"abc"})=>{name:proxy({value:"abc"})}
const {name} = toRefs(nameObj)

五、Vuex

具体实现步骤：

• 1.dispatch方法，派发一个action，名字叫做change

this.$store.dispatch('change')

• 2.感知到change这个action，执行store中actions下面的change方法
• 3.提交commit一个叫做change的数据改变

this.commit('change')

• 4.mutation感知到提交的change改变，执行change方法改变数据