vue3项目一些小坑

文章来自 https://mp.weixin.qq.com/s/nJsfOUNNKYQdvB9o9BXVVQ

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

文档地址：https://v3.cn.vuejs.org/guide/composition-api-lifecycle-hooks.html

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	当捕获一个来自子孙组件的异常时激活钩子函数

2. script-setup 模式中父组件获取子组件的数据

文档地址：https://v3.cn.vuejs.org/api/sfc-script-setup.html#defineexpose

这里主要介绍父组件如何去获取子组件内部定义的变量，关于父子组件通信，可以看文档介绍比较详细：https://v3.cn.vuejs.org/guide/component-basics.html

我们可以使用全局编译器宏的defineExpose宏，将子组件中需要暴露给父组件获取的参数，通过 {key: vlaue}方式作为参数即可，父组件通过模版 ref 方式获取子组件实例，就能获取到对应值：

// 子组件
<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>

注意：

• 全局编译器宏只能在 script-setup 模式下使用；
• script-setup 模式下，使用宏时无需 import可以直接使用；
• script-setup 模式一共提供了 4 个宏，包括：defineProps、defineEmits、defineExpose、withDefaults。

 

1、 vue3项目本地热更新时报错TypeError: parentComponent.ctx.deactivate is not a function

 

 解决方法: 在keep-alive、component上设置key进行排序(即加个key)

 

3、vue3中为什么不可以用this？

　　因为vue3中的setup方法是在befoerCerate生命函数之前进行的，并没有任何data数据，所以也就不存在this，因此也可以使用箭头函数。

4、使用ref动态绑定

<!-- vm.$refs.p 会是 DOM 节点 -->
<p ref="p">hello</p>

<!-- vm.$refs.child 会是子组件实例 -->
<child-component ref="child"></child-component>

<!-- 当动态绑定时，我们可以将 ref 定义为回调函数，显式地传递元素或组件实例 -->
<child-component :ref="(el) => child = el"></child-component>

关于 ref 注册时机的重要说明：因为 ref 本身是作为渲染函数的结果而创建的，在初始渲染时你不能访问它们——它们还不存在！$refs 也是非响应式的，因此你不应该试图用它在模板中做数据绑定。