vue3的基礎使用;
安裝vite：npm inistall -g create-vite-app
利用vite創建vue3項目：create-vite-app projectName
安裝依賴運行項目：cd projectName npm install npm run dev
文檔地址：https://v3.vuejs.org/guide/introduction.html
composition API的本質其實就是把setup()中的方法和數據註冊到data/methods中;
ref定義簡單類型的數據， reactive定義複雜類型的數據;
vue3基本使用方式
import {ref , reactive} from 'vue' // reactive只有傳入複雜類型(json/arr)纔會成爲響應式
export default {
name: 'App',
// setup函數是組合api的入口函數
// 執行時機在beforeCreate之前，所以此時是無法使用data/methods
// 由於不能在setup不能訪問data/methods，此時的this的值爲undefined
// setup只能是同步的
setup () {
let {state, deleteLine} = diyFun()
let count = ref(0)
return {state, deleteLine, count} // 暴露出去之後就可以使用這些變量了
}
}
function diyFun() {
let state = reactive({
stus: [
{id: 1, name: 2, age: 3},
{id: 2, name: 3, age: 4},
{id: 3, name: 4, age: 5},
{id: 4, name: 5, age: 6}
]
})
function deleteLine(index) {
console.log(index)
state.stus.splice(index, 1)
}
return {state, deleteLine}
}
reactive注意點:
reactive傳遞的參數必須是object/arr
如果傳遞了其他的對象，默認情況下修改對象，界面不會自動更新，如果想要
更新，可以通過重新賦值的方式
// 重新賦值
function changeTime() {
let stateDate = reactive({
time: new Date()
})
function changeDetail() {
let data = new Date(stateDate.time.getTime())
data.setDate(stateDate.time.getDate() + 1)
stateDate.time = data
}
return {stateDate, changeDetail}
}
ref的本質其實還是reactive，當我們給ref函數傳遞一個值之後，ref
函數會自動的轉化成{value: xx}，只是中間自動幫我們套了一層value
const name = ref(1) => name: {value: 1}
所以當我們修改值時，name.value = ‘xxx',此時才能進行響應式更新.
同理： shallowRef本質上也是shallowReactive
遞歸監聽（通過ref和reactive來創建得數據）
在多層嵌套得對象中，vue3會遞歸每一層對象，並對每一層對象創建一個proxy進行監聽，所以非常消耗性能,
let obj = reactive({
a: {
b: 'v',
c: {
d: '666',
e: {
f: '7777'
}
}
}
})
非遞歸監聽 shallowReactive shallowRef, 只會監聽最外一層
修改， 單獨修改obj.a.b是不會重新渲染得，因爲是沒有被proxy監聽得，
只有同時修改了obj得第一層屬性值纔會重新渲染，只有obj被proxy監聽了
let obj = shallowReactive({
name: '11111',
a: {
b: 'v',
c: {
d: '666',
e: {
f: '7777'
}
}
}
})
// 修改， 單獨修改obj.a.b是不會重新渲染得，因爲是沒有被proxy監聽得，
// 只有同時修改了obj得第一層屬性值纔會重新渲染，只有obj被proxy監聽了
obj.name = 'zhangsan'
obj.a.b = '7777777'
通過shallowRef創建得數據，監聽得是obj.value得值，修改方式如下，將整個對象提出來修改
如果只想單獨修改一個值， 配合triggerRef(obj)使用，此時會重新渲染界面
注意：沒有triggerReactive()方法
obj.value = {
name: 'asdasdasd',
a: {
b: 'asdasdasd',
c: {
d: '66132126',
e: {
f: '7123123777'
}
}
}
}
// 如果只想單獨修改一個值， 配合triggerRef(obj)使用，此時會重新渲染界面
// 注意：沒有triggerReactive()方法
obj.value.name = 'asdasdasd123123'
triggerRef(obj)
toRaw方法，在有些情況下，我們修改了reactive/ref中得數據得時候，並不希望他去更新UI
但是他本身是響應式得，此時可以使用toRaw來避免這種更新達到提升性能得作用
reactive創建得數據
let obj2 = toRaw(obj)
obj2.name = '123123123123' // 此時obj中proxy代理得值也發生變化了，但是界面沒有更新
// ref創建得數據想使用toRow得話
let obj2 = toRaw(obj.value) // 因爲ref本質還是reactive
obj2.name = '123123123123'
markRow 使某個值永遠不會響應式
let obj = {a: 1, b: 2}
obj = markRow(obj)
let state = reactive(obj) //此時state的值再發生修改就不會重新渲染了
toRef和ref定義數據
let obj = {a: 1, b: 2}
let state = ref(obj.a)
let state = toRef(obj, name)
/*
此時修改state.value的值。obj中對應的a的值不會更改，但是UI會自動更新
如果使用的是toRef，在修改了數據之後，obj的值會跟着變化，但是UI不會更新
*/
也可以使用toRefs
let state = toRefs(obj) // 直接遍歷obj中所有的屬性，作用和toRef差不多，修改原始數據
vue3中使用生命週期函數和獲取dom得方式
使用生命週期->引入對應得生命週期函數，在setup中使用onMounted()
// <div ref="box"> 123123123</div>
let box = ref(null) // 定義一個空的ref數據，將該數據暴露出去給節點綁上ref值
onMounted(() => {
console.log(box.value) // 即可拿到節點對象
})
return {box}
readonly:創建一個只讀的數據，並且是遞歸只讀
let state = readonly({name: 1, attr: {a:1, b: 2})
shallowReadonly：用於創建一個只讀的數據，但不是遞歸只讀的，只能用於第一層
isReadonly()用於判斷該值是不是隻讀的