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

相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子1 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina1 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路2 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_2 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js