Vue API中setup ref reactive函數(shù)使用教程
1.setup
組件中所用到的:數(shù)據(jù)、方法等等,均要配置在setup中
setup函數(shù)的兩種返回值:
若返回一個對象,則對象中的屬性、方法, 在模板中均可以直接使用。(重點注意)
若返回一個渲染函數(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'
5.reactive對比ref
從定義數(shù)據(jù)角度對比:
- ref用來定義:基本類型數(shù)據(jù)。
- reactive用來定義:對象(或數(shù)組)類型數(shù)據(jù)。
- ref也可以用來定義對象(或數(shù)組)類型數(shù)據(jù), 它內(nèi)部會自動通過
reactive
轉(zhuǎn)為代理對象
從原理角度對比:
- ref通過
Object.defineProperty()
的get
與set
來實現(xiàn)響應(yīng)式 - reactive通過使用Proxy來實現(xiàn)響應(yīng)式(數(shù)據(jù)劫持), 并通過Reflect操作源對象內(nèi)部的數(shù)據(jù)
從使用角度對比:
- ref定義的數(shù)據(jù):操作數(shù)據(jù)需要
.value
,讀取數(shù)據(jù)時模板中直接讀取不需要.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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue.js中created()與activated()的個人使用解讀
這篇文章主要介紹了vue.js中created()與activated()的個人使用,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-07-07Vue2+Elementui?Dialog實現(xiàn)封裝自定義彈窗組件
在日常的管理系統(tǒng)界面中,我們寫的最多的除了列表表格之外,就是各種彈窗組件,本文就來為大家詳細(xì)介紹一下Vue2如何結(jié)合Elementui?Dialog實現(xiàn)封裝自定義彈窗組件,希望對大家有所幫助2023-12-12vue3+ts+elementui-plus二次封裝彈框?qū)崙?zhàn)教程
這篇文章主要介紹了vue3+ts+elementui-plus二次封裝彈框?qū)崙?zhàn)教程,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07Vue tagsview實現(xiàn)多頁簽導(dǎo)航功能流程詳解
基本上后臺管理系統(tǒng)都需要有多頁簽的功能,但是因為一些腳手架項目基本都把這個功能給集成好了,導(dǎo)致在學(xué)習(xí)或者修改的時候不知道該如何下手。今天這篇文章就來聊一聊,vue-element-admin項目是如何實現(xiàn)多頁簽功能的2022-09-09