《Vue进阶教程》第十课:其它函数

往期内容:

《Vue零基础入门教程》合集(完结)

《Vue进阶教程》第一课:什么是组合式API

《Vue进阶教程》第二课:为什么提出组合式API

《Vue进阶教程》第三课:Vue响应式原理

《Vue进阶教程》第四课:reactive()函数详解

《Vue进阶教程》第五课:ref()函数详解(重点)

《Vue进阶教程》第六课:computed()函数详解(上)

《Vue进阶教程》第七课:computed()函数详解(下)

《Vue进阶教程》第八课:watch()函数的基本使用

《Vue进阶教程》第九课:watch()函数的高级使用

1) readonly()函数

readonly()

  1. 参数: 普通对象/reactive对象/ref对象
  2. 作用: 创建只读的响应式对象
  3. 返回: proxy对象

示例

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
  </head>
  <body>
    <script>
      const { reactive, ref, readonly } = Vue

      const count = ref(0)
      const stu = reactive({ name: 'xiaoming', age: 20 })

      const r_obj = readonly({ msg: 'hello' })
      const r_count = readonly(count)
      const r_stu = readonly(stu)
    </script>
  </body>
</html>

应用场景

父组件向子组件传对象时, 为了保证单向数据流(子组件不能修改父组件中的数据). 可以考虑在父组件中传递只读对象给子组件

2) shallow系列函数

创建浅层的代理, 即第一层具有响应性. 更深层不具有响应性

shallowReactive()

javascript 复制代码
const sh_stu = shallowReactive({
  name: 'xiaoming',
  age: 20,
  gf: { // 替换gf对象触发响应性
    name: 'xiaomei', // 不具有响应性
    city: {
      name: 'wuhan' // 不具有响应性
    }
  }
})

shallowRef()

javascript 复制代码
const state = shallowRef({ count: 1 })

// 不会触发更改
state.value.count = 2

// 会触发更改
state.value = { count: 2 }

shallowReadonly()

3) 工具函数

|------------|------------------|---------------------------------------------------------------------------|-----------------------------|----------------------------------------------------------|
| 函数名 | 参数 | 作用 | 返回值 | 说明 |
| isRef | (数据) | 判断传入的参数是否为Ref类型 | true: 是Ref类型 false: 不是Ref类型 | 根据__v_isRef标识判断 * computed的返回值是Ref类型 * toRef的返回值是Ref类型 |
| isReactive | (数据) | 判断传入的参数是否由 reactive()或者shallowReactive()创建 | true: 是 false: 否 | |
| isProxy | (数据) | 判断传入的参数是否由 reactive()或者shallowReactive() readonly()或者shallowReadonly() 创建 | true: 是 false: 否 | |
| toRef | (对象, '属性', 默认值?) | 将reactive对象的某个属性转换为 ref类型对象 | ObjectRefImpl对象 | 属性是字符串 默认值可选 |
| toRefs | (对象) | 将reactive对象转换成普通对象 但是每个属性值都是ref | 普通对象 | 传入参数必须是 reactive类型 |

相关推荐
萌萌哒草头将军6 小时前
⚡⚡⚡尤雨溪宣布开发 Vite Devtools,这两个很哇塞 🚀 Vite 的插件,你一定要知道!
前端·vue.js·vite
游离状态的猫16 小时前
JavaScript性能优化实战:从瓶颈定位到极致提速
开发语言·javascript·性能优化
小彭努力中6 小时前
7.Three.js 中 CubeCamera详解与实战示例
开发语言·前端·javascript·vue.js·ecmascript
浪裡遊7 小时前
跨域问题(Cross-Origin Problem)
linux·前端·vue.js·后端·https·sprint
滿7 小时前
Vue3 Element Plus el-tabs数据刷新方法
javascript·vue.js·elementui
LinDaiuuj7 小时前
判断符号??,?. ,! ,!! ,|| ,&&,?: 意思以及举例
开发语言·前端·javascript
敲厉害的燕宝7 小时前
Pinia——Vue的Store状态管理库
前端·javascript·vue.js
Aphasia3118 小时前
react必备JavaScript知识点(二)——类
前端·javascript
玖玖passion8 小时前
数组转树:数据结构中的经典问题
前端
呼Lu噜8 小时前
WPF-遵循MVVM框架创建图表的显示【保姆级】
前端·后端·wpf