vue3.x新特性之setup函数，看完就会用了

Posted 2023-03-02

参考技术A

最近有小伙伴跟我聊起setup函数，因为习惯了vue2.x的写法导致了，setup用起来觉得奇奇怪怪的，在一些api混编的情况下，代码变得更加混乱了，个人觉得在工程化思想比较强的团队中使用setup确实能更好的使用模块化开发，但是用得不好的话也确实降低了代码的可读性。本篇文章是从使用角度来聊聊setup的实际使用。

1、setup和以前的api（data，methods，computed等）并不冲突，也是可以相互访问的，值得注意的是setup里面不能用this，并且在setup执行的时候组件实例还未创建完毕，故不也能使用data，methods，computed定义的变量和函数。如下混编示例：

2、setup 还可以返回一个渲染函数，不过返回一个渲染函数将阻止我们返回任何其它的东西，当我们想暴漏函数给其父组件使用的时候，可以使用expose来处理这个问题。示例如下：

看到这里就完全可以使用setup来做项目了，接下来就是封山开路遇水搭桥，碰到不会的就各种查，磕磕碰碰总能成功。然而一篇帖子不能写到这里就结束了，后面还有一大堆相关的知识点呢。

为什么聊响应式呢，因为setup里面返回的变量虽然可以直接在模版语法中使用，但是它并不是响应式的，如上面第一个示例，我们如果在模版中使用了 count 来展示count的值，然后我们改变count的值，值改变了，但是显示不会变化。

响应式这块在官网api比较多，只说几个用得比较多的。
1、上面有提到的ref，ref 接收参数并将其包裹在一个带有 value property 的对象中返回，然后可以使用该 property 访问或更改响应式变量的值。最简单的例子，上面示例改成响应式的，如下：

2、reactive返回对象的响应式副本。这个比较好理解，跟以前2.x时代差别不大。

3、toRef 和 toRefs 这两个函数都是为了获取一个响应式的子项，并且跟以前的响应式数据进行关联

注意 ：toRefs 只会为源对象中包含的 property 生成 ref。如果要为特定的 property 创建 ref，则应当使用toRef，简单粗暴的理解toRef可以给源对象添加一个关联的响应式属性，如：（本想写在上面示例中，不过感觉不清晰，就单独列了一块伪代码）

使用 setup 函数时，它将接收两个参数：
Props
setup 函数中的第一个参数是 props 。正如在一个标准组件中所期望的那样， setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。

但是，因为 props 是响应式的，你 不能使用 ES6 解构 ，它会消除 prop 的响应性，上面说到的toRefs可以很好的解决这个问题。

如果 title 是可选的 prop，则传入的 props 中可能没有 title 。在这种情况下， toRefs 将不会为 title 创建一个 ref 。你需要使用 toRef 替代它：

Context
传递给 setup 函数的第二个参数是 context 。 context 是一个普通 javascript 对象，暴露了其它可能在 setup 中有用的值：

在setup中可以访问到以下生命周期钩子：

这些函数接受一个回调函数，当钩子被组件调用时将会被执行，如：

原创不易，转载请注明出处，欢迎留言提议。