ref的基本用法

最新推荐文章于 2024-02-21 19:06:48 发布

原创最新推荐文章于 2024-02-21 19:06:48 发布 · 4.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端

前端同时被 2 个专栏收录

40 篇文章

订阅专栏

10 篇文章

订阅专栏

本文介绍了在 Vue.js 中如何使用 ref 函数创建响应式数据，包括基本的简单数据类型和复杂的对象数据类型。在模板中直接使用响应式数据，并展示了如何更新数据的示例代码。同时提到了在处理后端返回的复杂数据时，ref 的适用性。

基本使用

ref 函数，可以把简单数据类型包裹为响应式数据（复杂类型也可以），注意 JS 中操作值的时候，需要加 .value 属性，模板中正常使用即可。

<template>
  <div class="container">
    <div>{{ name }}</div>
    <button @click="updateName">修改数据</button>
  </div>
</template>
<script>
  import { ref } from 'vue'
  export default {
    name: 'App',
    setup() {
      const name = ref('ifer')
      const updateName = () => {
        name.value = 'xxx'
      }
      return { name, updateName }
    }
  }
</script>

包装复杂数据类型

注意：ref 其实也可以包裹复杂数据类型为响应式数据，一般对于数据类型未确定的情况下推荐使用 ref，例如后端返回的数据。

<template>
  <div class="container">
    <div>{{ data?.name }}</div>
    <button @click="updateName">修改数据</button>
  </div>
</template>
<script>
  import { ref } from 'vue'
  export default {
    name: 'App',
    setup() {
      // 初始值是 null
      const data = ref(null)
      setTimeout(() => {
        // 右边的对象可能是后端返回的
        data.value = {
          name: 'ifer'
        }
      }, 1000)
      const updateName = () => {
        data.value.name = 'xxx'
      }
      return { data, updateName }
    }
  }
</script>