Vue3.0 reactive函数案例

reactive函数

• 作用:定义一个对象类型的响应式数据（基本类型别用它，用ref函数)
• 语法: const 代理对象= reactive(被代理对象）接收一个对象（或数组)，返回一个代理器对象(proxy对象)
• reactive定义的响应式数据是“深层次的"。
• 内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据都是响应式的。

App.vue代码：

<template>
  <h1>一个人的信息</h1>
  <h2>姓名:{{person.name}}</h2>
  <h2>年龄:{{person.age}}</h2>
  <h3>工作种类:{{person.job.type}}</h3>
  <h3>工作薪水:{{person.job.salary}}</h3>
  <h3>爱好:{{person.hobby}}</h3>
  <h3>测试的数据c:{{person.job.a.b.c}}</h3>
  <button @click="changeInfo">修改人的信息</button>
</template>

<script>
import {reactive} from 'vue'
export default{
  name:'App',
  setup(){
    //数据
    let person = reactive({
      name: '张三',
      age: 18,
      job:{
        type:'前端工程师',
        salary:'30k',
        a:{
          b:{
            c:666
          }
        }
      },
      hobby:['抽烟','喝酒','烫头']
    })

    //方法
    function changeInfo(){
      person.name = '李四'
      person.age = 11
      person.job.type = 'UI设计师'
      person.job.salary = '60k'
      person.job.a.b.c = 999
      person.hobby[0] = '学习'
    }

    //返回一个对象（常用）
    return{
      person,
      changeInfo
    }
  }
}
</script>

main.js代码：

//引入的不再是Vue构造函数了，引入的是一个名为createApp的工厂函数
import { createApp } from 'vue'
import App from './App.vue'

//创建应用实例对象—app(类似于之前Vue2中的vm，但appl比vm更“轻”)
const app = createApp(App)

//挂载
app.mount('#app')

效果：