<template>
<div>

  <img alt="Vue logo" src="./assets/logo.png">
  <button @click = "add">add</button>

  <p>
    {{data.x}}--{{data.y}}

  </p>

</div>
  
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from './components/HelloWorld.vue';

import {ref,reactive} from "vue";

export default defineComponent({
  name: 'App',
  setup(){
       //表明它是响应式的
    const count = ref(100);
    const data = reactive({
      x:100,
      y:100
    })
    const add = ()=>{
        // 写一段逻辑
       data.x += 88;
       data.y += 99;

    }
    // 必须返回模块中才能够使
  return {
    data,
    add
  }
  }
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

reactive 实现响应式和ref没有多大的差别，无非reactive（obj） 这个函数接收的是一个对象

而且修改的时候,可以直接修改值，不需要像ref 一样，修改带一个xxx.value 去修改

就这个点差别

上面的话，是将数组放到了data 中，假如我们想吧 x,y 暴露出去，这个时候就用到了toRefs ?

试试

<template>
<div>

  <img alt="Vue logo" src="./assets/logo.png">
  <button @click = "add">add</button>

  <p>
  {{x}}---{{y}}

  </p>

</div>
  
</template>

<script lang="ts">
import { defineComponent } from 'vue';
// import HelloWorld from './components/HelloWorld.vue';

import {reactive ,toRefs} from "vue";

export default defineComponent({
  name: 'App',
  setup(){

    const data = reactive({
      x:100,
      y:100
    })

  // reactData 展开好后自带响应式
    const reactData = toRefs(data);
    const add = ()=>{
        // 写一段逻辑
      data.x +=10;
      data.y +=10;

    }
    // 必须返回模块中才能够使
  return {
    add,
    ...reactData
  }
  }
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

修改的比较多，也可以实现类似的功能！

行，大家去测试下吧！同学加油！