Vue3中Setup概述和使用(三)

一、引入Setup

1、Person.Vue

与Vue3编写简单的App组件(二) 中的区别是：取消data、methods等方法,而是将数据和方法定义全部放进setup中。

2、App.Vue

3、页面效果

注意：此时`修改姓名`和`修改年龄`按钮并不会生效，因为数据还不是响应式的。

二、Setup语法糖

以上方式中，在Setup中定义的变量和方法需要return出去，才能够被模板引用，如果变量和方法过多，就会比较繁琐，由此引入setup语法糖。

 Person.vue文件完整源码

三、ref和reactive实现响应式数据

1、ref基本类型响应式数据使用

适用对象：基本数据类型，使用步骤如下：

(1) 引入ref

 import {ref} from 'vue'

(2) 使用ref修饰数据

let name = ref('Maple')

(3) 调用变量并修改数据

# 注意要加value,才能够获取变量(被包装之后的)对应的值
name.value == 'Maple'

Person.vue完整代码如下：

2、ref对象类型响应式数据使用

适用对象：ref同时支持对象类型的响应式

3、reactive使用

适用对象：只支持对象类型数据，使用步骤如下：

(1) 引入reactive

import { reactive } from 'vue'

(2) 使用reactive修饰数据

let computer = reactive({ brand: 'hp', price: 5500 })

(3) 修改数据

 computer.price = 5000

  Person.vue文件完整源码

4、ref和reactive的区别

（1）ref支持基本类型和对象类型数据；reactive仅支持对象类型数据

（2）ref获取变量值需要使用.value,而reactive直接通过变量获取

（3）针对对象的一次性修改，两者方式不一样，具体可参照如下案例：

5、to_refs和to_ref