vue3和vue2核心区别

时间：2023-8-12 10:55 作者：小诸葛 分类： Vue 正在检查是否收录...

一: 底层代码区别

vue3完整支持typescript, 底层代码有90%都采用ts进行架构
项目代码更严谨, 维护性更高, 可持续迭代N年

二: 响应式区别

vue3使用proxy来代理所有响应式数据

vue2使用defineProperty来拦截响应式数据(1.一次只能拦截1个key 2.无法很好的响应数组的变化)

三: This指向

vue3采用compositionAPI, 所有代码逻辑放在setup作用域中, 完全去掉this
vue2采用this访问自身挂载的所有属性/函数/计算属性等

四: 底层运行变化(v3底层代码完全重构,实现改变了很多诺)

vue3 v-if优先级高于v-for( if比for高 )

vue2 v-for优先级高于v-if

五: Fragment / 模板变简单了

vue3 采用了虚拟父级, 可以多个根节点

vue2 只支持1个根节点

六: 语法逻辑变换

vue3 compositionAPI, 组合式API, 逻辑更为紧密 (setup)

vue2 选项式语法, 所有逻辑独立放在自己的标签属性中

---------------------------------小区别-------------------------------------

7: 生命周期

vue3采用setup进行数据初始化(setup === beforeCreate + created)

其他周期使用hooks方式 onMounted() onUpdated() onUnmounted() //都有之前之后( 6 + 1setup ), 还有其他辅助生命周期,不是只有这6+1个

vue2采用 create2 mount2 update2 destory2

8: 组件通信

vue3采用hooks方式

8.1 定义props及使用

const p = defineProps({
key: { 约束 }
})
//p.key

8.2 定义emits及使用

const $e = defineEmits(['事件1','事件2',.....])
//$e('事件1', 参数)

vue2采用this

8.3 定义props及使用(vue2所有的props接收到就会挂载组件this上)

props: {
key: {约束 }
}
//this.key

8.4 定义emits及使用

this.$emit('自定义事件', 参数)

9: style支持动态属性

.cls{
color: v-bind(mycolor) //基础响应数据
color: v-bind('mycolorobj.col') //引用响应数据
}

10: Teleport 任意组件传送门

vue3独有, 可以把Teleport标签, 添加到HTML的任意元素中(html,body,等....)

2.vuex和pinia

pinia:

完整支持ts及ts的各种扩展
完整支持composition的写法 reactive ref, function ()=>{}, computed()
轻量级, 去掉vuex中复杂的功能及特性(去掉了mutations, modules), 更轻巧
核心属性: state状态, action改变+异步, getters计算属性
支持插件的安装, 能给pinia再次安装插件

核心语法

5.1 定义

export const xxxstore = defineStore('storeid', () => {
//1. 定义交互状态
var obj = reactive({ id: 1, name: '张三', age: 20})

//2. 定义改变/异步 
var changeName = (val) => {
obj.name = val
}
//3. 计算 
var newage = computed(() => {
return obj.age += 10
})

return {
obj,
changeName,
newage
}
})

5.2 使用 main.ts使用pinia

import { createPinia } from 'pinia'
app.use( createPinia() )

//5.3 在组件中使用
import { xxxstore } from '刚才那个store文件路径'
import { storeToRefs } from 'pinia'
//使用storeToRefs响应式解构
const store对象 = xxxstore()

var { obj } =  storeToRefs(store对象) //获取动态数据
store对象.changeName()  //调用函数改变pinia的值
store对象.newage   //获取pinia中的计算属性