Vue API中setup ref reactive函數(shù)使用教程

更新時間：2022年12月12日 09:18:03 作者：糖^O^

setup是用來寫組合式api，內(nèi)部的數(shù)據(jù)和方法需要通過return之后，模板才能使用。在之前vue2中，data返回的數(shù)據(jù)，可以直接進(jìn)行雙向綁定使用，如果我們把setup中數(shù)據(jù)類型直接雙向綁定，發(fā)現(xiàn)變量并不能實時響應(yīng)。接下來就詳細(xì)看看它們的使用

1.setup

組件中所用到的：數(shù)據(jù)、方法等等，均要配置在setup中

setup函數(shù)的兩種返回值：

若返回一個對象，則對象中的屬性、方法, 在模板中均可以直接使用。（重點(diǎn)注意）

若返回一個渲染函數(shù)：則可以自定義渲染內(nèi)容。

注意：

vue2可以讀取vue3里面的數(shù)據(jù)

如果 vue2和vue3沖突,會用vue3的,所以

盡量不要與Vue2.x配置混用

Vue2.x配置（data、methos、computed…）中可以訪問到setup中的屬性、方法
但在setup中不能訪問到Vue2.x配置（data、methods、computed…）
如果有重名, setup優(yōu)先

setup不能是一個async函數(shù)，因為返回值不再是return的對象, promise,

模板看不到return對象中的屬性

2.ref函數(shù)

可以定義一個響應(yīng)式的數(shù)據(jù)

語法: const xxx = ref(initValue)

JS中操作時： xxx.value
模板中讀取數(shù)據(jù): 不需要.value，直接：<div>{{xxx}}</div>

注：

接收的數(shù)據(jù)可以是：基本類型、也可以是對象類型
基本類型的數(shù)據(jù)：響應(yīng)式依然是靠Object.defineProperty()的get與set完成的

3.reactive函數(shù)

一個對象類型的響應(yīng)式數(shù)據(jù)（基本類型不要用它，要用ref函數(shù)）

const 代理對象= reactive(源對象)接收一個對象（或數(shù)組），返回一個代理對象（Proxy的實例對象，簡稱proxy對象）

4.Vue3.0中的響應(yīng)式原理

vue2.x的響應(yīng)式

對象類型：通過Object.defineProperty()對屬性的讀取、修改進(jìn)行攔截（數(shù)據(jù)劫持）

數(shù)組類型：通過重寫更新數(shù)組的一系列方法來實現(xiàn)攔截

Object.defineProperty(data, 'count', {
    get () {}, 
    set () {}
})

但是存在一些問題：新增屬性、刪除屬性, 界面不會更新；直接通過下標(biāo)修改數(shù)組, 界面不會自動更新。

Vue3.0的響應(yīng)式

通過Proxy（代理）: 攔截對象中任意屬性的變化, 包括：屬性值的讀寫、屬性的添加、屬性的刪除等
通過Reflect（反射）: 對源對象的屬性進(jìn)行操作

new Proxy(data, {
	// 攔截讀取屬性值
    get (target, prop) {
    	return Reflect.get(target, prop)
    },
    // 攔截設(shè)置屬性值或添加新屬性
    set (target, prop, value) {
    	return Reflect.set(target, prop, value)
    },
    // 攔截刪除屬性
    deleteProperty (target, prop) {
    	return Reflect.deleteProperty(target, prop)
    }
})
proxy.name = 'tom'