欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue3學(xué)習(xí)之語(yǔ)法糖、箭頭函數(shù)、函數(shù)聲明詳解

 更新時(shí)間:2024年08月02日 09:33:17   作者:HaSaKing_721  
在Vue3中箭頭函數(shù)被廣泛支持,尤其是在組合式API的上下文中,這篇文章主要給大家介紹了關(guān)于Vue3學(xué)習(xí)之語(yǔ)法糖、箭頭函數(shù)、函數(shù)聲明的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

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)文章

最新評(píng)論