1.setup

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

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

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

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

注意：

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

如果 vue2和vue3沖突,會(huì)用vue3的,所以

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

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

setup不能是一個(gè)async函數(shù)，因?yàn)榉祷刂挡辉偈莚eturn的對(duì)象, promise,

模板看不到return對(duì)象中的屬性

2.ref函數(shù)

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

語(yǔ)法: const xxx = ref(initValue)

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

注：

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

3.reactive函數(shù)

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

const 代理對(duì)象= reactive(源對(duì)象)接收一個(gè)對(duì)象（或數(shù)組），返回一個(gè)代理對(duì)象（Proxy的實(shí)例對(duì)象，簡(jiǎn)稱proxy對(duì)象）

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

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

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

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

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

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

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

• 通過(guò)Proxy（代理）: 攔截對(duì)象中任意屬性的變化, 包括：屬性值的讀寫、屬性的添加、屬性的刪除等
• 通過(guò)Reflect（反射）: 對(duì)源對(duì)象的屬性進(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'   

5.reactive對(duì)比ref

從定義數(shù)據(jù)角度對(duì)比：

• ref用來(lái)定義：基本類型數(shù)據(jù)。
• reactive用來(lái)定義：對(duì)象（或數(shù)組）類型數(shù)據(jù)。
• ref也可以用來(lái)定義對(duì)象（或數(shù)組）類型數(shù)據(jù), 它內(nèi)部會(huì)自動(dòng)通過(guò)reactive轉(zhuǎn)為代理對(duì)象

從原理角度對(duì)比：

• ref通過(guò)Object.defineProperty()的get與set來(lái)實(shí)現(xiàn)響應(yīng)式
• reactive通過(guò)使用Proxy來(lái)實(shí)現(xiàn)響應(yīng)式（數(shù)據(jù)劫持）, 并通過(guò)Reflect操作源對(duì)象內(nèi)部的數(shù)據(jù)

從使用角度對(duì)比：

• ref定義的數(shù)據(jù)：操作數(shù)據(jù)需要.value，讀取數(shù)據(jù)時(shí)模板中直接讀取不需要.value
• reactive定義的數(shù)據(jù)：操作數(shù)據(jù)與讀取數(shù)據(jù)：均不需要.value

到此這篇關(guān)于Vue API中setup ref reactive函數(shù)使用教程的文章就介紹到這了,更多相關(guān)Vue setup ref reactive內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論