Vue3學(xué)習(xí)之語(yǔ)法糖、箭頭函數(shù)、函數(shù)聲明詳解
1. 箭頭函數(shù)
在 Vue 3 中,箭頭函數(shù)被廣泛支持,尤其是在組合式 API 的上下文中。箭頭函數(shù)提供了一個(gè)更簡(jiǎn)潔的函數(shù)書(shū)寫(xiě)方式,并且不綁定自己的 this
上下文,這在某些情況下非常有用。但是,需要注意的是,在 Vue 的選項(xiàng)式 API 中,特別是在 methods
和生命周期鉤子中,通常不推薦使用箭頭函數(shù),因?yàn)檫@些地方的 this
上下文指向組件實(shí)例,使用箭頭函數(shù)會(huì)導(dǎo)致 this
丟失。
// 選項(xiàng)式 API 中不推薦 export default { methods: { handleClick: () => { console.log(this.someData); // this 不會(huì)指向組件實(shí)例,可能導(dǎo)致錯(cuò)誤 } } } // 組合式 API 中推薦 import { ref } from 'vue'; export default { setup() { const count = ref(0); const increment = () => { count.value++; }; return { count, increment }; } }
2. 函數(shù)聲明
函數(shù)聲明(或稱為命名函數(shù))在 Vue 3 中同樣適用,尤其是在定義組件方法或者處理器時(shí)。相較于箭頭函數(shù),命名函數(shù)有明確的名稱,更利于調(diào)試和遞歸調(diào)用,并且自然綁定 this
上下文到組件實(shí)例。
export default { methods: { handleClick() { console.log(this.someData); // 正確綁定了 this 上下文 } }, created() { this.handleClick(); // 調(diào)用方法 } }
3. 語(yǔ)法糖
Vue 3 也引入了更多的語(yǔ)法糖,例如 v-model
的改進(jìn),可以同時(shí)處理多個(gè)變量綁定,并支持自定義修改器。此外,通過(guò) <script setup>
標(biāo)簽,Vue 3 提供了一種更聲明式的組件寫(xiě)法,極大簡(jiǎn)化了代碼結(jié)構(gòu)。
<script setup> import { ref } from 'vue'; const message = ref(''); // <script setup> 是 Vue 3 中的一個(gè)語(yǔ)法糖,使組件的書(shū)寫(xiě)更加簡(jiǎn)潔 </script> <template> <input v-model="message"> </template>
3.1 ref 和 reactive
在 Vue 3 中,ref
和 reactive
是兩種基本的響應(yīng)式引用類型,它們是組合式 API 的核心部分。這兩種類型都允許 Vue 跟蹤依賴并在數(shù)據(jù)變化時(shí)自動(dòng)更新 DOM,但它們?cè)谑褂梅绞胶瓦m用場(chǎng)景上有所不同。
3.1.1 ref
ref
用于定義一個(gè)響應(yīng)式的引用數(shù)據(jù)類型。使用 ref
可以把基本數(shù)據(jù)類型(如字符串、數(shù)字、布爾值)包裝成一個(gè)響應(yīng)式對(duì)象。這個(gè)對(duì)象有一個(gè) .value
屬性,用來(lái)獲取或設(shè)置其內(nèi)部值。
特點(diǎn)
- 可以用于基本數(shù)據(jù)類型。
- 返回一個(gè)包含
value
屬性的響應(yīng)式對(duì)象。 - 可以在模板中直接使用,無(wú)需通過(guò)
.value
訪問(wèn)。 - 跨組件或模塊傳遞時(shí),保持響應(yīng)性。
示例
import { ref } from 'vue'; const count = ref(0); function increment() { count.value++; }
3.1.2 reactive
reactive
用于創(chuàng)建一個(gè)響應(yīng)式的復(fù)雜數(shù)據(jù)對(duì)象,如對(duì)象或數(shù)組。當(dāng)這些數(shù)據(jù)對(duì)象的屬性變化時(shí),reactive
提供的響應(yīng)式系統(tǒng)會(huì)確保視圖與數(shù)據(jù)狀態(tài)保持同步。
特點(diǎn)
- 只能用于對(duì)象或數(shù)組。
- 返回一個(gè)透明代理(Proxy)的響應(yīng)式版本,直接修改屬性即可。
- 更適合用于構(gòu)建復(fù)雜的響應(yīng)式結(jié)構(gòu),如狀態(tài)存儲(chǔ)或大型對(duì)象模型。
- 傳遞
reactive
對(duì)象時(shí),它們的響應(yīng)性會(huì)被保留。
示例
import { reactive } from 'vue'; const state = reactive({ count: 0, items: ['apple', 'banana'] }); function increment() { state.count++; }
主要區(qū)別
- 數(shù)據(jù)類型支持:
ref
適用于基本數(shù)據(jù)類型,而reactive
適合復(fù)雜數(shù)據(jù)類型(對(duì)象或數(shù)組)。 - 使用方式:使用
ref
時(shí),需要通過(guò).value
屬性來(lái)訪問(wèn)或修改其值;使用reactive
時(shí),可以直接訪問(wèn)或修改對(duì)象的屬性,無(wú)需額外的屬性。 - 模板引用:在模板中使用
ref
時(shí),Vue 會(huì)自動(dòng)展開(kāi).value
,讓你可以直直接引用;而reactive
對(duì)象的屬性可以直接被訪問(wèn),無(wú)需任何額外處理。 - 設(shè)計(jì)意圖:
ref
主要用于更簡(jiǎn)單的場(chǎng)景和跨組件的狀態(tài)共享;reactive
更適合用來(lái)管理較為復(fù)雜的狀態(tài)邏輯或數(shù)據(jù)結(jié)構(gòu)。
選擇使用 ref
或 reactive
應(yīng)基于具體需求:如果你處理的是基本類型或需要跨組件傳遞響應(yīng)式數(shù)據(jù),ref
是更好的選擇;如果你需要管理一個(gè)較大的數(shù)據(jù)結(jié)構(gòu),如對(duì)象或數(shù)組,reactive
更為合適。
4. 箭頭函數(shù) VS 函數(shù)聲明
function xxx() {} 和 const xxx = () => {}
這兩種定義函數(shù)的方式各有特點(diǎn)和適用場(chǎng)景。這兩種方式的主要差異在于函數(shù)的作用域、this
綁定、構(gòu)造函數(shù)的能力和提升(hoisting)特性。下面我們?cè)敿?xì)比較這兩種方式,并給出示例。
1. this 綁定
函數(shù)聲明 (function functionName() {}
) 創(chuàng)建的函數(shù)擁有自己的 this
上下文,這取決于如何調(diào)用該函數(shù)。如果作為對(duì)象的方法調(diào)用,this
指向該對(duì)象;如果單獨(dú)調(diào)用,this
指向全局對(duì)象(在嚴(yán)格模式下是 undefined
)。
箭頭函數(shù) (const functionName = () => {}
) 不擁有自己的 this
上下文,而是繼承自封閉上下文的 this
值,通常稱為 “詞法作用域”。這使得箭頭函數(shù)非常適合用作回調(diào)函數(shù),特別是在需要訪問(wèn)外部 this
上下文的情況。
示例
const team = { members: ['Jane', 'Bill'], teamName: 'Super Squad', teamSummary: function() { // 使用函數(shù)聲明,這里的 this 指向 team 對(duì)象 return this.members.map(function(member) { return `${member} is on team ${this.teamName}`; // 這里的 this 不指向 team 對(duì)象,除非使用 bind }.bind(this)); // 注意 bind 的使用 } }; const teamArrow = { members: ['Jane', 'Bill'], teamName: 'Super Squad', teamSummary: function() { // 使用箭頭函數(shù),自動(dòng)捕獲上下文中的 this return this.members.map(member => `${member} is on team ${this.teamName}`); } };
2. 函數(shù)提升
函數(shù)聲明 在代碼執(zhí)行之前就會(huì)被提升,這意味著你可以在聲明函數(shù)之前調(diào)用它。
箭頭函數(shù) 作為變量聲明的一部分,具體到這里是 const
聲明,所以它們不會(huì)提升。你必須先定義函數(shù),然后才能使用它。
示例
console.log(sum(10, 5)); // 正常工作,因?yàn)楹瘮?shù)提升 function sum(a, b) { return a + b; } console.log(add(10, 5)); // 報(bào)錯(cuò):add is not a function const add = (a, b) => a + b;
3. 用作構(gòu)造函數(shù)
函數(shù)聲明 可以用作構(gòu)造函數(shù),與 new
關(guān)鍵字一起使用來(lái)創(chuàng)建新對(duì)象。
箭頭函數(shù) 不能用作構(gòu)造函數(shù),如果嘗試這樣做會(huì)拋出錯(cuò)誤。
示例
function Person(name) { this.name = name; } const person1 = new Person('John'); // 正常工作 const Animal = (name) => { this.name = name; } const animal1 = new Animal('Dog'); // 報(bào)錯(cuò):Animal is not a constructor
總結(jié)
到此這篇關(guān)于Vue3學(xué)習(xí)之語(yǔ)法糖、箭頭函數(shù)、函數(shù)聲明的文章就介紹到這了,更多相關(guān)Vue3語(yǔ)法糖、箭頭函數(shù)、函數(shù)聲明內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
利用Vue實(shí)現(xiàn)一個(gè)markdown編輯器實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于如何利用Vue實(shí)現(xiàn)一個(gè)markdown編輯器的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05vue單個(gè)元素綁定多個(gè)事件問(wèn)題(例如點(diǎn)擊綁定多個(gè)事件方法)
這篇文章主要介紹了vue單個(gè)元素綁定多個(gè)事件問(wèn)題(例如點(diǎn)擊綁定多個(gè)事件方法),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04vue2.0基于vue-cli+element-ui制作樹(shù)形treeTable
這篇文章主要介紹了vue2.0基于vue-cli+element-ui制作樹(shù)形treeTable,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04vue3父子組件通信之子組件修改父組件傳過(guò)來(lái)的值
這篇文章主要介紹了vue3父子組件通信之子組件修改父組件傳過(guò)來(lái)的值,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-05-05Composition API思想封裝NProgress示例詳解
這篇文章主要為大家介紹了Composition API思想封裝NProgress示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08Vue中自動(dòng)生成路由配置文件覆蓋路由配置的思路詳解
這篇文章主要介紹了Vue中自動(dòng)生成路由配置文件覆蓋路由配置的思路詳解,大概思路是讀取@/views下所有index.vue如果當(dāng)前文件下有包含相同路徑則認(rèn)為是它的子路由,需要的朋友可以參考下2024-05-05vue實(shí)現(xiàn)網(wǎng)絡(luò)圖片瀑布流 + 下拉刷新 + 上拉加載更多(步驟詳解)
這篇文章主要介紹了vue實(shí)現(xiàn)網(wǎng)絡(luò)圖片瀑布流 + 下拉刷新 + 上拉加載更多,本文分步驟通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01使用vue寫(xiě)一個(gè)翻頁(yè)的時(shí)間插件實(shí)例代碼
最近在做自己項(xiàng)目中遇到一個(gè)非常簡(jiǎn)單的功能,跟大家分享下,這篇文章主要給大家介紹了關(guān)于使用vue寫(xiě)一個(gè)翻頁(yè)的時(shí)間插件的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02Vue.js實(shí)現(xiàn)移動(dòng)端短信驗(yàn)證碼功能
現(xiàn)在的短信驗(yàn)證碼一般為4位或6位,則頁(yè)面中會(huì)相應(yīng)的顯示4個(gè)或6個(gè)文本框.好多網(wǎng)站需求都有此功能,今天小編給大家分享基于vue.js實(shí)現(xiàn)移動(dòng)端短信驗(yàn)證碼功能,需要的朋友參考下吧2017-03-03vue實(shí)現(xiàn)聊天框自動(dòng)滾動(dòng)的示例代碼
本文主要介紹了vue實(shí)現(xiàn)聊天框自動(dòng)滾動(dòng)的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05