526互联

reactive函数

发布时间 2023-07-08 22:44:45作者: TestRookie

  • 作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）

  • 语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）

  • reactive定义的响应式数据是“深层次的”。

  • 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。

 

<template>
  <!-- vue3组件中的模板结构可以没有根标签 -->
  <h1>一个人的信息</h1>
  <h2>姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <h2>爱好{{person.hobby}}</h2>
  <h2>工作类型：{{person.job.type}}</h2>
  <h2>薪水：{{person.job.salary}}</h2>
  <button @click="changeInfo">更新信息</button>
</template>

<script>
import {reactive} from 'vue'

export default {
  name: 'App',
  setup() {
    //数据
    let person = reactive({
      name: '张三',
      age: 20,
      job: {
        type:'前端工程师',
        salary:'30k'
      },
      hobby: ['抽烟','喝酒','烫头']
    })

    //方法
    function changeInfo(){
      person.name = '李四'
      person.age = 30
      person.job.type = 'java工程师'
      person.job.salary = '35k'
      person.hobby[0] = '学习'
      console.log(person);
    }

    //setup的返回值,返回一个对象
    return{
      person,changeInfo
    }

  }
 
}
</script>

<style>

</style>