對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 export default {setup(props, context) {// Attribute (非響應式對象)console.log(context.attrs)// 插槽 (非響應式對象)console.log(context.slots)// 觸發事件 (方法)console.log(context.emit)} }

訪問組件的 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 對象。

const count = ref(1) const plusOne = computed(() => count.value + 1)console.log(plusOne.value) // 2plusOne.value++ // 錯誤

• 可讀可修改

  使用具有 get 和 set 函數的對象來創建可寫的 ref 對象。

const count = ref(1) const plusOne = computed({get: () => count.value + 1,set: val => {count.value = val - 1} })plusOne.value = 1 console.log(count.value) // 0

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方法創建的代理

console.log(isRef(ref())) console.log(isReactive(reactive({})))console.log(isReadonly(readonly({})))console.log(isProxy(reactive({})))console.log(isProxy(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>

總結

以上是生活随笔為你收集整理的初识vue3的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。