Vue API中setup ref reactive函數(shù)使用教程
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)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue 動(dòng)態(tài)組件用法示例小結(jié)
這篇文章主要介紹了vue 動(dòng)態(tài)組件用法,結(jié)合實(shí)例形式總結(jié)分析了vue 動(dòng)態(tài)組件基本功能、原理、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2020-03-03vue.js中created()與activated()的個(gè)人使用解讀
這篇文章主要介紹了vue.js中created()與activated()的個(gè)人使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-07-07Vue2+Elementui?Dialog實(shí)現(xiàn)封裝自定義彈窗組件
在日常的管理系統(tǒng)界面中,我們寫的最多的除了列表表格之外,就是各種彈窗組件,本文就來(lái)為大家詳細(xì)介紹一下Vue2如何結(jié)合Elementui?Dialog實(shí)現(xiàn)封裝自定義彈窗組件,希望對(duì)大家有所幫助2023-12-12Vue文件下載進(jìn)度條的實(shí)現(xiàn)過(guò)程
這篇文章主要介紹了Vue文件下載進(jìn)度條的實(shí)現(xiàn)原理,通過(guò)使用onDownloadProgress方法API獲取進(jìn)度及文件大小等數(shù)據(jù),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-07-07vue數(shù)組對(duì)象排序的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue數(shù)組對(duì)象排序的實(shí)現(xiàn)代碼,這里整理了詳細(xì)的代碼,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2018-06-06vue3+ts+elementui-plus二次封裝彈框?qū)崙?zhàn)教程
這篇文章主要介紹了vue3+ts+elementui-plus二次封裝彈框?qū)崙?zhàn)教程,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07Vue tagsview實(shí)現(xiàn)多頁(yè)簽導(dǎo)航功能流程詳解
基本上后臺(tái)管理系統(tǒng)都需要有多頁(yè)簽的功能,但是因?yàn)橐恍┠_手架項(xiàng)目基本都把這個(gè)功能給集成好了,導(dǎo)致在學(xué)習(xí)或者修改的時(shí)候不知道該如何下手。今天這篇文章就來(lái)聊一聊,vue-element-admin項(xiàng)目是如何實(shí)現(xiàn)多頁(yè)簽功能的2022-09-09