vue组件获取props_【Vue原理】Props - 源码版

专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧
研究基于 Vue版本2.5.17

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

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

好的，回到正题，Props

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

【Vue原理】Props - 白话版

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

父组件 如何 把数据 当做 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，他就是本场的焦点了，让我们来采访下源码本码

function initProps(vm, propsOpt) {
        
   // 这是父组件给子组件传入的 props 的具体值

   var propsData = vm.$options.propsData || {};    

   var props = vm._props = {};    

   for (var key in propsOpt){
            

       // 给 props 的 key 设置 响应式

       defineReactive(props, key,  prop