vue3 setup中函数表达式和函数声明

随着 Vue 3 中 Composition API 的引入，现在可以通过函数表达式和函数声明这两种方式声明函数。

函数声明

函数声明是在非函数式编程语言中声明函数的传统或正常方式。以function关键字开头，后跟函数名称、一对括号，最后是一对括住函数体的花括号。

这是一个例子：

js 复制代码

function greet(name) {
  console.log(`Hello, ${name}!`);
}

函数声明的一个重要特征是它们被提升到其作用域的顶部。这意味着无论函数声明写在代码中的什么位置，都可以在同一范围内的任何位置调用。

例如：

js 复制代码

greet("stranger"); // "Hello, stranger!"

function greet(name) {
  console.log(`Hello, ${name}!`);
}

即使在定义greet()函数之前调用该函数，也不会报错，因为函数声明也会被提升到作用域的顶部。

函数表达式

另一方面，函数表达式是产生函数的表达式。它也是使用function关键字，将其分配给变量或对象的属性。

这是一个例子：

js 复制代码

const greet = function() {
  console.log("Hello!");
};

或使用箭头函数：

js 复制代码

const greet = () => {
  console.log("Hello!");
};

两者之间的一个关键区别是函数表达式不会被提升。它们只能在定义后才能被调用。

js 复制代码

greet("stranger"); /* "ReferenceError: Cannot access 'greet' before initialization  */

const greet = function(name) {
  console.log(`Hello, ${name}!`);
}

函数表达式也比函数声明更灵活，因为它们可以在更多上下文中使用，例如作为参数传递给其他函数或用作对象的方法。

html 复制代码

<button id="myButton">点击</button>

<script>
  const myButton = document.querySelector('#myButton');
  
  myButton.addEventListener('click', function() {
    console.log('Button clicked!');
  });
</script>

不久前，函数表达式还被认为是优越的，因为它们不会污染全局范围。但如今 ES 模块被广泛采用，这个优势已经没了。

事实上，这两种方式差别不大，现在，选择哪一个实际上取决于个人喜好。我个人更喜欢喜欢使用函数声明。让我们使用这两种方法来查看 Vue 组件来解释为什么更倾向于函数声明。

在vue中使用这两种方式

函数声明

html 复制代码

<script setup>
import { debounce } from "debounce";
import { ref, watch } from "vue";

const searchTerm = ref("");
const products = ref([]);

watch(searchTerm, debounce(performSearch, 600));

async function performSearch() {
  if (searchTerm.value === "") {
    products.value = [];
        return;
  }
  if (searchTerm.value.length < 2) {
    return;
  }
  const searchUrl = getSearchUrl();
  const response = await (await fetch(searchUrl)).json();
  products.value = response.products;
}

function getSearchUrl() {
  const url = "https://dummyjson.com/products/search";
    const params = {
    q: searchTerm.value,
        limit: "5"
  };
  const searchParams = new URLSearchParams(params);
  return `${url}?${searchParams}`;
};

function clearSearch() {
  searchTerm.value = "";
  products.value = [];
}

</script>

函数表达式

html 复制代码

<script setup>
import { debounce } from "debounce";
import { ref, watch } from "vue";

const searchTerm = ref("");
const products = ref([]);

const performSearch = async () => {
  if (searchTerm.value === "") {
    products.value = [];
        return;
  }
  if (searchTerm.value.length < 2) {
    return;
  }

  const searchUrl = getSearchUrl();
  const response = await (await fetch(searchUrl)).json();

  products.value = response.products;
}

watch(searchTerm, debounce(performSearch, 600));

const getSearchUrl = () => {
  const url = "https://dummyjson.com/products/search";
    const params = {
    q: searchTerm.value,
        limit: "5"
  };

  const searchParams = new URLSearchParams(params);
  return `${url}?${searchParams}`;
};

const clearSearch = () => {
  searchTerm.value = "";
  products.value = [];
}

</script>

我们都知道,在vue3中的script setup声明的所有内容都会自动在模板中可用。使用函数声明时，能够从数据或计算变量中更容易识别方法，因为它们都以关键字function开头。区别很微妙，但毕竟最好的代码是其他人可以轻松理解的。