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

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

随着 Vue 3Composition 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开头。区别很微妙,但毕竟最好的代码是其他人可以轻松理解的。

相关推荐
aha-凯心29 分钟前
前端学习 vben 之 axios interceptors
前端·学习
熊出没1 小时前
Vue前端导出页面为PDF文件
前端·vue.js·pdf
VOLUN1 小时前
Vue3项目中优雅封装API基础接口:getBaseApi设计解析
前端·vue.js·api
此乃大忽悠1 小时前
XSS(ctfshow)
javascript·web安全·xss·ctfshow
用户99045017780091 小时前
告别广告干扰,体验极简 JSON 格式化——这款工具让你专注代码本身
前端
前端极客探险家1 小时前
告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
前端·算法·性能优化
袁煦丞2 小时前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆2 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记2 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆2 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js