（二）常用的Composition API：setup函数和ref函数

一杯清酒.

已于 2022-10-04 20:10:39 修改

阅读量618

点赞数

分类专栏： Vue3 文章标签： vue.js 前端框架 javascript 前端 chrome

于 2022-04-19 13:35:35 首次发布

本文链接：https://blog.csdn.net/qq_45827004/article/details/124270791

版权

Vue3 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue3.x中setup函数的使用，包括其执行时机、参数解析以及注意事项，强调了setup中不能混用Vue2.x配置，并指出setup中无法访问Vue2.x的数据和方法。同时，文章探讨了ref函数的作用，如何定义响应式数据，并解释了ref对象在JavaScript和模板中的使用方式。总结了ref函数的关键点和应用场景。

摘要由CSDN通过智能技术生成

一，setup

（1）组件中所用到的：数据、方法等等，均要配置在setup中。

（2）若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。模板中需要使用的数据和方法需要在setup()中返回（重点关注！）

setup(){
    let name = 'yy'
    function say(){}
 return { name, say }
}

若返回一个渲染函数：则可以自定义渲染内容。（了解）

（3）在setup函数中获取值的时候，不需要加this，在beforecreated之前执行，无this.

注意点：

尽量不要与Vue2.x配置混用
- Vue2.x配置（data、methos、computed...）中可以访问到setup中的属性、方法。
- 但在setup中不能访问到Vue2.x配置（data、methos、computed...）。
- 如果有重名, setup优先。
setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合

setup使用时的两个注意点

setup执行的时机
- 在beforeCreate之前执行一次，this是undefined。
setup的参数
- props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
- context：上下文对象
  - attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。
  - slots: 收到的插槽内容, 相当于 this.$slots。具名插槽 v-slot：...
  - emit: 分发自定义事件的函数, 相当于 this.$emit。

二，ref函数

作用：解决数据不是响应式的问题

（1）导入ref函数

import {ref} from 'vue'

（2）把数据交给ref函数

let name = ref('张三')
let age = ref(22)

（3）通过RefImpl引用对象调用

name.value = '张三'
age.value = '18'

（4）返回出去

return { name, age }

注意：模板中直接使用即可 { { name } }

总结：

作用: 定义一个响应式的数据
语法: const xxx = ref(initValue)
- 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。
- JS中操作数据： xxx.value
- 模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>
备注：
- 接收的数据可以是：基本类型、也可以是对象类型。
- 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。
- 对象类型的数据：内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数