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

这篇具有很好参考价值的文章主要介绍了vue3 setup中函数表达式和函数声明。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

随着 Vue 3Composition 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 组件来解释为什么更倾向于函数声明。

在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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JavaScript使用正则表达式

    正则表达式(RegExp)也称规则表达式(regular expression),是非常强大的字符串操作工具,语法格式为一组特殊字符构成的匹配模式,用来匹配字符串。ECMAScript 3以Perl为基础规范JavaScript正则表达式,实现Perl 5正则表达式的子集。JavaScript通过内置RegExp类型支持正则表达式,String和Re

    2024年02月05日
    浏览(65)
  • JavaScript正则表达式基础

    创建正则表达式,一般有两种写法 .test(\\\'需要验证的字符\\\'),正则的方法用来验证正则的匹配结果true or false 修饰符 写法:/正则/ 修饰符 示例:/abc/i (匹配字符串abc并且不区分大小) i:执行对大小写不敏感的匹配(不区分字母的大小写) g:执行全局匹配(查找所有匹配而非在

    2024年02月09日
    浏览(49)
  • JavaScript中的正则表达式

    正则表达式是一种强大的工具,可以在多种编程语言中使用,包括JavaScript。它们允许您在文本中查找和匹配模式,以及执行各种操作,如替换、拆分和验证。在JavaScript中,正则表达式通常用来检查字符串是否符合某种特定模式,并且可以用来从字符串中提取特定的子字符串

    2024年02月02日
    浏览(41)
  • 【23JavaScript 正则表达式】深入解析JavaScript正则表达式:基础概念、常用方法和实例详解,轻松掌握强大的文本模式匹配工具

    正则表达式是一种强大的文本模式匹配工具,用于在字符串中搜索和操作特定的文本模式。在JavaScript中,正则表达式提供了一种灵活的方式来处理字符串操作。 在JavaScript中,可以通过使用字面量表示法或RegExp对象来创建正则表达式。 字面量表示法 RegExp对象 JavaScript中的正则

    2024年02月08日
    浏览(61)
  • javaScript基础语法之正则表达式

    表达式 描述 [0-9] 查找任何从 0 至 9 的数字。例如,匹配: \\\'111\\\' ,不匹配:\\\'eee\\\' [abc] 查找方括号之间的任何字符。例如,/[123]/ 匹配 \\\"1234567\\\" 中的 \\\"123\\\",\\\"1\\\" 中的 \\\"1\\\"。但是不匹配 \\\"4567890\\\"。 [^abc] 查找任何不在方括号之间的字符。例如,/[^123]/ 匹配 \\\"4567890\\\" 中的 \\\"4567890\\\"。但是不匹

    2024年02月09日
    浏览(49)
  • JavaScript |(四)正则表达式 | 尚硅谷JavaScript基础&实战

    学习来源 :尚硅谷JavaScript基础实战丨JS入门到精通全套完整版 系列笔记 : JavaScript |(一)JavaScript简介及基本语法 JavaScript |(二)JavaScript自定义对象及函数 JavaScript |(三)内建对象 | 数组 | string对象 JavaScript |(四)正则表达式👇 JavaScript |(五)DOM简介 JavaScript |(六)

    2024年02月14日
    浏览(54)
  • 15个常用的javaScript正则表达式

    c 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 onsole.log(uPattern.test(“iFat3”)); 2密码强度正则 //密码强度正则,最少6位,包括至少1个大写字母,1个小写字母,1个数字,1个特殊字符 var pPattern=/

    2024年01月17日
    浏览(63)
  • 防止 JavaScript 中的正则表达式回溯

    正则表达式是用于在软件应用程序中操作和验证文本的强大工具。然而,某些正则表达式模式可能容易受到回溯的影响,这可能会导致超线性运行时,并可能导致DoS攻击。在本文中,我们将探讨什么是回溯、它如何导致性能问题以及如何在正则表达式中防止回溯。 回溯是正则

    2024年02月12日
    浏览(49)
  • 【JavaScript_2】语法、标准库、正则表达式

    1、强制转换 使用Number函数,可以将任意类型的值转化成数值。 Number函数将字符串转为数值,要比parseInt函数严格很多。基本上,只要有一个字符无法转成数值,整个字符串就会被转为NaN。 上面代码中,parseInt逐个解析字符,而Number函数整体转换字符串的类型。 另外,parseI

    2024年02月13日
    浏览(57)
  • JavaScript Web APIs - 06 正则表达式

    目标:能够利用正则表达式完成小兔鲜注册页面的表单验证,具备常见的表单验证能力 正则表达式 综合案例 阶段案例 正则表达式 (

    2024年02月10日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包