侧边栏壁纸
博主头像
码森林博主等级

一起走进码森林,享受编程的乐趣,发现科技的魅力,创造智能的未来!

  • 累计撰写 145 篇文章
  • 累计创建 73 个标签
  • 累计收到 4 条评论

目 录CONTENT

文章目录

Vue3 | ref 与 reactive 的使用

码森林
2023-04-14 / 0 评论 / 0 点赞 / 312 阅读 / 516 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-04-14,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

使用 Vue + TypeScript 时,可以通过引入refreactive来实现响应式的数据处理。

ref

ref用于将基本数据类型(如字符串、数字、布尔类型等)转换为可响应式的对象。使用示例如下:

import { ref } from 'vue'

const count = ref(0)

此时的count就是一个可响应式的对象,它有以下属性:

  • value: 存储了基本数据类型的值的属性,类似于普通变量
  • readonly value: 只读的属性,不能对其进行修改

在模板中使用时,需要对value属性进行访问,示例如下:

<template>
  <div>
    <p>Count: {{ count.value }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    const increment = () => {
      count.value++
    }

    return {
      count,
      increment
    }
  }
}
</script>

reactive

reactive用于将复杂的对象转换为可响应式的对象,使用示例如下:

import { reactive } from 'vue'

const state = reactive({
  count: 0,
  message: 'Hello, world!'
})

此时的state就是一个可响应式的对象,它包含了两个属性:countmessage,这两个属性都是可响应式的。

在模板中使用时,可以直接访问state对象及其属性,示例如下:

<template>
  <div>
    <p>Count: {{ state.count }}</p>
    <p>Message: {{ state.message }}</p>
    <button @click="increment">Increment</button>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script lang="ts">
import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0,
      message: 'Hello, world!'
    })

    const increment = () => {
      state.count++
    }

    const updateMessage = () => {
      state.message = 'Hello, Vue + TypeScript!'
    }

    return {
      state,
      increment,
      updateMessage
    }
  }
}
</script>

需要注意的是,在使用reactive时,如果需要在函数组件中修改对象的属性,需要使用readonlyreadonly ref来声明该属性。这样可以确保属性是只读的,但是还是能够被响应式地更新。

0

评论区