ref 创建基本类型的响应式数据

作用

定义响应式变量, 通常用于定义基本类型数据的响应式变量

ref也可以定义对象类型数据的响应式变量, 下文会讲解

语法

• 代码示例

<template>
  <div class="person">
    <h2>姓名: {{ name }}</h2>
    <button @click="changeName">修改姓名</button>
  </div>
</template>

<script lang="ts" name="Person" setup>
  import { ref } from 'vue'
  // name 是一个 RefImpl 的实例对象, 简称 ref 对象, name 的 value 属性是响应式的
  let name = ref('张三')

  function changeName(){
    // 操作 ref 对象时候需要 .value
    name.value = 'Zhang San'
    console.log(name)
    /*
      注意: name 不是响应式的, name.value 是响应式的
      所以如下代码并不会引起页面的更新
    */
    // name = ref('zhang-san')
  }
</script>

注意

• 操作数据需要: xxx.value, 但模板中不需要.value, 直接使用即可
• 对于let name = ref('张三')来说, name不是响应式的, name.value是响应式的

返回值

ref返回一个RefImpl的实例对象, 简称ref对象或ref, ref对象的value属性是响应式的