vue2 vue3 写法区别

Vue2.x 和 Vue3.x 生命周期方法的变化：

2.x 生命周期	3.x 生命周期	执行时间说明
beforeCreate	setup	组件创建前执行
created	setup	组件创建后执行
beforeMount	onBeforeMount	组件挂载到节点上之前执行
mounted	onMounted	组件挂载完成后执行
beforeUpdate	onBeforeUpdate	组件更新之前执行
updated	onUpdated	组件更新完成之后执行
beforeDestroy	onBeforeUnmount	组件卸载之前执行
destroyed	onUnmounted	组件卸载完成后执行
errorCaptured	onErrorCaptured	当捕获一个来自子孙组件的异常时激活钩子函数

v-model 用法

vue2.x

方式一：

<ChildComponent v-model="pageTitle" />  
  
<!-- 是以下的简写: -->  
<ChildComponent :value="pageTitle" @input="pageTitle = $event" />

在子组件中，如果要对某一个属性进行双向数据绑定，只要通过 this.$emit('update:myPropName', newValue) 就能更新其 v-model绑定的值。

方式二： TODO

vue3 defineEmits

<ChildComponent v-model="pageTitle" />  
  
<!-- 是以下的简写: -->  
  
<ChildComponent :modelValue="pageTitle" @update:modelValue="pageTitle = $event"/>

script-setup模式下就不能使用 this.$emit去派发更新事件，毕竟没有 this，这时候需要使用前面有介绍到的 defineProps、defineEmits 两个宏来实现： 子组件写法

// 子组件 child.vue  
// 文档：https://v3.cn.vuejs.org/api/sfc-script-setup.html#defineprops-%E5%92%8C-defineemits  
<script setup lang="ts">  
import { ref, onMounted, watch } from "vue";  
const emit = defineEmits(['update:modelValue']); // 定义需要派发的事件名称  
  
let curValue = ref('');  
let props = withDefaults(defineProps<{  
modelValue: string;  
}>(), {  
modelValue: '',  
})  
  
onMounted(() => {  
// 先将 v-model 传入的 modelValue 保存  
curValue.value = props.modelValue;  
})  
  
watch(curValue, (newVal, oldVal) => {  
// 当 curValue 变化，则通过 emit 派发更新  
emit('update:modelValue', newVal)  
})  
  
</script>  
  
<template>  
<div></div>  
</template>  
  
<style lang="scss" scoped></style>

父组件使用写法

// 父组件 father.vue  
  
<script setup lang="ts">  
import { ref, onMounted, watch } from "vue";  
let curValue = ref('');  
  
watch(curValue, (newVal, oldVal) => {  
console.log('[curValue 发生变化]', newVal)  
})  
</script>  
  
<template>  
<Child v-model='curValue'></Child>  
</template>  
  
<style lang="scss" scoped></style>

vue3 setup

defineExpose， 父组件获取子组件内部变量方法 用法

// 子组件  
<script setup>  
let name = ref("pingan8787")  
defineExpose({ name }); // 显式暴露的数据，父组件才可以获取  
</script>  
  
// 父组件  
<Chlid ref="child"></Chlid>  
<script setup>  
let child = ref(null)  
child.value.name //获取子组件中 name 的值为 pingan8787  
</script>

defineProps,定义组件入参

用法

<script setup lang="ts">
    let props = defineProps<{a:string,modelValue:any}>();
</script>

withDefaults,定义入参默认值

用法

<script setup lang="ts">
    let props = withDefaults(defineProps<{a:string,modelValue:any}>(),
    {
        a:'string',
        modelValue:''
    });
</script>

配置全局自定义参数

Vue2.x

// Vue2.x
Vue.prototype.$api = axios;  
Vue.prototype.$eventBus = eventBus;  

 //使用
this.$api...

Vue3.x

// Vue3.x  
const app = createApp({})  
app.config.globalProperties.$api = axios;  
app.config.globalProperties.$eventBus = eventBus;

//使用 A.vue  
<script setup lang="ts">  
import { ref, onMounted, getCurrentInstance } from "vue";  
  
onMounted(() => {  
const instance = <any>getCurrentInstance();  
const { $api, $eventBus } = instance.appContext.config.globalProperties;  
// do something  
})  
</script>

调试技巧

ref 调试 console('[ref]', count) 展示查看信息不方便

配置谷歌

会得到：