Vue API中setup ref reactive函數使用教程

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

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

1.setup

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

setup函數的兩種返回值：

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

若返回一個渲染函數：則可以自定義渲染內容。

注意：

vue2可以讀取vue3里面的數據

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

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

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

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

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

2.ref函數

可以定義一個響應式的數據

語法: const xxx = ref(initValue)

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

注：

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

3.reactive函數

一個對象類型的響應式數據（基本類型不要用它，要用ref函數）

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

4.Vue3.0中的響應式原理

vue2.x的響應式

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

數組類型：通過重寫更新數組的一系列方法來實現攔截

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

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

Vue3.0的響應式

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

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