vue3 setup中函数表达式和函数声明
随着 Vue 3
中 Composition API
的引入,现在可以通过函数表达式和函数声明这两种方式声明函数。
函数声明
函数声明是在非函数式编程语言中声明函数的传统或正常方式。以function
关键字开头,后跟函数名称、一对括号,最后是一对括住函数体的花括号。
这是一个例子:
function greet(name) {
console.log(`Hello, ${name}!`);
}
函数声明的一个重要特征是它们被提升到其作用域的顶部。这意味着无论函数声明写在代码中的什么位置,都可以在同一范围内的任何位置调用。
例如:
greet("stranger"); // "Hello, stranger!"
function greet(name) {
console.log(`Hello, ${name}!`);
}
即使在定义greet()
函数之前调用该函数,也不会报错,因为函数声明也会被提升到作用域的顶部。
函数表达式
另一方面,函数表达式是产生函数的表达式。它也是使用function
关键字,将其分配给变量或对象的属性。
这是一个例子:
const greet = function() {
console.log("Hello!");
};
或使用箭头函数:
const greet = () => {
console.log("Hello!");
};
两者之间的一个关键区别是函数表达式不会被提升。它们只能在定义后才能被调用。
greet("stranger"); /* "ReferenceError: Cannot access 'greet' before initialization */
const greet = function(name) {
console.log(`Hello, ${name}!`);
}
函数表达式也比函数声明更灵活,因为它们可以在更多上下文中使用,例如作为参数传递给其他函数或用作对象的方法。
<button id="myButton">点击</button>
<script>
const myButton = document.querySelector('#myButton');
myButton.addEventListener('click', function() {
console.log('Button clicked!');
});
</script>
不久前,函数表达式还被认为是优越的,因为它们不会污染全局范围。但如今 ES 模块被广泛采用,这个优势已经没了。
事实上,这两种方式差别不大,现在,选择哪一个实际上取决于个人喜好。我个人更喜欢喜欢使用函数声明。让我们使用这两种方法来查看 Vue
组件来解释为什么更倾向于函数声明。文章来源:https://www.toymoban.com/news/detail-647106.html
在vue中使用这两种方式
函数声明
<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>
函数表达式
<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
开头。区别很微妙,但毕竟最好的代码是其他人可以轻松理解的。文章来源地址https://www.toymoban.com/news/detail-647106.html
到了这里,关于vue3 setup中函数表达式和函数声明的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!