vue2与vue3的区别

template

<template>
  <div class="wrap">
    <div>{{ num }}</div>
    <Button @click="getData">改变数据</Button>
  </div>
</template>
<style lang="less" scoped>
  .wrap {
    width: 100%;
    height: 100%;
    border: 1px solid red;
  }
</style>

vue2

<!-- vue2 -->
<script>
  export default {
    data() {
      return {
        num: 333,
      };
    },
    //
    mounted() {
      alert('111');
      this.getData();
    },
    methods: {
      getData() {
        this.num = '2222';
      },
    },
  };
</script>

vue3.0

<!-- vue3.0 -->
<script>
  import { defineComponent, ref } from 'vue';
  export default defineComponent({
    setup() {
      let num = ref(1223);
      function getSecondData(params) {
        alert('222');
      }
      function getData(params) {
        num.value = 'weruwiru';
        getSecondData();
      }
      return {
        num,
        getData,
      };
    },
  });
</script>

vue3.2

<!-- vue3.2 -->
<script setup>
  import { ref } from 'vue';
  let num = ref(1223);
  function getSecondData(params) {
    alert('222');
  }
  function getData(params) {
    num.value = 'weruwiru';
    getSecondData();
  }
</script>