--- theme: channing-cyan highlight: github-gist --- ## 一、前言 > 昨天讲了什么是`组合式API`，[# 马上都2202年了你还不知道什么是Vue3的组合式API吗？](https://juejin.cn/post/7028629804173770765)今天就来听我吹一吹vue3的`setup`都能怎么用 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/825332d72bc7497fa114780b106f3d09~tplv-k3u1fbpfcp-watermark.image?) 借用官网一句话 > `setup` 选项是一个接收 `props` 和 `context` 的函数也就是说它的基本写法应该是这样的 ```js export default{ name: 'test', setup(props,context){ return {} // 这里返回的任何内容都可以用于组件的其余部分 } // 组件的“其余部分” } ``` 接收一个`props`和`context`函数并且将`setup`内的内容通过`return`暴露给组件的其余部分。 ## 二、`setup`注意点 - 由于在执行 setup函数的时候，还没有执行 Created 生命周期方法，所以在 setup 函数中，无法使用 data 和 methods 的变量和方法 - 由于我们不能在 setup函数中使用 data 和 methods，所以 Vue 为了避免我们错误的使用，直接将 setup函数中的this 修改成了 undefined ## 三、定义响应式数据 ### `ref` `reactive` vue3通过`ref` `reactive`来定义响应式数据 > ref和reactive一样, 也是用来实现响应式数据的方法 > > - 由于reactive必须传递一个对象, 所以导致在企业开发中如果我们只想让某个变量实现响应式的时候会非常麻烦所以Vue3就给我们提供了ref方法, 实现对简单值的监听 `ref`我们用来将`基本数据类型`定义为响应式数据（ref更适合定义基本数据类型），ref底层的本质其实还是reactive，系统会自动根据我们给ref传入的值将它转换成`ref(xx) -> reactive({value:xx})` `reactive`用来将`引用类型`定义为响应式数据，其本质是基于`Proxy`实现对象代理 - **基本数据类型（单类型）**：除Object。 String、Number、boolean、null、undefined。 - **引用类型**：object。里面包含的 function、Array、Date。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/479e08fc83bf4268a3a7b6dac4242cb3~tplv-k3u1fbpfcp-watermark.image?) 定义 ```js ``` 使用 ```html ``` 结果 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4770ad18de154ae9987912ca73183ddc~tplv-k3u1fbpfcp-watermark.image?) ## 四、`toRefs` 如果我们用`reactive`的形式来定义`响应式`变量 ```js setup(){ const obj = reactive({ name:'inline', gender:'男', age:'18' }) return{ obj } } ``` 使用 ```html

姓名:{{ obj.name }}

性别:{{ obj.gender }}

年龄:{{ obj.age }}

``` 这样我们是不是发现在模板内使用参数很麻烦，那我们想直接用`{{ name }}`的方式访问行不行，答案是可行的这里我们使用`es6`的扩展运算符 ```js setup(){ const obj = reactive({ name:'inline', gender:'男', age:'18', }) return{ ...obj, } } ``` 使用 ```html

姓名:{{ name }}

性别:{{ gender }}

年龄:{{ age }}

``` 结果 ![动画.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d141f2f216da4f53b92e203dcd700936~tplv-k3u1fbpfcp-watermark.image?) 这里看到我们的参数都正常的显示到了页面上，但是我们去改变参数时发现视图并没有更新，这是为什么呢？？？ ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1dde2367a5d41d7ade5ac251dbc9b96~tplv-k3u1fbpfcp-watermark.image?) 我们把扩展运算符写成它的等价格式 ```js const obj = reactive({ name:'inline', gender:'男',A age:'18', }) // ...obj ==> name:obj.name ``` 哎哎哎，等下我的鼠标浮动上去怎么提示我`name`只是一个字符串？ ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d8feacae715c401783940604ae725f10~tplv-k3u1fbpfcp-watermark.image?) 那我们在看看我们用`ref`定义值时提示什么 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c643fe521561497ebedb59ddd625e308~tplv-k3u1fbpfcp-watermark.image?) 奥奥，这个时候我们看到`name`是一个`Ref`，是一个`响应式`字符串。这样我们就找到了为什么没有更新视图的原因，当我们用`...扩展运算符`时我们得到的只是一个普通类型的数值，并不是一个响应式数据为了解决这个问题呢，vue3给我们提供了`toRefs`函数,来让我们看看效果如何 ```js setup(){ const obj = reactive({ name:'inline', gender:'男', age:'18', }) return{ ...toRefs(obj), } } ``` ```html

姓名:{{ name }}

性别:{{ gender }}

年龄:{{ age }}

``` 参数都可以正常改变，成功改头换面 ![动画1.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1eda464d9fbd4c06a2efeabeadc0509f~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9e96af506c7a46f1970e0e754f23ad76~tplv-k3u1fbpfcp-watermark.image?) ### toRefs总结 > `toRefs`会将我们一个`响应式`的对象转变为一个`普通`对象，然后将这个`普通对象`里的每一个属性变为一个响应式的数据 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/57d6c7353f534207858107f03776998d~tplv-k3u1fbpfcp-watermark.image?) ## 五、`setup`中执行方法 ### 方式一以`reactive`定义响应式数据的方式来定义方法 ```js ``` 通过点击事件将值传给`fun1`，`fun1`接收到后在传给`fun2` 这里我们用`this.fun2()`的方式去调用`fun2`，为什么这里用`this`可以正常执行不会报`undefind`，因为这里的`this`非彼`this`，Vue2里的`this`是实例这里的`this`是对象 ```html ``` 结果,成功调用并输出 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/257785b4687d40cf9c864b8c373251d0~tplv-k3u1fbpfcp-watermark.image?) ### 方式二注意这里调用`fun2`的方式与方式一不同，直接调用就可以，不用`this`调用 ```js export default { name: "test", setup(){ const fun1 = (data) => { fun2(data) } const fun2 = (data) => { console.log(data) } return{ fun1, } } } ``` 调用 ```html ``` 结果 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/de27dfd8c264406992766011800837f3~tplv-k3u1fbpfcp-watermark.image?) ### 方式三这种方式避免了将功能逻辑都堆叠在`setup`的问题，我们可以将独立的功能写成单独的函数这里我在`setup`外写了`fun()` `login()`两个功能函数，并在setup内分别调用 ```js import {ref, reactive,toRefs} from "vue"; export default { name: "test", setup(){ const test1 = fun() // 如果函数返回参数过多，可以赋值给变量并用扩展运算符暴露给组件的其余部分 const { test } = login() // 也可单个接收 return{ ...toRefs(test1), test, } } } // 功能1 function fun(){ let str = ref('我是功能1') function fun1(data){ console.log(str.value) fun2(data) } function fun2(data){ console.log(data) } return{ fun1, fun2, } } // 功能2 function login() { const obj = reactive({ msg:'我是功能2，我爱掘金' }) function test() { console.log(obj.msg) } return{ test } } ``` 调用 ```html ``` 结果 ![动画.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/02ceef5d63f04e4fb98a7703f87acc0a~tplv-k3u1fbpfcp-watermark.image?) ### 方式四与方式三一样，只是我们将两个功能函数提取出来放在单独的`.js`文件中 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/753242a52cc042f08ee639a470f9c7d7~tplv-k3u1fbpfcp-watermark.image?) 然后引入组件，并在`setup`内调用 ```js ``` 正常执行且输入 ![动画.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/346ecadb7a634a6798e92ba88208d27f~tplv-k3u1fbpfcp-watermark.image?) ### 方式五我们还可以这样写，这里我定义一个`reactive`响应式对象，赋值给`login`变量，这个响应式对象内有我们登录需要的`参数`、`验证`和`方法`，这里我们全部放在`login`这个响应式对象内然后用`toRefs`及`扩展运算符`暴露出去 ```js ``` 我们使用一下 ```html ``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f50af55ad4fb4917b5ec970c1f6699b3~tplv-k3u1fbpfcp-watermark.image?) 正常执行，所以我们还可以将一个功能的所有方法和相关参数写在一个`reactive`对象内 ![表情包1.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/43f69910653f4d2e9f1e7fa6b21435f3~tplv-k3u1fbpfcp-watermark.image?) > 如有遗漏的执行方式欢迎评论区指出~~~ ## 六、script setup `script setup`已在vue3.2的版本上正式发布用法 ```js ``` 是不是异常简单 ### 变量方法无需`return` > 使用` ``` `script setup`内定义的变量和方法无需返回，可直接使用 ### 组件引入导入的组件无需注册，可直接使用 ```js ``` ### 发布`Props`和`Emits` ```JS ``` ### 普通`script`和`script setup` `script setup`可以和`script`同时存在 ```js ``` ### `script setup` 附加选项 > `script setup`给我们提供了大多数与 `options api`等效的能力 > > 就是说`options api`能办到的事 `script setup`大部分都能办到那还有哪些是`script setup`做不到的呢？如下： - `name` - `inheritAttrs` - 插件或库所需要的自定义选项那我要是想用这些怎么办呢？答案是**分开写** ```js ``` ### defineExpose `script setup`定义的变量默认不会暴露出去，因为变量这时候包含在`setup`的闭包中。这时我们可以使用`definExpose({ })`来暴露组件内部属性给父组件使用 ```js ``` 当父组件通过模板引用获取此组件的实例时，检索到的实例将会是这样`{ a: number, b: number }`（引用会像在普通实例上一样自动展开） ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3d90bf5b01284d3185058b075fbac8f8~tplv-k3u1fbpfcp-watermark.image?) ## 七、写在最后 `script setup`可以说的东西还有很多，等我这几天整明白了可以单独出一期它的用法。最后感谢您的阅读~~~您的点赞和阅读就是对我最大的鼓励~~~ ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2e112232c0de43048501aa62a171d8a9~tplv-k3u1fbpfcp-watermark.image?) 往期vue3文章： [# 在实验 vue3.2中的script setup时，关于...toRefs的应用尝试](https://juejin.cn/post/7030453540657037325) [# 什么是Vue3的组合式API？](https://juejin.cn/post/7028629804173770765)

基本类型

引用类型