vue3.0 setup函数

Options API 和 Composition API

Options API 约定:

我们需要在 props 里面设置接收参数

我们需要在 data 里面设置变量

我们需要在 computed 里面设置计算属性

我们需要在 watch 里面设置监听属性

我们需要在 methods 里面设置事件方法

你会发现 Options APi 都约定了我们该在哪个位置做什么事,这反倒在一定程度上也强制我们进行了代码分割。

现在用 Composition API,不再这么约定了,于是乎,代码组织非常灵活,我们的控制代码写在 setup 里面即可。

setup函数提供了两个参数 props和context,重要的是在setup函数里没有了this,在 vue3.0 中,访问他们变成以下形式: this.xxx=》context.xxx

我们没有了 this 上下文,没有了 Options API 的强制代码分离。Composition API 给了我们更加广阔的天地,那么我们更加需要慎重自约起来。

对于复杂的逻辑代码,我们要更加重视起 Composition API 的初心,不要吝啬使用 Composition API 来分离代码,用来切割成各种模块导出。

我们期望是这样的:

importuseAfrom'./a';

importuseBfrom'./b';

importuseCfrom'./c';

exportdefault{

setup (props) {

let{ a, methodsA } = useA();

let{ b, methodsB } = useA();

let{ c, methodsC } = useC();

return{

a,

methodsA,

b,

methodsB,

c,

methodsC

}

}

}

就算 setup 内容代码量越来越大,但是始终围绕着大而不乱,代码结构清晰的路子前进。

推荐阅读更多精彩内容