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)文章希望大家以后多多支持腳本之家！

最新評(píng)論