Vue3 的 Ref、IsRef、ToRef、ToRefs、ToRaw 详细介绍

更新日期: 2022-07-12阅读: 841标签: Vue3作者: 前端代码女神

1、ref

ref 属性除了能够获取元素外,也可以使用 ref 函数,创建一个响应式数据,当数据值发生改变时,视图自动更新。

<script lang="ts" setup>
import { ref } from 'vue'
let str: string = ref('我是张三')
const chang = () => {
  str.value = '我是钻石王老五'
  console.log(str.value)
}
</script>
<template>
  <div>
    {{ str }}
    <button type="button" @click="chang">修改值</button>
  </div>
</template>

2、isRef

检查变量是否为一个被 ref 包装过的对象,如果是返回 true ,否则返回 false。

import { ref, isRef, reactive } from 'vue'
let str: string = ref('我是张三')
let num: number = 1
let per = reactive({ name: '代码女神', work: '程序媛' })
console.log('strRes', isRef(str)) //true
console.log('numRes', isRef(num)) //false
console.log('perRes', isRef(per)) //false

3、toRef

创建一个 ref 对象,其 value 值指向另一个对象中的某个属性。

toRef(obj, key) 将对象中的某个值转化为响应式数据,分为两种情况:

  • toRef 定义原始非响应式数据,修改值时,原始数据和 copy 数据都会变的,但是视图不更新。
<script>
  import { ref, isRef, toRef, reactive } from 'vue'
let obj = {
  name: '姓名',
  age: 18,
}
let name: string = toRef(obj, 'name')
const chang = () => {
  obj.name = '钻石王老五'
  name.value = '李四'
  console.log(obj.name) // 李四
  console.log('name', name) // 李四
}
//chang() //dom挂载前调用
</script>
<template>
  <div>
    {{ obj.name }} ------- {{ name }}
    <button type="button" @click="chang">修改值</button>
  </div>
</template>

注意:如果是在 DOM 挂载之前调用 chang 方法,改变数值,此时数据和视图都会发生改变。

  • toRef 定义原始数据响应式数据,修改值时,原始数据,和 copy 数据都会改变,视图也会更新。
<script>
  import { ref, isRef, toRef, reactive } from 'vue'
let obj = reactive({
  name: '姓名',
  age: 18,
})
let name: string = toRef(obj, 'name')
const chang = () => {
  obj.name = '钻石王老五'
  name.value = '李四'
}
</script>
<template>
  <div>
    {{ obj.name }} ------- {{ name }}
    <button type="button" @click="chang">修改值</button>
  </div>
</template>

最终值为 “李四”。

4、toRefs

toRefs 用来解构 ref、reactive 包裹的响应式数据。接收一个对象作为参数,遍历对象上的所有属性,将对象上的所有属性变成响应式数据。

let obj = reactive({
  name: '姓名',
  age: 18,
})
let { name, age } = toRefs(obj)
const chang = () => {
  name.value = '钻石王老五'
  age.value++
}
</script>
<template>
  <div>
    {{ name }} ------- {{ age }}
    <button type="button" @click="chang">修改值</button>
  </div>
</template>

toRefs 解构数据时,如果某些参数作为可选参数,可选参数不存在时就会报错,如:

let obj = reactive({
  name: '姓名',
  age: 18,
})
let { name, age, work } = toRefs(obj)
const chang = () => {
  name.value = '钻石王老五'
  age.value++
  console.log('work', work.value)
  work.value = '程序媛'
}

此时可以使用 toRef 解决此问题,使用 toRef 解构对象某个属性时,先检查对象上是否存在该属性,如果存在就继承对象上的属性值,如果不存在就会创建一个。

修改上边的代码为:

let obj = reactive({
  name: '姓名',
  age: 18,
})
let { name, age } = toRefs(obj)
let work = toRef(obj, 'work')
const chang = () => {
  name.value = '钻石王老五'
  age.value++
  console.log('work', work.value)
  work.value = '程序媛'
}

5、toRaw

将响应式对象转为原始对象。做一些不想被监听的事情,从 ref 或 reactive 得到原始数据。

修改原响应式数据时,toRaw 转换得到的数据会被修改,视图也会更新,如:

<script lang="ts" setup>
import { ref, isRef, toRef, toRefs, reactive, toRaw } from 'vue'
let obj = reactive({
  name: '姓名',
  age: 18,
})
let newObj = toRaw(obj)
const chang = () => {
  obj.name = '钻石王老五'
  obj.age++
}
</script>
<template>
  <div>
    {{ obj.name }} ------- {{ obj.age }}
    <button type="button" @click="chang">修改值</button>
    <br />
    {{ newObj }}
  </div>
</template>

如果修改 toRaw 得到的原始数据,原数据也会被修改,但是视图不更新。如:

<script lang="ts" setup>
import { ref, isRef, toRef, toRefs, reactive, toRaw } from 'vue'
let obj = reactive({
  name: '姓名',
  age: 18,
})
let newObj = toRaw(obj)
const chang = () => {
  obj.name = '钻石王老五'
  obj.age++
}
const changNew = () => {
  newObj.name = '搞笑'
  console.log('newObj', newObj)
  console.log('obj', obj)
}
</script>
<template>
  <div>
    {{ obj.name }} ------- {{ obj.age }}
    <button type="button" @click="chang">修改值</button>
    <br />
    {{ newObj }}
    <button @click="changNew">修改</button>
  </div>
</template>

来自:https://www.toutiao.com/article/7118955136667550220/

链接: https://fly63.com/article/detial/11885

vue3.x 新特性 - CompositionAPI

安装 vue-cli3,在使用任何 @vue/composition-api 提供的能力前,必须先通过 Vue.use() 进行安装,安装插件后,您就可以使用新的 Composition API 来开发组件了。

Vue3数据响应系统

Vue3 就是基于 Proxy 对其数据响应系统进行了重写,现在这部分可以作为独立的模块配合其他框架使用。数据响应可分为三个阶段: 初始化阶段 --> 依赖收集阶段 --> 数据响应阶段

快速进阶Vue3.0

在2019.10.5日发布了Vue3.0预览版源码,但是预计最早需要等到 2020 年第一季度才有可能发布 3.0 正式版。新版Vue 3.0计划并已实现的主要架构改进和新功能:

Vue 3 对 Web 应用性能的改进

有关即将发布的 Vue.js 的第 3 个主要版本的信息越来越多。通过下面的讨论,虽然还不能完全确定其所有内容,但是我们可以放心地认为,它将是对当前版本(已经非常出色)的巨大改进。 Vue 团队在改进框架 API 方面做得非常出色

Vue3 中令人兴奋的新功能

用新的 Vue 3 编写的程序效果会很好,但性能并不是最重要的部分。对开发人员而言,最重要的是新版本将会怎样影响我们编写代码的方式。如你所料,Vue 3 带来了许多令人兴奋的新功能。值得庆幸的是

200 行从零实现 vue3

emmm 用半天时间捋顺了 vue3 的源码,再用半天时间写了个 mini 版……我觉得我也是没谁了,vue3 的源码未来一定会烂大街的,我们越早的去复现它,就……emm可以越早的装逼hhh

从 Proxy 到 Vue 源码,深入理解 Vue 3.0 响应系统

10 月 5 日,尤雨溪在 GitHub 开放了 Vue 3.0 处于 pre-alpha 状态的源码,这次 Vue 3.0 Updates 版本的更新,将带来五项重大改进:速度体积、可维护性、面向原生、易用性

Vue 的数据响应式(Vue2 及 Vue3)

从一开始使用 Vue 时,对于之前的 jq 开发而言,一个很大的区别就是基本不用手动操作 dom,data 中声明的数据状态改变后会自动重新渲染相关的 dom。换句话说就是 Vue 自己知道哪个数据状态发生了变化及哪里有用到这个数据需要随之修改。

在Vue2与Vue3中构建相同的组件

Vue 开发团队终于在今天发布了 3.0-beta.1 版本,也就是测试版。通常来说,从测试版到正式版,只会修复 bug,不会引入新功能,或者删改老功能。所以,如果你对新版本非常感兴趣,或者有新项目即将上马,不妨尝试一下新版本

Vue3中的Vue Router初探

对于大多数单页应用程序而言,管理路由是一项必不可少的功能。随着新版本的Vue Router处于Alpha阶段,我们已经可以开始查看下一个版本的Vue中它是如何工作的。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!