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
![javaScript中this以及window对象和window对象的name属性[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)