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函数调用完毕的返回值以对象的形式返回出去