初识vue3
對vue3的理解
- 2020年9月發布的正式版
- vue3支持大多數的Vue2的特性
- Vue中設計了一套強大的組合APi代替了Vue2中的option API，復用性更強了
- 更好的支持TS
- 最主要：Vue3中使用了Proxy配合Reflect代替了Vue2中Object.defineProperty()方法實現數據的響應式（數據代理）
- 重寫了虛擬DOM,速度更快了
- 新的組件：Fragment(片段)/ Teleport(瞬移) / Suspense(不確定)
- 設計了一個新的腳手架工具，vite
vue3為什么可以使用多個組件，好處是什么
在vue3中：組件可以沒有根標簽，內部會將多個標簽包含在一個Fragment虛擬元素中
好處：減少標簽層級，減少內存占用
setup
- setup中的返回值是一個對象,內部的屬性和方法是給html模板使用的 - setup中的對象中的方法會和data函數中的都會像中的屬性合并為組件對象的方法 - setup不能是一個async函數:因為返回值不再是return的對象,而是promise,模板看不到return對象中的屬性數據【注意】 在Vue3中盡量不要混合的使用data和setup及methods和setup參數：props 、context
- props 是響應式的，當傳入新的 prop 時，它將被更新。、
【注意】因為 props 是響應式的，你不能使用 ES6 解構，它會消除 prop 的響應性
如果需要解構 prop，可以在 setup 函數中使用 toRefs 函數來完成此操作
不確定的props屬性，用toRef
const title = toRef(props,'title')
- context 是一個普通的 JavaScript 對象，也就是說，它不是響應式的，這意味著你可以安全地對 context 使用 ES6 解構
訪問組件的 property
執行 setup 時，組件實例尚未被創建。因此，你只能訪問以下 property
- props
- attrs
- slots
- emit
setup中的this
this是undefined
setup是在beforeCreate生命周期回調之前就執行了,而且就執行一次由此可以推斷setup在執行的時候,當前的組件還沒有創建出來,也就意味著,組件實例對象this根本就不能使用
ref
-
ref是一個函數：定義一個響應式的數據，返回的是一個ref對象，對中有一個value屬性，如果需要對數據進行操作，需要使用ref對象調用value屬性的方式進行數據操作
-
html模板中是不需要使用 .value寫法的
-
一般定義一個基本類型的響應式數據,換句話說，ref 為我們的值創建了一個響應式引用
如果用ref(對象/數組),內部會自動將對象/數組轉換為reactive的代理對象ref內部：通過給value屬性添加getter和setter來實現數據的劫持 -
放到標簽上可以用來獲取dom <p ref="aaa">得到我</p>
reactive
- 返回一個返回的是一個proxy代理對象
- reactive內部：通過Proxy來實現對對象內部所有數據的劫持，并通過Reflect操作對象內部數據
計算屬性和監聽屬性
computed
【注意】 vue3中沒有filters，可以用computed和watch代替
兩種寫法
-
只讀不能修改
接受一個 getter 函數，并為從 getter 返回的值返回一個不變的響應式 ref 對象。
-
可讀可修改
使用具有 get 和 set 函數的對象來創建可寫的 ref 對象。
watch
- 三個參數- 1，可以直接寫被監聽的值，也可以是返回值的 getter 函數- 2, 回調函數，有舊值和新值兩個參數- 3，一個對象（可選） {immediate: true, deep: true}與 watchEffect 比較，watch 允許我們：
1, 懶執行副作用；
2,更具體地說明什么狀態應該觸發偵聽器重新運行；
3,訪問偵聽狀態變化前后的值。
監聽單個數據源
const num = ref(0)watch(() => num,// 或者直接寫 num// 當值為復合數據類型時這些值是響應式的，要求它有一個由值構成的副本 // 例：nums=reactive([1,2,3,4]) () => [...nums],(newValues, prevValues) => {console.log(newValues, prevValues)})監聽多個數據源
const firstName = ref(''); const lastName = ref('');watch([firstName, lastName], (newValues, prevValues) => {console.log(newValues, prevValues); })firstName.value = "John"; // logs: ["John",""] ["", ""] lastName.value = "Smith"; // logs: ["John", "Smith"] ["John", ""]watchEffect
const count = ref(0)watchEffect(() => console.log(count.value)) // -> logs 0setTimeout(() => {count.value++// -> logs 1 }, 100)-----------副作用，停止偵聽，清除副作用，副作用刷新時機，偵聽器調試還不懂------------
爺孫級組件傳遞
provide 進行傳遞inject 進行接收 let color = ref('red') 爺組件 provide{"color":color} 孫組件 inject('color')響應式數據判斷的方法
- isRef：檢測一個值是否為一個ref對象
- isReactive：檢測一個對象是否由reactive創建的響應式代理
- isReadonly：檢測一個對象是否是由readonly創建的制度代理
- isProxy：檢查一個對象是否是由reactive或者readonly方法創建的代理
customRef
創建一個自定義的 ref，并對其依賴項跟蹤和更新觸發進行顯式控制。它需要一個工廠函數，該函數接收 track 和 trigger 函數作為參數，并且應該返回一個帶有 get 和 set 的對象。
<template><input type="text" v-model="keyword" /><h1>{{ keyword }}</h1> </template><script> import { customRef } from 'vue' export default {setup() {// 自定義hook防抖的函數function useDebouncedRef(value, delay = 200) {// 準備一個存儲定時器的id的變量let timeOutIdreturn customRef((track, trigger) => {return {get() {track()return value},set(newValue) {clearTimeout(timeOutId)timeOutId = setTimeout(() => {value = newValuetrigger()return value}, delay)},}})}const keyword = useDebouncedRef('a11aa', 500)return {keyword,}}, } </script>總結
