一文了解——to系全家桶并带讲解源码(Vue.js)

To系全家桶并带源码

1.toRef

1.1toRef的例子

举一个例子

vue-sfc 复制代码
<template>
  <div>
     <div>{{ who}}</div>
  </div>
  <hr>
  <button @click="change">修改</button>
</template>

<script setup lang="ts">
const who = {
  name:'kun',
  age:'2.5',
  like:'sing',
}
const change = () => {
  who.like='jump'
  console.log(who.like)
}
</script>

在这个例子中打印出来的是 jump

而在其中的视图 {{who}} 的打印值不会改变 因为其不是响应式的 展示如下

而在此时我们需要加入这小节的核心 也就是 toRef

首先我们需要来讲一下 toRef 的参数 第一个传入的是 对象 第二个传入的是 那个对象的key

在这一点 可以具体的看 vue官网的 类型示例

了解了这个之后 我们改变在上面的例子 加入了 toRef

vue-sfc 复制代码
<template>
  <div>
     <div>{{ who}}</div>
  </div>
  <hr>
  <button @click="change">修改</button>
</template>

<script setup lang="ts">
import {toRef} from 'vue'
const who = {
  name:'kun',
  age:'2.5',
  like:'sing',
}
const like = toRef(who,'like') 

const change = () => {
  like.value = 'jump'
  console.log(like)
  console.log(who)
}
</script>

打印出来的值 分别是

可以看到 其中的数值发生了改变 但是 视图依旧没有发生变化

接下来 我们需要将who这个对象加入响应式

vue-sfc 复制代码
<template>
  <div>
     <div>{{ who}}</div>
  </div>
  <hr>
  <button @click="change">+</button>
</template>

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

const who = reactive({
  name:'kun',
  age:'2.5',
  like:'sing',
})

const like = toRef(who,'like') 

const change = () => {
  like.value = 'jump'
  console.log(like)
  console.log(who)
}


</script>

在这里打印出来的是

并且可以看到 视图也同时发生了变化

直白点说就是 toRef 假设非响应式对象 它可以将对象中的值 变成响应式 也可以修改 但是修改不会影响视图的效果

toRef 假设为响应式对象 它可以将对象中的值修改 且会影响视图的效果

1.2toRef的源码

路径如下

在这里映入眼帘的是一个重载函数

重点其实在这里

在这里可以看到 他两个参数都放在这里 并且做了一个判断是否为ref对象

如果不是的话 就会进入到 ObjectRefImpl

这里面 如果看过ref的源码就会发现 很是相像

但是又有不一样的地方 在这里和ref对象不一样的地方就在于 他没有做收集依赖 也没有触发依赖的操作 所以说他对于非响应式对象是不会去改变视图的

2.toRefs

2.1toRefs的例子

单看名字就可以了解到多了一个s 简单的来说就是它可以将对象内的参数 多个传入 并且将其变成响应式的过程

vue-sfc 复制代码
<template>
  <div>
     <div>{{ who}}</div>
  </div>
  <hr>
  <button @click="change">+</button>
</template>

<script setup lang="ts">
import {toRef,reactive,toRefs} from 'vue'

const who = reactive({
  name:'kun',
  age:'2.5',
  like:'sing',
})

const like = toRefs(who) 

const change = () => {
  console.log(like)
}

</script>

在这里直接上图

懂得了他的原理后 我们甚至可以手写他的过程 基本可以做到和源码大差不差

2.2手写toRefs的源码

vue-sfc 复制代码
<template>
  <div>
     <div>{{ who}}</div>
  </div>
  <hr>
  <button @click="change">+</button>
</template>

<script setup lang="ts">
import {toRef,reactive,toRaw} from 'vue'

const who = reactive({
  name:'kun',
  age:'2.5',
  like:'sing',
})

const toRefs =<T extends object> (object:T)=>{
  const result = {} as any
  for (let key in object) {
    result[key] = toRef(object,key)
  }
  return result
}

const change = () => {
  console.log(toRefs(who))
}

</script>

上图

在这里获得效果基本与直接引用效果相同

toRefs的隐藏问题

假使 你想要直接解构它 通过

vue-sfc 复制代码
<template>
  <div>
     <div>{{ who}}</div>
  </div>
  <hr>
  <button @click="change">+</button>
</template>

<script setup lang="ts">
import {toRef,reactive,toRaw} from 'vue'

const who = reactive({
  name:'kun',
  age:'2.5',
  like:'sing',
})

const toRefs =<T extends object> (object:T)=>{
  const result = {} as any
  for (let key in object) {
    result[key] = toRef(object,key)
  }
  return result
}
const {name,age,like} = who
const change = () => {
   who.name = '坤' 
  console.log(name,age,like)
}

</script>

打印出来的结果 值会变化 但是视图依旧是不会的

所以你需要在解构的时候加上 toRefs

const {name,age,like} = who

就可以解决这个问题啦

toRefs的源码

路径也是在ref.ts里面

基本和上面手写的一致

toRaw

toRaw的例子

这个首先我们不讲解 先通过代码先来了解一下这个是干什么的

vue-sfc 复制代码
<template>
  <div>
     <div>{{ who}}</div>
  </div>
  <hr>
  <button @click="change">+</button>
</template>

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

const who = reactive({
  name:'kun',
  age:'2.5',
  like:'sing',
})

const change = () => {
  console.log(who,toRaw(who))
}
</script>

打印出来如下

是不是很好理解 它将其的响应式干掉了 脱离了proxy

通过这样子的操作就可以让他不更新视图的展示了

toRaw手写源码

其实也就是一行的事情 大家可以去试试

vue-sfc 复制代码
<template>
  <div>
     <div>{{ who}}</div>
  </div>
  <hr>
  <button @click="change">+</button>
</template>

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

const who = reactive({
  name:'kun',
  age:'2.5',
  like:'sing',
})

const change = () => {
  console.log(who,who['__v_raw'])
}
</script>

这个方法是看不到的 因为vue没有暴露出来

toRaw的源码

路径在reactive.ts中

就只有一小片

可以看到 他从对象中去获取了一个属性

点过去就可以看见这些了

相关推荐
qq_364371724 分钟前
Vue 内置组件 keep-alive 中 LRU 缓存淘汰策略和实现
前端·vue.js·缓存
y先森1 小时前
CSS3中的弹性布局之侧轴的对齐方式
前端·css·css3
你挚爱的强哥5 小时前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森6 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy6 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189116 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿7 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡8 小时前
commitlint校验git提交信息
前端
天天进步20158 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
虾球xz9 小时前
游戏引擎学习第20天
前端·学习·游戏引擎