1.Vue3組合式
2.創建vue3項目
2.1認識create-vue
create-vue是官方新的腳手架工具，vite下一代構建工具
node -v >16
npm init vue@latest
2.2 setup
原始寫法
<script>
export default {//執行時機比beforeCreate早//獲取不到this//數據和函數必須return出去setup() {//數據const message = 'hello vue3'//函數const logMessage = () => {console.log(message)}return {message, logMessage}},beforeCreate() {console.log('beforeCreate函數')}
}
</script>
<template><h1>{{ message }}</h1><button @click="logMessage">點我</button>
</template>
語法糖寫法：
<script setup>
const message = 'this is message'
const logMessage = () => {console.log(message);
}
</script>
<template><h1>{{ message }}</h1><button @click="logMessage">點我</button>
</template>
總結:
1.setup選項的執行時機？
beforeCreate鉤子之前，自動執行
2.setup寫代碼的特點是什么？
定義數據+函數，然后以對象方式return
3.setup解決了什么問題？
經過語法糖的封裝更簡單的使用組合式API
4.setup中的this還指向組件實例嗎？
不指向，組件實例還未創建，undefined
2.3 reactive()
接收對象類型數據的參數傳入，返回響應式對象
<script setup>
//接收對象類型數據的參數傳入，返回響應式對象
import { reactive } from 'vue'
const state = reactive({count: 100
})
const addOne = () => {state.count++
}
</script>
<template><div><div>{{ state.count }}</div><button @click="addOne">+1</button></div>
</template>
2.4 ref()
如果是簡單類型，用ref() 推薦
接收簡單類型和對象類型數據傳入并返回響應式對象
本質是對傳入數據包了一層，包成復雜類型之后，再借助reactive實現響應式。
腳本中訪問數據需要通過.value，非腳本區域直接使用數據
<script setup>
//接收對象類型數據的參數傳入，返回響應式對象
import { ref } from 'vue'
const count = ref(0)
console.log(count.value);
const addOne = () => {count.value++
}
</script>
<template><div><div>{{ count }}</div><button @click="addOne">+1</button></div>
</template>
總結：
1.reactive和ref函數共同作用是什么？
用函數調用的方式生成響應式數據
2.reactive vs ref?
reactive不能處理簡單類型的數據
ref參數類型支持更好但是必須通過.value訪問修改
ref函數的內部實現依賴于reactive函數
3.在實際工作中推薦使用哪個？
推薦使用ref函數，更加靈活統一
2.5 computed
最佳實踐：不應該有副作用，異步請求，修改dom,避免直接修改計算屬性的值。
<script setup>
import { ref, computed } from 'vue'
//聲明數據
const list = ref([1, 2, 3, 4, 5, 6, 7, 8]
)
//基于list派生一個計算屬性，從list中過濾出 > 2
const computedList = computed(() => {return list.value.filter(item => item > 2)
})
//定義一個修改數組的方法
const addFn = () => {list.value.push(666)
}
</script>
<template><div><div>原始數據：{{ list }}</div><div>計算后的數據：{{ computedList }}</div><button @click="addFn">修改</button></div>
</template>
2.6 watch
偵聽簡單對象和復雜對象以及immediate和deep，精確偵聽對象的某個屬性
<script setup>
import { ref, watch } from 'vue'
const count = ref(0)
const nickname = ref('張三')
const changeCount = () => {count.value++
}
const changeNickName = () => {nickname.value = nickname.value + '三'
}
//1.監視單個數據的變化
//watch(ref對象,(newValue,oldValue)=>{...})
// watch(count, (newValue, oldValue) => {
// console.log(newValue, oldValue)
// })
// watch(nickname, (nv, ov) => {
// console.log(nv, ov);
// })
//監視多個數據的變化
//watch([ref1,ref2],(newArr,oldArr)=>{...})
/* watch([count, nickname], (newArr, oldArr) => {console.log(newArr, oldArr);
}) */
//立刻執行immediate
/* watch([count, nickname], (newArr, oldArr) => {console.log(newArr, oldArr);
}, {immediate: true
}) */
//深度監視 deep,默認是淺層監視，ref簡單類型，直接監視，ref2復雜類型，監視不到內部數據變化
const userInfo = ref({name: 'zs',age: 18
})
const setUserInfo = () => {userInfo.value.age++
}
/* watch(userInfo, (nv, ov) => {console.log(nv, ov)
}, {deep: true//深度監視，對象子屬性變化也能監視到
}) */
//對于對象中的屬性來進行監視,固定寫法
watch(() => userInfo.value.age, (nv, ov) => {console.log(nv, ov);
})
</script>
<template><div>{{ count }}</div><button @click="changeCount">改數字</button><div>{{ nickname }}</div><button @click="changeNickName">改昵稱</button><div>------------------------------------------</div><br><div>{{ userInfo }}</div><button @click="setUserInfo">修改userinfo</button>
</template>
總結：
1.watch第一個參數需要加.value嗎？
不需要
2.只能偵聽單個數據嗎？
單個或者多個
3.不開啟deep，直接監視復雜類型，修改屬性，能觸發回調嗎？
不能，默認淺層監聽
4.不開啟deep，精確偵聽對象的某個屬性？
可以把第一個參數寫成函數的寫法，返回要監聽的具體屬性。
