Vue3 reactive

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

<template>
    <div>{{ job.type }}</div>
    <div>{{ arr }}</div>
</template>

<script>
import { reactive } from 'vue'               // 一定要引入reactive
export default {
  steup() {
      let job = reactive({                   // reactive可以是对象数据类型
          type: '工程师',
          money: 4000
      })
      
      let arr = reactive(['数据1'，'数据2'])  // reactive也可以是数组数据类型
      
      function change(){
          job.type = '农名工'                // 对象类型的数据直接.
          job.money = 5000
          arr[0] = '更新数据1'               // Vue3中可以实现数组的数据响应式了！
      }
  
      return{
          job,
          arr
      }
  }
}
</script>

当要初始化一个空对象时，使用reactive最好先将里面的结构一起定义好；或者使用ref初始化一个空对象，

<template>
    <div>{{ job.type }}</div>
    <div>{{ person.name }}</div>
</template>

<script>
import { reactive } from 'vue'               // 一定要引入reactive
export default {
  steup() {
      let job = reactive({                   // 先定义好reactive里面的结构
          type: '',
          money: 0
      })
	  
	  let person = ref({})
      
      function change(){
          job.type = '农名工'                // 对象类型的数据直接.
          job.money = 5000
          arr[0] = '更新数据1'               // Vue3中可以实现数组的数据响应式了！
      }
	  
	  function newPerson() {
		  name: '张三',
		  age: 18
	  }
  
      return{
          job,
          person
      }
  }
}
</script>