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

Posted on by

1.setup

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

setup函數的兩種返回值：

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

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

註意：

vue2可以讀取vue3裡面的數據

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

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

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

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'

5.reactive對比ref

從定義數據角度對比：

  • ref用來定義：基本類型數據。
  • reactive用來定義：對象（或數組）類型數據。
  • ref也可以用來定義對象（或數組）類型數據, 它內部會自動通過reactive轉為代理對象

從原理角度對比：

  • ref通過Object.defineProperty()的get與set來實現響應式
  • reactive通過使用Proxy來實現響應式（數據劫持）, 並通過Reflect操作源對象內部的數據

從使用角度對比：

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

到此這篇關於Vue API中setup ref reactive函數使用教程的文章就介紹到這瞭,更多相關Vue setup ref reactive內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：