静态文本
静态文本
{{ message }}
静态文本
...静态文本
vue3.md 18 KB
Vue2 与 Vue3 的区别
Vue3由于完全由TS进行重写，在应用中对类型判断的定义和使用有很强的表现。同一对象的多个键返回值必须通过定义对应的接口（interface）来进行类型定义。要不然在 ESLint 时都会报错。
vue2 的双向数据绑定是利用 ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。Vue3 中使用了 es6 的 ProxyAPI 对数据代理。
Vue3支持碎片(Fragments)
Vue2 与 Vue3 最大的区别: Vue2 使用Options API而 Vue3 使用的Composition API
Composition API 中，所有的逻辑可以集中在一个名为 setup() 的函数内定义，并根据功能进行分组和模块化。
声明响应式状态的方式
ref() reactive() shallowRef() shallowReactive()
生命周期钩子变化
Vue2 ~~~~~~~~~~~ vue3
beforeCreate -> setup()
created -> setup() // 实例没有创建，不能访问上下文
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
activated -> onActivated
deactivated -> onDeactivated
{{ message }}
性能提升
vue3 => {
编译阶段
源码体积
响应式系统
}
• diff 算法优化
• 静态提升
• 事件监听缓存
• SSR 优化
1.diff 算法
vue3 在 diff 算法中相比 vue2 增加了静态标记
关于这个静态标记，其作用是为了会发生变化的地方添加一个 flag 标记，下次发
生变化的时候直接找该地方进行比较
2.静态提升
Vue3 中对不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复
用
这样就免去了重复的创建节点，大型应用会受益于这个改动，免去了重复的创建操
作，优化了运行时候的内存占用
你好
{{ message }}
3.事件监听缓存
未开启事件监听器缓存：
你好
... // 很多个静态属性
{{ message }}
源码体积
相比 Vue2，Vue3 整体体积变小了，除了移出一些不常用的 API，再重要的是 Tree
shanking
任何一个函数，如 ref、reavtived、computed 等，仅仅在用到的时候才打包，没
用到的模块都被摇掉，打包的整体体积变小
Tree shanking的作用
1、减少程序体积（更小）
2、减少程序执行时间（更快）
3、便于将来对程序架构进行优化（更友好）
响应式系统
状态管理 pinia
由于 vuex 4 对 typescript 的支持度较低，所以状态管理弃用了 vuex 而采取了 pinia. pinia 的作者是 Vue 核心团队成员
尤大好像说 pinia 可能会代替 vuex，所以请放心使用。
安装 pinia
Pinia 与 Vuex 的区别：
id是必要的，它将所使用 store 连接到 devtools。- 创建方式：
new Vuex.Store(...)(vuex3)，createStore(...)(vuex4)。 - 对比于 vuex3 ，state 现在是一个
函数返回对象。 没有
mutations，不用担心，state 的变化依然记录在 devtools 中。# 安装 yarn add pinia@next
main.ts 中增加
# 引入
import { createPinia } from "pinia"
# 创建根存储库并将其传递给应用程序
app.use(createPinia())
在 src 文件夹下新增 store 文件夹,接在在 store 中新增 main.ts
创建 store, main.ts :
import { defineStore } from 'pinia'
export const useMainStore = defineStore({
id: 'main',
state: () => ({
name: '超级管理员',
}),
})
组建中获取 store :
<template>
<div>{{mainStore.name}}</div>
</template>
<script setup lang="ts">
import { useMainStore } from "@/store/main"
const mainStore = useMainStore()
</script>
getters 用法介绍
Pinia 中的 getter 与 Vuex 中的 getter 、组件中的计算属性具有相同的功能
store => main.ts
import { defineStore } from 'pinia'
export const useMainStore = defineStore({
id: 'main',
state: () => ({
name: '超级管理员',
}),
// getters
getters: {
nameLength: (state) => state.name.length,
},
})
组件中使用:
<template>
<div>用户名:{{ mainStore.name }}<br />长度:{{ mainStore.nameLength }}</div>
<hr/>
<button @click="updateName">修改store中的name</button>
</template>
<script setup lang="ts">
import { useMainStore } from '@/store/main'
const mainStore = useMainStore()
const updateName = ()=>{
// $patch 修改 store 中的数据
mainStore.$patch({
name: '名称被修改了,nameLength也随之改变了'
})
}
</script>
/* $patch 方法在 Vue.js 或者与 Vue 生态相关的状态管理库（如 Vuex 或 Pinia）中常用于局部更新或合并现有状态。这个方法允许你以部分更新的方式修改 store 中的状态，而无需替换整个状态对象。
在 Pinia（Vue3 的状态管理库）中，store.$patch 方法用来直接对 store 状态进行部分更新，例如： */
actions
这里与
Vuex有极大的不同，Pinia仅提供了一种方法来定义如何更改状态的规则，放弃mutations只依靠Actions，这是一项重大的改变。
Pinia 让 Actions 更加的灵活：
- 可以通过组件或其他
action调用 - 可以从其他
store的action中调用 - 直接在
store实例上调用 - 支持
同步或异步 - 有任意数量的参数
- 可以包含有关如何更改状态的逻辑（也就是 vuex 的 mutations 的作用）
可以
$patch方法直接更改状态属性import { defineStore } from 'pinia' export const useMainStore = defineStore({ id: 'main', state: () => ({ name: '超级管理员', }), getters: { nameLength: (state) => state.name.length, }, actions: { async insertPost(data: string) { // 可以做异步 // await doAjaxRequest(data); this.name = data }, }, })
composition API 与 options API
在 Vue2 中，我们用过 mixin 去复用相同的逻辑
Mouse position: x {{ x }} / y {{ y }}
使用单个 mixin 似乎问题不大，但是当我们一个组件混入大量不同的 mixins 的时
候
mixins: [mousePositionMixin, fooMixin, barMixin, otherMixin]
会存在两个非常明显的问题：
• 命名冲突
• 数据来源不清晰
现在通过 Compositon API 这种方式改写上面的代码
Mouse position: x {{ x }} / y {{ y }}