reactive()是一个函数(方法)，里边接受的参数是一个 Object 。

Object 中的属性可以是变量和方法，changeJobname时候也不用加value。return返回不用一个个返回，只需要返回一个data,就可以了。

<template>
  <div>
    <div>职业名称: {{data.jobname}}</div>
    <button @click="data.changeJobname">change职业名称</button>
  </div>
</template>

<script>
import { reactive } from 'vue'
export default {
  name: 'Reactive',
  setup(props) {
    const data = reactive({
      jobname: 'web前端',
      changeJobname: () => {
        data.jobname = '混合开发'
      },
    })
    return {
      data,
    }
  },
}
</script>

 

但在template中，每次输出变量前面都要加一个data。有点不方便，使用扩展运算符，但解构以后就变成普通变量了不在具有响应式的能力，可以vue3的一个新函数toRefs()