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

To系全家桶并带源码

1.toRef

1.1toRef的例子

举一个例子

<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

<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这个对象加入响应式

<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 简单的来说就是它可以将对象内的参数 多个传入 并且将其变成响应式的过程

<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的源码

<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的隐藏问题

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

<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的例子

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

<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手写源码

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

<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中

就只有一小片

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

点过去就可以看见这些了