vue3 reactive 实现响应式

<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-f