ref的基本使用以及用vue2和vue3实现同一种需求的写法对比

 一、ref

作用：定义一个数据的响应式

语法：const xxx = ref(initValue);

 注意：1、js中操作数据xxx.value

            2、返回的是一个ref对象，对象中有一个value属性，

           3、模板中操作数据，不需要value 

二、vue2与vu3分别实现页面打开后可以直接看到一个数据，点击按钮后，该数据可以发送变化。

vue2实现

<template>

  <h2>setup和ref的基本使用</h2>

  <h3>{{ count }}</h3>

  <button @click="updateCount">更新数据</button>

</template>

<script lang="ts">

import { defineComponent } from 'vue';

export default defineComponent({

  name: 'App',

  //vue2的方法实现

  data() {

    return {

      count:0, //属性

    }

  },

  methods:{

    updateCount() { //方法

      this.count++

    }

  }

})

</script>

vue3实现

<template>

  <h2>setup和ref的基本使用</h2>

  <h3>{{ count }}</h3>

  <button @click="updateCount">更新数据</button>

</template>

<script lang="ts">

import { defineComponent, ref } from 'vue';

export default defineComponent({

  name: 'App',

  //vue3的方法实现

  //setup是组合API的入口函数

  setup(){

    //定义变量

    // let count = 0 //此时的数据并不是响应式的数据(数据变化，页面跟着渲染变化)

    const count = ref(0)

    //方法

    function updateCount(){

      count.value++

    }

    //返回的是一个对象

    return {

      //属性

      count,

      //方法

      updateCount

    }

  }

})

</script>