今天继续学习vue3-常用api了解和应用。

setup

可以跟以前一样定义data和methods，但是在vue3中更推荐使用setup函数。

简单介绍

• setup是一个函数，只在初始化的时候执行一次，以后大部分代码都是在setup函数中写
• 返回一个对象，对象中的属性或方法，模板中可以直接使用
• setup返回的数据会和data和methods进行合并，setup优先级更高
• setup函数中没有this，以后开发都不使用this了
• setup不要写成async函数，因为setup函数必须返回一个json对象供模板使用，如果setup是一个async函数，返回的将是一个promise对象。如果setup是一个async函数，那该组件就成了一个异步组件，需要配合Suspense组件才能使用，关于Suspense后面会学到。

使用方法

ref

简单介绍

上面我们在setup函数中返回了一些数据，但如果直接修改这些数据，发现他们并不是响应式的，如下图所示，可以打印出新值，但是页面无变化，不是响应式。 ref就是用来定义响应式数据。

ref语法：

const XXX = ref(initValue)
创建一个包含响应式数据的引用(reference)对象
js中修改数据：xxx.value = otherValue
模板中显示数据：不需要.value，直接使用{{xxx}}

ref一般用来定义一个原始类型的响应式数据

使用方法

vue2中修改变量就是在方法中直接this.xxx=otherValue，但是vue3中使用ref，如下图所示。

reactive

简单介绍

• 作用：定义对象格式的响应式数据(如果用ref定义对象数组，内部会自动将对象/数组转换为reactive的对象)
• const proxy=reactive(obj);接收一个普通对象然后返回该普通对象的响应式代理器对象
• js中修改数据不需要操作.value
• 一般用来定义一个引用类型的响应式数据

使用方法

模板中显示数据需要取对应属性名 如果不想取对应属性名，还是想直接取name,age等，可以用拓展运算符(如下图所示)，但是非引用数据类型就没法直接更新，要想解决这个问题，可以用toRefs(后面学)。

toRefs

简单介绍

• 将响应式对象中所有属性包装为ref对象，并返回包含这些ref对象的普通对象
• 应用：对reactive定义的对象进行toRefs包装，包装之后的对象中每个属性都是响应式的

使用方法

就是用toRefs把数据包一下，这样一般数据类型也可以及时更新了。

先更新一部分，后面会继续更新，敬请期待。