vue3 基础-CompositionAPI - setup
之前介绍的是一些关于代码复用的问题, 如 mixin, plugin 等. 从本篇开始呢, 就将来学习一波 vue3 的新特性, 即 Composition API
咱之前的写法, 即把各种逻辑, 方法都放到 data, methods, template ... 中, 在实际开发中就会带来一个维护的问题, 尤其是很长的时候, 逻辑一会儿要用 data, 一会儿用 methods, 然后用 template .. 上下翻滚维护, 最后就变成了 "屎山".
<!DOCTYPE html>
<html lang="en">
<head>
<title>Options API</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data() {
return { name: 'youge', age: 18 }
},
// Options API, 将很多方法, 逻辑写在 methods, tempalte...中
methods: {
A () {},
B () {},
C () {},
D () {},
E () {},
},
template: `<div>name: {{name}}, age: {{age}}</div>`
})
const vm = app.mount('#root')
</script>
</body>
</html>
实际上，选项式 API 是在组合式 API 的基础上实现的.
选项式 Options API 以“组件实例”的概念为中心 (如之前用的 this)，对于有面向对象语言背景的用户来说，这通常与基于类的心智模型更为一致。同时，它将响应性相关的细节抽象出来，并强制按照选项来组织代码，从而对初学者而言更为友好。
组合式 Compositon API 的核心思想是直接在函数作用域内定义响应式状态变量，并将从多个函数中得到的状态组合起来处理复杂问题。这种形式更加自由，也需要你对 Vue 的响应式系统有更深的理解才能高效使用。相应的，它的灵活性也使得组织和重用逻辑的模式变得更加强大。
从实际项目来看, 尤其是多个复杂场景就涉及到多个路由呀, 组件呀, 复杂页面之类的, 当然选 Compositon API 呀, 能真正去分工解耦, 组件化, 模块化, 爽得不行.
setup 函数
因此, 我们首先来介绍这个 setup 函数, 它是在 created 实例被完全初始化之前被执行.
这样一来, 咱就可以将 composition API 都包裹在里面啦.
setup(props, context) {
retrun {
变量, 函数 等, 都能被外面单文件使用哦
}
}
用一个小栗子来演示则:
<!DOCTYPE html>
<html lang="en">
<head>
<title>setup</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
template: `<div @click="handleClick">{{name}}</div>`,
// setup 函数在 created 实例被完全初始化之前会执行
// app 创建前 setup 无效, 即不能用 this; 之后则挂载到app
setup (props, context) {
return {
name: 'youge',
handleClick () {
alert(666)
}
}
}
})
const vm = app.mount('#root')
</script>
</body>
</html>
小结
- Compositon API 在函数作用域内定义响应式变量, 多个组合状态来处理复杂问题
- setup 函数在 created 实例被完全初始化之前会执行
- setup 函数将不能再使用
this即在 app 创建前 setup 是无效的啦, 之后才会挂载到 app
耐心和恒心, 总会获得回报的.
分类:
Vue3 基础相关
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！