vue3-02声明响应式状态ref()

一、使用

组合式 API 中,推荐使用 ref() 函数来声明响应式状态,例如

javascript 复制代码
import { ref } from 'vue'
const count = ref(0)

注意点1:若想获取ref定义的参数,必须获取参数的value值,

比如:

javascript 复制代码
console.log('count', count) // 打印的是{ value: 0 }
console.log('count.value', count.value) // 打印的是0

注意点2:注意,在模板中使用 ref 时,我们不需要附加 .value,

当在模板中使用时,ref 会自动解包 (有一些注意事项),可以直接在事件监听器中改变一个 ref,例如

javascript 复制代码
 <button @click="count++">
    {{ count }}
  </button>

1、ref 自动解包 (注意事项)

在模板渲染上下文中,只有顶级的 ref 属性才会被解包。

在下面的例子中,count 和 object 是顶级属性,但 object.id 不是:

javascript 复制代码
const count = ref(0)
const object = { id: ref(1) }

因此,

javascript 复制代码
{{ count + 1 }} // 预期工作-得到的结果是1
{{ object.id + 1 }} // 不会预期工作 -- 得到的结果是[object Object]1

因为在计算表达式时 object.id 没有被解包,仍然是一个 ref 对象。为了解决这个问题,我们可以将 id 解构为一个顶级属性

javascript 复制代码
const { id } = object
{{ id + 1 }}// 预期工作,结果是2

另一个需要注意的点是,如果 ref 是文本插值的最终计算值 (即 {{ }} 标签),那么它将被解包,因此以下内容将渲染为 1

javascript 复制代码
{{ object.id }}
// 该特性仅仅是文本插值的一个便利特性,等价于 {{ object.id.value }}。

2、深层响应性

Ref 可以持有任何类型的值,包括深层嵌套的对象、数组或者 JavaScript 内置的数据结构,比如 Map。

Ref 会使它的值具有深层响应性。这意味着即使改变嵌套对象或数组时,变化也会被检测到:

javascript 复制代码
import { ref } from 'vue'

const obj = ref({
  nested: { count: 0 },
  arr: ['foo', 'bar']
})

function mutateDeeply() {
  // 以下都会按照期望工作
  obj.value.nested.count++
  obj.value.arr.push('baz')
}

非原始值将通过 reactive() 转换为响应式代理,

3、练习所有代码

javascript 复制代码
<script setup lang="ts">
import { ref } from 'vue'
const count = ref(0)
// ref() 接收参数,并将其包裹在一个带有 .value 属性的 ref 对象中返回:
// 若想获取ref定义的参数,必须获取参数的value值
console.log('count', count)
console.log('count.value', count.value)
// 深层响应性
const obj = ref({
  nested: { count: 0 },
  arr: ['foo', 'bar']
})
function mutateDeeply() {
  // 以下都会按照期望工作
  obj.value.nested.count++
  obj.value.arr.push('baz')
}
</script>

<template>
  <!-- 响应式基础 -->
  <div>页面home</div>
  <!-- 在模板中使用 ref 时,我们不需要附加 .value。 -->
  <!-- 为了方便起见,当在模板中使用时,ref 会自动解包 -->
  <!-- 注意事项:在模板渲染上下文中,只有顶级的 ref 属性才会被解包。 -->
  <button @click="count++">
    {{ count }}
  </button>
  <span>{{ obj.nested.count }}</span>
  <span>{{ obj.arr }}</span>
  <button @click="mutateDeeply">测试深层响应式</button>
</template>
相关推荐
用户28003832908403 分钟前
升级Vue3.4+版本,ant-design-vue 3.x 版本的Modal函数方式无法关闭问题
vue.js
toooooop85 分钟前
本地开发环境webScoket调试,保存html即用
前端·css·websocket
山有木兮木有枝_11 分钟前
手动封装移动端下拉刷新组件的设计与实现
前端
阳光阴郁大boy13 分钟前
大学信息查询平台:一个现代化的React教育项目
前端·react.js·前端框架
小菜全19 分钟前
uniapp新增页面及跳转配置方法
开发语言·前端·javascript·vue.js·前端框架
AlexMercer101222 分钟前
[前端]1.html基础
前端·笔记·学习·html
白水清风31 分钟前
关于Js和Ts中类(class)的知识
前端·javascript·面试
前端Hardy33 分钟前
只用2行CSS实现响应式布局,比媒体查询更优雅的布局方案
javascript·css·html
小菜全41 分钟前
uniapp基础组件概述
前端·css·vue.js·elementui·css3
小天呐1 小时前
qiankun 微前端接入实战
前端·js·微前端