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 也是非響應式的，因此你不應該試圖用它在模板中做數據綁定。