一、生命周期
| Vue2 | Vue3 | 说明 |
|---|---|---|
| beforeCreate | setup ()—— 开始创建组件 | |
| created | setup ()—— 开始创建组件 | |
| beforeMount | onBeforeMount—— 组件挂载到页面之前执行 | |
| mounted | onMounted—— 组件挂载到页面之后执行 | |
| beforeUpdate | onBeforeUpdate—— 组件更新之前 | |
| updated | onUpdated—— 组件更新之后 | |
| beforeDestroy | onBeforeUnmount—— 销毁前 | |
| destroyed | onUnmounted—— 销毁后 |
二、属性定义
示例代码如下：
import { reactive, toRefs, onMounted } from "vue";
const state = reactive({ name: 1 });
const { name } = toRefs(state);
// 修改属性值：name.value = xxx 或 state.name = xxx；
其中，Reactive用于实现响应式数据，toRefs可转换为单独的响应式数据。
三、Watch 监听
watch(name, (newVal, oldVal) => {
Name.value = newVal;
}, { deep: true, immediate: true });
四、Mixins
示例文件为Mixins.js。
使用
方法可参考站内使用反馈页面。
备注：由于mixins.js有可能被多个页面使用，所以可以在utils/mixins文件夹下重新建文件，改造成 3.0 语法后引用使用。
五、计算属性
import { reactive, computed } from 'vue';
let obj = reactive({
firstName: '1',
lateName: '2'
});
obj.fullNum = computed({
get() {
return obj.firstName + '-' + obj.lateName;
},
set(value) {
const nameArr = value.split('-');
obj.firstName = nameArr[0];
obj.lateName = nameArr[1];
}
});
六、Ref
import { ref } from 'vue';
<span ref=”searchForms ”></span>
const searchForms = ref();
// 使用：searchForms.value.xxx
备注：ref名字必须和const定义的一致。
七、组件传值
1. 父组件向子组件传值
子组件接收示例：
const props = defineProps({
scroll: {
type: Boolean,
default: () => true
}
});
2. 父组件调用子组件里的方法和属性
父组件：
import { ref } from 'vue';
<span ref=”searchForms ”></span>
const searchForms = ref();
createTickets.value.setCreateForm(initDetail.value);
createTickets.value.setFirstData(true);
子组件：
import { defineExpose } from 'vue';
defineExpose({
setCreateForm,
setFirstData(value) {
createModel.value = value;
}
});
八、动态组件引用
示例：
<component :is="currentName" />
import { defineAsyncComponent } from 'vue';
const currentName = defineAsyncComponent(() => import("./detail.vue"));
九、Pinia (状态管理器)
结构
import { defineStore } from 'pinia';
export const useEnterpriseStore = defineStore('enterprise', {
state: () => ({
enterprise: {
id: ''
}
}),
getters: {
// 相当于 state 的计算属性
},
actions: {
// 状态操作
getEnterprise() {}
}
});
使用
import { storeToRefs } from 'pinia';
import { useEnterpriseStore } from '@stores/enterprise';
const enterpriseStore = useEnterpriseStore();
const { enterprise } = storeToRefs(enterpriseStore);
十、$ref 语法糖使用
配置
在vite.config.js中配置：
export default { plugins: [ vue({ reactivityTransform: true }) ] };
使用
let count = $ref(0);
count++;
十一、重置属性为初始状态
示例：
const state = reactive({
object: {
name: '111'
}
});
const { object } = toRefs(state);
const _form = JSON.parse(JSON.stringify(object.value)); // 深拷贝初始对象
object.value = _form;
十二、keep-alive 页面缓存
Vue3 的页面缓存与 Vue2 不同。在 Vue2 中，只需在需要缓存的页面定义好组件名即可，但在 Vue3 的setup语法糖中会失效。
方式一
通过写两个script标签来解决，一个使用setup，一个不使用。
示例：
<template>
<input type="text" v-model="value">
</template>
<script setup lang="ts">
import { ref } from "vue";
const value = ref("测试添加 name");
</script>
<script lang="ts">
export default {
name: 'testAddName'
};
</script>
方式二
借助vite-plugin-vue-setup-extend插件。
- 安装插件：
npm install vite-plugin-vue-setup-extend --save。 - 配置
vite.config.ts：
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import VueSetupExtend from 'vite-plugin-vue-setup-extend';
export default defineConfig({
plugins: [
vue(),
VueSetupExtend()
]
});
3. 在组件中使用：
<script name='testAddName'></script>
<script setup name='testAddName'></script>
十三、修改组件原有样式可使用 :deep () 深度作用选择器
- Vue2 写法：
/deep/.span-cls {
width: 120px;
}
- Vue3 写法：
:deep(.span-cls) {
width: 120px;
}
十四、Vue3 中使用 this
import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
// 这里 proxy 相当于 this
十五、watch 监听里最好使用 nextTick
在watch监听中调用方法最好是等组件加载完再调用。
示例：
watch(() => router.currentRoute.value, (newRouter) => {
if (newRouter.name == 'after_sale_user_ticket_detail') {
nextTick(() => {
ticketDetail();
});
}
}, { deep: true, immediate: true });
十六、个别组件建议使用 element ui 里的组件
例如：el-tabs、el-card。
原因：项目中既有iview，又有element，组件冲突，有些iview组件无法使用。
十七、iview、element Vue3.0 版本组件库地址
- iview：www.iviewui.com/
- element：element-plus.gitee.io/zh-CN/#%E7%…
备注：
- 拉取代码前请先把
node版本升级到 16+，最好配置多个版本，便于不同项目切换。
