Vue3 學習

開發環境

tong ~/Projects/EasyVue3 $ node -v
v16.20.1
tong ~/Projects/EasyVue3 $ sw_vers
ProductName:            macOS
ProductVersion:         14.1.1
BuildVersion:           23B81
tong ~/Projects/EasyVue3 $ npm --version
8.19.4 
tong ~/Projects/EasyVue3 $ code -v  
1.84.2
1a5daa3a0231a0fbba4f14db7ec463cf99d7768e
arm64#如果沒有安裝 vue-cli  ，  -g表示安裝在node全局
npm install  @vue/cli -g
#安裝好之后查看版本信息
tong ~/Projects/EasyVue3 $ vue --version
@vue/cli 5.0.8

1. 創建 Vue3 項目

vue create tomyee-vue3

根據提示一次原則 yes/no即可，創建好之后 cd 到項目文件夾內

2. 了解項目基本結構
   App.vue查看到使用組件 HelloWorld，點進去跳轉到 HelloWorld.vue
3. 組合式 API
   提前安裝好 VScode 插件 volar，寫代碼可以自動提示補全導入等。

<script setup lang="ts">
import { EffectScope, computed, reactive, ref, watch, watchEffect } from 'vue';// 1.reactive (對對象類型值進行響應式處理)
// shallowReactive(淺響應式=>只有第一層可以修改)
const myData = reactive({name: "tong",age : 18,friends : ['kuangshen','wuyou']
})// function clickHandler(){
//   myData.push(10)
// }// 2. ref (支持對基本類型值進行響應式處理)
const count = ref(0)
function clickHandler(){count.value++// content.value += "!"myData.age ++
}// 3. readonly    只讀，所以是非響應式的
// shallowReadonly (根屬性只讀，其他可讀寫，非響應式查看效果需要刷新)// 4. computed 計算屬性
const content = ref("這是測試文本")
const getLen = computed(()=>{console.log('計算屬性執行一次')return content.value.length
})// 5. watch 
// 偵聽 ref 直接寫名稱 不需要.value
watch(count,(newValue,oldValue)=>{console.log(newValue,oldValue)
})
// 偵聽 reactive 中的屬性，需要通過函數的方式來包裹
watch(()=> myData.age,(newValue,oldValue)=>{console.log(newValue,oldValue)
})
// 偵聽 reactive 本身直接寫名稱即可// 6.watchEffect 新功能 ,副作用函數。 
// 只要內部包含的響應式數據發生變化，就會自動觸發
watchEffect(()=>{console.log('count:'+count.value+',age:'+myData.age)
})
// 單個監聽用 watch  多個監聽用 watchEffect
</script>