vue2项目升级到vue3
vue2项目升级到vue3
·
vue2项目升级到vue3
- 本地环境升级,npm\node\vue-cli
- 根据官方package.json 依赖包进行调整和升级(把依赖库全部删除,调整package.json文件内容,重新下载依赖库,运行后解决报错)
- 内容适配(main.js修改 element\echart 版本不同,引入方法不同)
- 跑项目,挨个解决错误
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>
更多推荐
已为社区贡献2条内容
所有评论(0)