插槽

Vue3<template #default="scope"></template>
<template #footer></template>Vue2<template slot-scope="scope"></template>
<template slot="footer"></template>

JS定义

Vue3
<script setup>
defineOptions({name: 'User',
})
</script>Vue2
<script>
export default {name: 'User',
}
</script>

变量定义和赋值

Vue3
const path = ref(import.meta.env.VITE_BASE_API + '/')const page = ref(1)
const total = ref(0)Vue2
const path = process.env.VUE_APP_BASE_API + '/';data() {return {page: 1,total: 0,};
},

方法定义

Vue3const setAuthorityOptions = (AuthorityData, optionsData) => {});Vue2methods: {setAuthorityOptions(AuthorityData, optionsData) {},},

Vue3// 分页const handleSizeChange = (val) => {pageSize.value = valgetTableData()}Vue2methods: {// 分页handleSizeChange(val) {this.pageSize = val;this.getTableData();},},

mounted

Vue3
initPage()Vue2mounted() {this.initPage();},

watch

Vue3
watch(() => tableData.value, () => {setAuthorityIds()
})Vue2
watch: {tableData(val, oldVal) {this.setAuthorityIds();},
},

elementUI的message

Vue3
import { ElMessage } from 'element-plus'
ElMessage({ type: 'success', message: '角色设置成功' })Vue2
this.$message({ type: 'success', message: '角色设置成功' });

nextTick

Vue3
nextTick();Vue2
this.$nextTick();