Vue3兼容大部分Vue2的特性
-
創(chuàng)建方式
-
ref reactive
-
setup()
-
聲明周期
-
父子傳值
一稚虎、創(chuàng)建方式
1.第一種通過手動來完成vue3 的創(chuàng)建
image.png
image.png
第一個要選中他的意思是選擇vue的版本
image.png
- 這個選擇 3版本 就行
- 回車以后就要看自己的選擇，是給他設置記錄搪锣，還是不用
- 再后面就是個css預處理器寫有sass 還有l(wèi)ess 看自己的習慣吧
2.第二種可以使用vite(腳手架)
npm init vite-app hello-vue3 # OR yarn create vite-app hello-vue3
上面的“hello-vue3”是創(chuàng)建的項目名 也可以進行修改
3.區(qū)別
-
運行速度
-
工程目錄結構上
手動方式創(chuàng)建
image.png
通過vite 腳手架創(chuàng)建
image.png
- 手動方式創(chuàng)建的vue3.0項目,工程目錄結構是沒有問題的
- vite目錄結構是不完整的 第一個就是沒有node依賴包 需要自己去yarn || npm install
二朱灿、ref reactive
1.png
- ref：主要用于基本類型的響應
- reactive：主要用于引用類型的響應弯菊。
改變數據的時候 聲明ref的變量是需要加一個.value 進行改變
change.png
三研底、 setup用法(目前我知道兩種)
-
第一種就是上面這種
1. export default {
2. setup () {
3.
4. },
5. return {
6.
7. }
8. }
這種寫法是必須要return 如果沒有return 就不能使用
-
第二種就是直接寫在script標簽上
setup.png
跟上面的一種寫法區(qū)別就是不需要return出去
這種寫法好像是不推薦使用,用的話在控制臺會有一個提示
四董济、生命周期
vue3生命周期和vue2的生命周期用法相同,只是寫法不一樣了,create一系列應該是退役了
// 使用的時候必須先導入, 導入就可以使用了
// 使用方法和vue2一樣
1. import { onMounted, onUpdated, onUnmounted } from 'vue'
2. onMounted() {
3. console.log(`我掛載了`);
4.}
五步清、父子傳值
父組件
- 需要使用一個components進行注冊。
-
注冊分為局部注冊和全局注冊÷采觯現(xiàn)在使用的是局部注冊,如果想使用全局注冊的話可以去main.js使用use
image.png
子組件
-
子組件需要導入一個defineProps 來接受父組件傳過來的值
image.png
