今天看了vue2升迁vue3相关知识，这里列举一部分比较常用的不同之处
v-for数组中的ref属性的使用（这个属性是非兼容的）
- vue2: 使用this.$refs[属性名]的方式获取到一个元素数组
<div v-for="(item,index) in list" ref="setItemRef" :key="index">
{{item.name}}
</div>
<button @click="getRef">获取ref</button>
export default {
data() {
return {
list: [
{ name: '小钱1'},
{ name: '小花'}
]
};
},
methods: {
getRef() {
console.log(this.$refs.setItemRef) // (2) [div, div]
}
}
}
- vue3:
不再通过this.$refs方式获取，而是通过一个同名函数去获取对应元素，这个函数，你只需要定义，vue3会自调用它，不需要手动调用。
此外，可以使用一个数组对象来保存获取到的元素集合，它返回是一个类数组的Proxy对象，这样还可以起到防止用户直接篡改数组来改变元素
<div v-for="(item,index) in list" ref="setItemRef" :key="index">
{{item.name}}
</div>
<button @click="getRef">获取ref</button>
export default {
data() {
return {
itemRefs: []
}
},
methods: {
setItemRef(el) {
this.itemRefs.push(el)
}，
getRef() {
console.log(this.itemRefs) // 类数组的Proxy对象，[div, div], itemRefs可以定义为数组，也可以定义为对象
}
}
}
$children
vue2中可以通过this.$children获取当前组件的所有子组件对象
vue3中已删除此API，可以使用this.$ref[子组件的ref名称]来替代获取
插槽的改变
vue2.5以前，插槽的使用方式是：
<!-- slot-comp -->
<template>
<div>
<slot name="hasData" :data="data" age="18"></slot>
</div>
</template>
<!-- parent -->
<slot-comp>
<!-- 传统写法：带数据的插槽, slotData是所有写在slot插槽上的属性集合 -->
<template slot="hasData" slot-scope="slotData">
<!-- { "data": [ 1, 2, 3 ], "age": "18" } -->
{{slotData}}
</template>
</slot-comp>
vue2.6时，已改为v-slot的方式，文档中虽然说废除之前的传统写法，但在实际中，还是向下兼容的，所以在vue2中使用哪种方式目前都是可以的
<!-- slot-comp -->
<template>
<div>
<!-- 带数据的插槽：作用域插槽 -->
<slot name="hasData" :data="data" age="18"></slot>
</div>
</template>
<!-- parent -->
<slot-comp>
<!-- 缩写写法： <template #:hasData="data"> -->
<template v-slot:hasData="data">
<!-- { "data": [ 1, 2, 3 ], "age": "18" } -->
{{data}}
</template>
</slot-comp>
在vue3时，不再向下兼容，只支持v-slot的写法（也可以缩写为#）：
在element-ui中就使用的是vue2.5以前的传统插槽方式；
element-plus就改为了vue3支持的#(v-slot)写法，所以说element-ui不支持vue3也有这个原因
响应式
- vue2的响应式是使用defineProperty来对数据劫持的，它有大的局限性：
- 需要遍历data中的对象，来绑定劫持数据，如果对象嵌套对象，那么需要递归遍历调用defineProperty来实现响应式，当对象嵌套很深时，对性能消耗会很大
- 不支持数组中对象的响应式，包括现在还有这个bug，通过数组下标改变一下对象，是无法做到响应式的；尤大大自己也回复说，是因为性能问题，所以才没实现，这还是跟第1个递归遍历有关，当嵌套过多，性能会比较差
export default {
data() {
return {
list: [
{ name: '小钱1'},
{ name: '小花'}
]
};
},
methods: {
change() {
this.list[0] = { name: '小飞' } // 在页面中是不响应的
}
}
}
- 不支持对象的增加或删除响应式
- vue3使用Proxy，它自然地监听对象下的所有属性，解决了vue2响应式的问题，因为不需要递归去遍历，所以它本身的性能就很好
composition API
- vue2支持的是options API：
当我们要修改一个变量时，它如果涉及到很多地方，比如data中定义，在某个methods中修改，然后可能watch时也会修改，业务代码是离散的；
当文件很大时，每次修改相关业务，我们都要滑动鼠标去查找对应的好些地方才能修改完，一个是麻烦，二个是很容易漏改某处，开发体验不是很好。
- vue3支持composition API，它将业务有联系的代码统一放到setup函数中，当修改时，我们可以集中修改这块业务代码
- 开发体验好，修改起来集中且容易查找
- 因为业务代码集中，更灵活的逻辑组织，方便拆分和抽象组件，更利于组件复用
- 没有this，再也不用纠结this上到底有什么
- 更友好的tree-shaking支持
- 更大的代码压缩空间
- 更好的类型推导能力（typescript），因为setup本质是一个函数，它的输入和输出是固定的，所以能更好推导类型
composition API语法
compostion API都是写在一个setup的方法中：
- 一般使用ref来定义基础类型数据
- 使用reactive来定义数组或对象
- 跟上面变量相关的方法也都定义在setup方法中，定义写法和普通的方法一样
- 无论定义的是什么，都要return出去才生效
- setup的生命周期:
- setup是在beforeCreate生命周期前执行：setup -> beforeCreate -> created
- setup中也有自己的生命周期函数，即vue的生命周期(除了beforeCreate和created两个)前加'on'，就是它的生命周期倒数，比如onMounted，但是所有生命周期都必须写在return前面
- 要使用的生命周期必须从vue导入(PS：之前的ref、reactive定义变量的方法也要导入)
composition API的实现：
// 导入ref, reactive, onMounted
import { reactive, computed, onMounted } from 'vue'
export default {
setup() {
console.log('setup')
// 基础类型的定义
const x = Ref(x)
// 数组或对象定义
const obj = reactive({
name: 'xx',
list: ['xxx']
})
function changeX() {
x.value = 22
obj.name = 'xxx'
}
// setup中的生命周期
onMounted() {
obj.name = 'xx2'
}
// 无论是什么，都必须return出去才生效
return {
x,
obj,
changeX
}
},
beforeCreate() {
console.log('beforeCreate')
},
created() {
console.log('created')
}
}
项目升级评估（是否要从vue2升级到vue3）：
项目量级及业务需求
如果项目非常大（比如沉淀好几年的老项目，基数非常大），且业务非常复杂（需求不熟悉的话根本理不清，改一处n个bug那种），建议不要升！
业务对技术升级是不是有要求，有要求才升级，不要因为想使用新技术而升级，要从业务角度出发团队能力
如果团队能力水平参差不齐的话，有的人对vue3很了解，有的人压根不会，那很有可能因为团队能力不齐导致升级失败不兼容代码评估
一定一定要参考官网升迁文档：https://vue3js.cn/docs/zh/guide/migration/functional-components.html#_2-x-%E8%AF%AD%E6%B3%95
明确升迁的变动范围和成本第3方扩展插件评估
评估下原项目使用的插件，在vue3中是否已经有了对应的升迁扩展，目前vuex,vue-router,element-plus都支持vue3的版本，但还要考虑项目中其它插件综合成本评估
从人力、时间、花费等方面去综合考虑
详细的还是推荐大家仔细阅读下官网：
https://v3.vuejs.org/guide/introduction.html#conditionals-and-loops
https://vue3js.cn/docs/zh/guide/migration/functional-components.html#_2-x-%E8%AF%AD%E6%B3%95
