vue3定义响应式数据

1、reactive定义响应对象

• reactive是一个函数，它可以定义一个复杂数据类型，成为响应式数据；
• 通常用来定义响应式的对象数据。

未定义响应式对象前：

<template>
  <div>name:{
   {
   obj.name}}</div>
  <button @click="updateName">修改name</button>
</template>

<script>
export default {
   
    setup() {
   
        // 普通对象，它不是响应式
         const obj = {
   
            name: 'zhangsan',
             age: 18
         };
        const updateName = () => {
   
            obj.name = '我是修改后的name'
        };
        return {
   
            obj,
            updateName
        }
    }
}
</script>

定义响应式对象后：
引入reactive—>用reactive包裹住变量—>实现数据响应式到页面上

<template>
  <div>name:{
   {
   obj.name}}</div>
  <button @click="updateName">修改name</button>
</template>

<script>
import {
    reactive } from 'vue'

export default {
   
    setup() {
   
        // 定义响应式对象
        const obj = reactive({
   
            name: 'lisi',