【Vue原理】Props - 源码版

- 日理万妓 2023-06-16 07:49 16阅读 0赞

## 【Vue原理】Props - 源码版 ##

> 写文章不容易，点个赞呗兄弟 专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧 研究基于 Vue版本 **【2.5.17】**

如果你觉得排版难看，请点击 **下面链接** 或者 拉到 下面**关注公众号**也可以吧

[【Vue原理】Props - 源码版][Vue_Props -]

今天记录 Props 源码流程，哎，这东西，就算是研究过了，也真是会随着时间慢慢忘记的。

幸好我做了详细的文章，忘记了什么的，回忆起来必然是很快的。

好的，回到正题，Props

请你在读这篇之前，先去看看我的白话版

[【Vue原理】Props - 白话版][Vue_Props - 1]

在上面这篇文章中，也已经清楚地解决了一个问题

父组件 如何 把数据 当做 props 传给子组件

所以今天，我们只需记录 Props 的处理流程源码即可

--------------------

# 初始化 #

在创建Vue实例的过程中，会调用 initState 处理options，比如 props，computed，watch 等

只要你 new Vue 创建实例之后，很快就会处理options

function Vue(){
        ... 其他处理
        initState(this)
    
        ...解析模板，生成DOM 插入页面
    
    }
    
    function initState(vm) {    
    
        var opts = vm.$options;    
    
        if (opts.props) {
    
            initProps(vm, opts.props);
        }
    
        ... 处理 computed，watch，methods 等其他options
    
    }

# initProps #

你看到处理 Props ，主要用到了一个方法 initProps，他就是本场的焦点了，让我们来采访下源码本码

上面的代码主要做了三件事

1、遍历 props

2、给 props 设置响应式

3、给 props 设置代理

我们主要讲两件事

### 1、给 props 设置响应式 ###

defineReactive(props, key,  propsData[key])

defineReactive 在这里就不给太多源码了，你只需要记住他就是给 props 设置响应式的

function defineReactive(obj, key) {    
    
        Object.defineProperty(obj, key, {  
    
            get() { ...依赖收集 },
            set(newVal) { ....依赖更新 }
        });
    }

如果你想了解响应式，就可以看我这篇文章

[【Vue原理】响应式原理 - 白话版][Vue_ -]

Props 设置响应式，也是旨在数据改变时动态更新。

怎么设置响应式吗？看这里

[【Vue原理】依赖收集 - 源码版之基本数据类型][Vue_ - 1]

[【Vue原理】依赖收集 - 源码版之引用数据类型][Vue_ - 2]

数据是直接从 父组件上传过来的，没有进行拷贝等处理，原样传过来

怎么传的？也可以看

[【Vue原理】Props - 白话版][Vue_Props - 2]

**如果props 是基本类型**

在 子组件实例上设置这个 props 属性为响应式，跟 data 本质一样，作用是监听 props 修改

**如果 props 是对象**

也会在 子组件实例上 设置这个 props 属性为响应式，作用也是监听 props 修改

但是！

【不会递归对象】给对象内所有属性设置响应式，因为该对象【已经在父组件中】完成响应式设置了

也就是说

如果你在 子组件中直接修改 props 对象内的数据，父组件也会跟着修改

在记录的途中，我发现了一个问题，发现没有想象中的那么简单，所以现在郑重记录

**当 父组件数据 改变，子组件怎么更新？**

分类型的，说得比较详细，可能有点绕？

1、 如果是基本类型，是这个流程

父组件数据改变，只会把新的数据传给子组件

子组件拿到新数据，就会直接替换到原来的 props

替换就是直接等哈，看下源码，重要语句标红

updateChildComponent 是子组件内部更新时会调用到的一个函数,这是其中更新 props 的一个片段

而 props 在子组件中也是响应式的，【直接 等号 替换】导致触发 set，set 再通知 子组件完成更新

![公众号][format_png]

![公众号][format_png 1]

数据是 基本类型，然后设置定时器修改数据

watcher1 是父组件，watcher2 是子组件

父组件内的 data num 通知 watcher1 更新 子组件内的 props child\_num 通知 watcher2 更新

![公众号][format_png 2]

2、如果是对象，是这个流程

条件

父组件传 对象 给 子组件，并且父子组件 页面都使用到了这个数据

结果

那么这个对象，会收集到 父子组件的 watcher

所以

当 对象内部被修改的时候，会通知到 父和子 更新。

例子

父组件设置 obj 对象，并传给子组件

![公众号][format_png 3]

![公众号][format_png 4] 定时修改父组件数据 obj.name ，可以看到是 obj.name 通知 父子更新

![公众号][format_png 5]

当然，如果对象被整个替换了，而不是修改内部，那么跟 基本类型一样

**区别是什么？**

1、基本类型是，子组件内部 props 通知 子组件更新的

2、引用类型是，父组件的数据 data 通知 子组件更新的

### 2、给 props 设置代理 ###

在白话版中，我已经说得很清楚了， Props 有个移花接木的暗箱操作，就是访问转移

Data 也是这么做的

[【Vue原理】代理 Data - 源码版][Vue_ Data -]

你在项目中，会使用 [http://this.xxx去访问][http_this.xxx] props，props 已经当成了 实例的属性，所以可以直接访问

但是其实你访问的是 【this.\_props.xxx】

为什么 Vue 要这么弄，目的就是为了方便开发啊，让我们直接简短了相关代码

而 React，访问 props，还要 this.props.xxxx，写这么长，不嫌麻烦吗?

那么，是怎么设置代理的呢，就是下面这行

proxy(vm, "_props", key);

proxy 是什么也不要急，瓜就在下面，拿凳坐好

function proxy(
    
        target, sourceKey, key
    
    ) {    
    
      Object.defineProperty(target, key, {
    
          get() {            
    
              return this[sourceKey][key]
    
          },
    
          set(val) {            
    
              this[sourceKey][key] = val;
    
          }
      });
    }

这段代码做了2 个事

1、使用 props 在 vm 上占位，使得可以通过 [http://vm.xxx][http_vm.xxx] 的形式访问到 props

2、设置 \[Object.defineProperty\] 的 get 和 set ，间接获取和赋值 vm.\_props

所有访问赋值 props，转接到 vm.\_props 上，直观如下图

![公众号][format_png 6] 上个实例，方便大家看

![公众号][format_png 7]

说完收工

![公众号][format_png 8]

[Vue_Props -]: https://mp.weixin.qq.com/s?__biz=MzUxNjQ1NjMwNw==&mid=2247484247&idx=1&sn=c4135c018f02dc64f9ab82dc7ac5eb89&chksm=f9a6694bced1e05d4e26260bc24a9c4d8bdf5942b514bc18137eb98d1a3064d5dd0605707280&token=584130979&lang=zh_CN#rd
[Vue_Props - 1]: https://mp.weixin.qq.com/s?__biz=MzUxNjQ1NjMwNw==&mid=2247484023&idx=1&sn=5c87fe0e3863210bde95fa21fb678253&chksm=f9a6686bced1e17d81e768069e536e40d8abc7e7de416464e1bd1aeb003ef3f02d4232ab670b&token=75788463&lang=zh_CN&scene=21#wechat_redirect
[Vue_ -]: https://mp.weixin.qq.com/s?__biz=MzUxNjQ1NjMwNw==&mid=2247483922&idx=1&sn=228ca8365d8566d59630d5bad4bf7d58&chksm=f9a6680eced1e118b628499600abd12d622083a0434673514cd5da4cc69a9325c555c051c147&token=232158801&lang=zh_CN&scene=21#wechat_redirect
[Vue_ - 1]: https://mp.weixin.qq.com/s?__biz=MzUxNjQ1NjMwNw==&mid=2247484167&idx=1&sn=76d68f889aa12fa1c580f3fa7c5f7cca&chksm=f9a6691bced1e00d395d7d57dbba11fb66426cfe138f5a33e32a28081dc219b801a3fb485587&token=1245709185&lang=zh_CN&scene=21#wechat_redirect
[Vue_ - 2]: https://mp.weixin.qq.com/s?__biz=MzUxNjQ1NjMwNw==&mid=2247484172&idx=1&sn=a799fbf8e016b36e8c81dda53f61d90c&chksm=f9a66910ced1e006e15442b5447372334ffd88f9def82ad8705704984ce0b73caeb9d1bd5b65&token=1245709185&lang=zh_CN&scene=21#wechat_redirect
[Vue_Props - 2]: https://mp.weixin.qq.com/s?__biz=MzUxNjQ1NjMwNw==&mid=2247484023&idx=1&sn=5c87fe0e3863210bde95fa21fb678253&chksm=f9a6686bced1e17d81e768069e536e40d8abc7e7de416464e1bd1aeb003ef3f02d4232ab670b&token=1245709185&lang=zh_CN&scene=21#wechat_redirect
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWM0LnpoaW1nLmNvbS84MC92Mi0zMTk3MjQ5Yjc4YTBiYThiZWFmNWQwYjBhZTA2ZjI4Yl9oZC5qcGc?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWM0LnpoaW1nLmNvbS84MC92Mi02YzQ3YWRkZmE5ZWZkMTlkZjY2NzkwZDMwNDcwYTliM19oZC5qcGc?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMxLnpoaW1nLmNvbS84MC92Mi1lYjdmMjljNmY2MmZiOGRhZmZmYjAxNThkYWM4ZTBiOF9oZC5qcGc?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMyLnpoaW1nLmNvbS84MC92Mi1iZTZiMWM4NDhjOGYzNTZkZGE4NjFhZjc3YTM5NjBkOV9oZC5qcGc?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMxLnpoaW1nLmNvbS84MC92Mi0zODJmYjc3YjllNzAzYTI1ZmExYjE5YmE4NzBkM2FmMF9oZC5qcGc?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMxLnpoaW1nLmNvbS84MC92Mi02M2JlMzYzODZjZTQ4NTI4NzZhNWIyMjFjZmZjMGI3MF9oZC5qcGc?x-oss-process=image/format,png
[Vue_ Data -]: https://mp.weixin.qq.com/s?__biz=MzUxNjQ1NjMwNw==&mid=2247484202&idx=1&sn=60a6696a44a95432f7aa7e0aa69c698d&chksm=f9a66936ced1e020fadb752807b385e9a354b5e421df72f7468374acd99738ef88d76a01c30a&token=1272853072&lang=zh_CN&scene=21#wechat_redirect
[http_this.xxx]: http://this.xn--xxx-gu3eu47w60m/
[http_vm.xxx]: http://vm.xxx/
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWM0LnpoaW1nLmNvbS84MC92Mi1iYjJiZmFlMTQ2MjIyZDRkYzcxZjdiMjc2MjAyODAwM19oZC5qcGc?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMzLnpoaW1nLmNvbS84MC92Mi05NmNkMThjYjZhZWUwMTY5YTI1ZTJkYTgxMGMzM2RjNl9oZC5qcGc?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWM0LnpoaW1nLmNvbS84MC92Mi1iYTI1NDk1ZGZjOGE3MWE2NWMxNDQwNTdkOTM0YTY0Yl9oZC5wbmc?x-oss-process=image/format,png