vue3响应式ref函数

我们使用Vue3的setup，触发数据改变，但是数据不会及时更新到页面上

（1）不使用ref函数

<template>
  <div>{{ number }}</div>
  <button @click="addNumber">加1</button>
</template>
 
<script>
export default {
  setup() {
      let number =1 ,
      addNumber = () => {
          number++
          console.log(number);
      }
      return {number, addNumber}
  },
};
</script>

点击按钮会发现，页面视图没发生变化，说明现在setup函数中返回的数据并不是响应式的

（2）使用ref函数

被ref包裹之后会返回RefImpl对象，使用时必须用.value

<script>
import { ref } from 'vue'
export default {
  setup() {
      let number = ref(1),
      addNum = () => {
          number.value++
          console.log(number);
      }
      return {number, addNumber}
  },
};
</script>

使用步骤

① 从vue框架中导入ref函数

② 使用ref函数并传入数据(简单数据类型或复杂数据类型)

③ 在setup函数中把ref函数调用完毕的返回值以对象的形式返回出去