详解Vue3中setup函数的使用教程
vue2 和 vue3 开发的区别
首先，目前来说 vue3 发布已经有一段时间了，但是呢，由于还处于优化完善阶段，对于 vue3 开发项目的需求不是很高，主要还是以 vue2 开发为主，但是相信，vue3 进行项目开发是大势所趋。
vue2 开发项目过程中，会存在代码冗余和结构杂乱问题，这是 vue3 主要解决的问题，vue3 可以将相关功能的代码抽离分割在一起，方便开发者快速阅读，提高项目代码的可读性和可维护性。
使用 setup 原因
在 vue3 版本中，引入了一个新的函数，叫做 setup，引入他的原因总结一下主要原因是：为了使用组合式 API，setup 函数是 Composition 的入口。
为什么不继续使用 vue2 当中的选项 API 了呢，原因也很简单，像 data、computed、methods、watch 在组织逻辑大多数的情况下都是没有问题的，但是当组件逻辑变得更加丰富，那么逻辑处理关注点就会越来越多，很容易导致组件阅读和维护成本提高，通过 setup 函数能够将该部分逻辑抽离成函数，让开发者不必在关心该部分的逻辑问题。
setup 用法
- setup 函数是组合式 API 的入口。
- setup 函数是启动页面后自动执行的函数。
- 页面中所涉及的变量和方法等，都需要写在 setup 函数中。
- 在 setup 中定义的变量、方法需要通过 return 返回出去才可以使用，否则无法在视图中使用。
- setup 函数位于 created 和 beforCreated 钩子之前，用来代替这两个钩子。
setup 可以接受哪些参数
setup 函数可以接受 props、context，其中， props 由于是响应式数据，不能直接解构赋值，context 不是响应式数据，可以通过解构赋值，setup 函数必须返回一个对象，只要返回对象，便可以向 vue2 的方式一样使用返回的属性或方法。
setup 详解
setup 函数自动执行
上边提到，setup 函数是页面打开之后自动执行的一个方法，当页面打开会自动执行 setup 函数当中的逻辑代码。
<template>
<div>
<h1>setup 函数</h1>
</div>
</template>
<script>
export default {
setup() {
console.log('我是𝒆𝒅.')
}
}
</script>
打开页面，可以看到我们输出打印的 我是𝒆𝒅. 输出在控制台。
setup 函数定义变量
组件中所有的变量都要在 setup 函数中定义，并且需要在 setup 函数最后通过 return 返回，才可以像 vue2 一样在模板中使用。
定义一个基本类型变量
在 setup 函数中，创建一个 name 参数，并且在页面中渲染该字段的内容。
<template>
<div>
<h1>setup 函数</h1>
<h1>名称：{{name}}</h1>
</div>
</template>
<script>
export default {
setup() {
const name = '我是𝒆𝒅.' // 定义一个基本类型变量
}
}
</script>
上面的代码编写完成，保存刷新页面，发现名称渲染出现问题，展示不出来，同时控制台报错告警。
出现这个问题的原因其实很简单，如果从 vue2 转到 vue3 的人很容易就遇到这种问题，因为上面提到过，在 setup 中创建的变量需要在 setup 函数最后通过 return 返回，才可以使用。
所以说修改上面的代码：
<template>
<div>
<h1>setup 函数</h1>
<h1>名称：{{name}}</h1>
</div>
</template>
<script>
export default {
setup() {
const name = '我是𝒆𝒅.' // 定义一个基本类型变量
return { name } // 将 name 参数抛出 【重要】
}
}
</script>
将创建的 name 参数抛出后，重新保存刷新页面，数据渲染就正常了。
同样，创建其他基本类型也是一样的编写方式。
<template>
<div>
<h1>setup 函数</h1>
<h1>名称：{{name}}</h1>
<h1>年龄：{{age}}</h1>
<h1>性别：{{sex}}</h1>
</div>
</template>
<script>
export default {
setup() {
const name = '我是𝒆𝒅.' // 定义一个基本类型变量
const age = 10
const sex = true
return { name, age, sex }
}
}
</script>
切记，声明的变量如果需要在页面中展示，必须使用 return 将声明的变量抛出。
setup 创建复杂数据类型
setup 函数创建复杂数据类型，例如数组，对象之类的，和基本数据类型相同，也是，必须通过 return 抛出后，才可以在页面中使用。
<template>
<div>
<h1>setup 函数</h1>
<h1>名称：{{boy.name}}</h1>
<h1>年龄：{{boy.age}}</h1>
<h1>性别：{{boy.sex}}</h1>
<p v-for="(item, index) in todo" :key="index">{{item}}</p>
</div>
</template>
<script>
export default {
setup() {
const boy = {
name: '我是𝒆𝒅.',
age: 10,
sex: true
}
const todo = ['弹吉他', '做作业', '练街舞']
return { boy, todo }
}
}
</script>
保存刷新页面，渲染正常。
setup 创建方法
除了变量，方法也是需要写在 setup 函数当中的，同时和变量一样，需要 return 抛出才可以使用。
创建方法的方式有两种，第一种就是很常见的通过 function 的方式创建，另一种使用过箭头函数的方式创建。
// 一、通过 function 的方式创建
function btn() {
console.log('按钮被点击了')
}
// 二、通过箭头函数的方式创建
const btn = () => {
console.log('按钮被点击了')
}
以上两种方式都可以创建方法。
例如：在页面添加一个按钮，点击按钮打印一段话在控制台输出。
<template>
<div>
<h1>setup 函数</h1>
<el-button type="primary" @click="btn">按钮</el-button>
</div>
</template>
<script>
export default {
setup() {
// 通过箭头函数的方式创建
const btn = () => {
console.log('按钮被点击了')
}
return { btn } // 将时间抛出
}
}
</script>
保存代码，刷新页面，点击按钮在控制台输出内容。
动态更新数据
在 vue2 里面，可以通过双向数据绑定动态修改页面内容，vue3 当然也是可以的。
例如，页面上有一个名字，点击按钮，修改名称内容。
<template>
<div>
<h1>setup 函数</h1>
<h1>姓名：{{name}}</h1>
<el-button type="primary" @click="btn">修改内容</el-button>
</div>
</template>
<script>
export default {
setup() {
const name = '𝒆𝒅.'
// 通过箭头函数的方式创建
const btn = () => {
name = '我是𝒆𝒅.'
}
return { name, btn }
}
}
</script>
保存上面代码，刷新页面，点击按钮之后，发现姓名没有变成 我是𝒆𝒅. 而是直接报错了。
为什么报错了累，稍微预告一下子，需要使用 ref 和 reactive 函数。
到此这篇关于详解Vue3中setup函数的使用教程的文章就介绍到这了,更多相关Vue3 setup函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue使用vm.$set()解决对象新增属性不能响应的问题,为了解决这个问题，Vue提供了一个特殊的方法vm.$set(object, propertyName, value)，也可以使用全局的Vue.set(object, propertyName, value)方法，需要的朋友可以参考下2023-05-05
这篇文章主要介绍了vue:el-input输入时限制输入的类型操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了Vue混入与插件的使用，mixins（混入），官方的描述是一种分发 Vue 组件中可复用功能的非常灵活的方式，mixins是一个js对象，它可以包含我们组件中script项中的任意功能选项，如data、components、methods 、created、computed等等2022-09-09
这篇文章主要为大家详细介绍了如何在Vue2中实现组件props双向绑定,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
vue单页面打包文件大？首次加载慢？nginx带你飞，从7.5M到1.3M蜕变过程(推荐)
这篇文章主要介绍了vue单页面打包文件大？首次加载慢？nginx带你飞，从7.5M到1.3M蜕变过程,需要的朋友可以参考下2018-01-01
Vue中Layout内部布局el-row、el-col的实现
layout是一种非常方便的布局方式,本文主要介绍了Vue中Layout内部布局el-row、el-col的实现,具有一定的参考价值,感兴趣的可以了解一下2024-07-07
这篇文章主要为大家详细介绍了vue表单验证自定义验证规则，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
这篇文章主要介绍了解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
vue路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转,下面这篇文章主要给大家介绍了关于Vue3路由传参方法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-04-04
Vue Router 为 Vue.js 应用提供了完整的路由解决方案,其中包括了组件间的数据传递功能,通过路由组件传参,我们可以轻松地在导航到新页面时传递必要的数据,本文将深入探讨如何使用 Vue Router 进行路由组件间的传参,并通过多个示例来展示其实现方式2024-09-09
最新评论