vue2项目升级到vue3

vue2项目升级到vue3

1. 本地环境升级，npm\node\vue-cli
2. 根据官方package.json 依赖包进行调整和升级（把依赖库全部删除，调整package.json文件内容，重新下载依赖库，运行后解决报错）
3. 内容适配（main.js修改   element\echart 版本不同，引入方法不同）
4. 跑项目，挨个解决错误

element-ui升级到element-plus

1、slot 、slot-scope

slot="title"   ->  v-slot:title

slot-scope="scope"   ->#default="scope"

2、生命周期

destroyed -> unmounted
beforeDestroy -> brforeUnmount

3、.sync

:title.sync ="count"  ->v-model:titile="count"

4、button中size   medium再elementPlus已去掉，可删除或调整为large  

5、menu菜单中存在二级菜单 el-submenu 调整为el-sub-menu

vue2升级到vue3

1、vue-router不再使用原来的写法，用slot插槽代替

//原来写法
<section class="app-main">
    <transition
      name="fade-transform"
      mode="out-in"
    >
      <keep-alive :include="isCached">
        <router-view :key="key" />
      </keep-alive>
    </transition>
  </section>


//调整后
<router-view v-slot="{ Component }">
  <transition name="fade-transform" mode="out-in">
    <keep-alive :include="isCached">
      <component :is="Component" />
    </keep-alive>
  </transition>
</router-view>

2、自定义指令和组件

局部自定义和全局自定义指令需要挂载到cerateapp中，另自定义指令内部钩子函数也进行调整

//调整前
bind: 只调用一次，指令第一次绑定到元素时调用，可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的值来忽略不必要的模板更新。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次， 指令与元素解绑时调用。

//调整后
created - 元素创建后，但是属性和事件还没有生效时调用。
beforeMount- 仅调用一次，当指令第一次绑定元素的时候。
mounted- 元素被插入父元素时调用.
beforeUpdate: 在元素自己更新之前调用
Updated - 元素或者子元素更新之后调用.
beforeUnmount: 元素卸载前调用.
unmounted -当指令卸载后调用，仅调用一次

3、父子组件传值，props不自动更新

props自动更新问题

props:['data1'],
setup(props){
    {data1} = toRefs(props)
//方法内调用需要做监听
watch(() =>props.data1,(newVal, oldVal)=>{})
//其他方法内调用data1的值
props.data1

    

//  template可直接试用data1，页面自动更新
return {data1}
}

4、父组件调用子组件内的方法

1、
//子组件
<script setup>

    const submitData() =>{}
    //注意，需要defineExpose导出，父组件才能使用
    defineExpose({submitData})
   
</script>

//父组件
<template>
//子组件
    <div ref="divRef"></div>
</template>
<script>
import {ref} from 'vue'
setup(){
    const divRef = ref('')
    //用来获取子组件的值
    divRef.value.submitData()
    return {divRef }
}
</script>