reactive

• 定义内部数据
• 修改这个数据代码必须在setup内部运行设置方法在外面调用修改不行 [类似：私有]

reactive调用就会返回一个响应式数据对象

• setup内部使用的数据

<template>
  <div>
    <p>{{name}}</p>
  </div>
</template>
<script lang="ts">
import { defineComponent,reactive } from 'vue'
export default defineComponent({
  setup() {
    const state=reactive({
      name:'syukinmei'
    }) // reactive 调用会返回一个响应式数据对象
    state.name = 'ebiebi' // 这个数据是可以修改的
    return state
  },
})
</script>

只能在setup内部使用

<template>
  <div>
    <button @click="setName">setName</button>
    <p>{{name}}</p>
  </div>
</template>
<script lang="ts">
import { defineComponent,reactive } from 'vue'
export default defineComponent({
  setup() {
    const state=reactive({
      name:'syukinmei'
    }) // reactive 调用会返回一个响应式数据对象
    function setName(){
      state.name='ebiebi' // 这个数据是可以修改的
      console.log(state.name) // 输出ebiebi 但是渲染还是syukinmei
    }
    return {
      setName,
      ...state // state是个对象 需要结构
    }
  },
})
</script>