先问大家一个简单的问题：
还有人记得 jquery 里面的 data 方法是如何让 DOM 节点绑定对应的数据对象的吗有时候我们做节点关联设计的思路其实有一点类似，但是在 vue 里面多了很多概念，比如：
1、vnode: 如何生成的，包含子父关系、属性 data2、内置的 ref 对象的 create 如何注册3、生命周期：解析到根节点之后获取 outerHTML 再一步一步解析子元素
用惯 vue 的人都会很熟悉地：
使用 ref 来注册引用信息，再通过 $refs 对象就可以做关联但是我们看看它们是如何关联上的呢？
代码片段来自 2.5.16 版本：
1、需要初始化 $refs，默认是一个空对象
我们看到在函数 initLifecycle 上会往 vm 上设置一个 key 为 $refs 值为一个对象
function initLifecycle (vm) { vm.$refs = {};}2、获取元素上的 ref 值：
在函数 registerRef 上，它接受 2 个参数：
vnodeisRemovalfunction registerRef (vnode, isRemoval) {}直接通过 vnode.data 获取：
var key = vnode.data.ref;然后获取 $refs
在这之前需要获取 vm：
从 vnode 上下文 context 获取var vm = vnode.context;然后很简单的就是 vm.$refs
var refs = vm.$refs;ref 其实是什么呢？
DOM 节点或组件实例这里的：
componentInstance -- 组件实例elm -- DOM 节点var ref = vnode.componentInstance || vnode.elm;这里需要处理一下 v-for 一起用的情况，官网也提过：
对应的引用信息是包含 DOM 节点或组件实例的数组if (vnode.data.refInFor) {}情况一：如果不是数组格式，强制转换一下，外层套一个数组
判断方式：Array.isArray
if (!Array.isArray(refs[key])) { refs[key] = [ref];}情况二：看数组里面是否存在当前这个 ref，如果不存在，push 进去
if (refs[key].indexOf(ref) < 0) { refs[key].push(ref);}如果不是和 v-for 一起用：直接设置对象的 key 和 value：
refs[key] = ref;最后一个问题，官网提到了：
ref 注册时间 -- 因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在那我们看看：
1、它到底是在什么时机绑定的2、vnode 是如何产生的
最开始我们从 _init 开始
Vue.prototype._init = function (options) { // vm.$mount if (vm.$options.el) { vm.$mount(vm.$options.el);}}生成 vnode 最核心的部分：
实例化 VNode
function _createElement ( var vnode; if (typeof tag === 'string') {// ...vnode = new VNode(config.parsePlatformTagName(tag), data, children,undefined, undefined, context ); }}我们以如下代码为例：
我们的 VNode 如下：
最外层 app 转换的 vnode:
children:[VNode]data: { attrs: {id: "app" }}tag: "div"子 vnode 如下：
data: { ref: "imgbox", attrs: {src:"https://vuejs.org/images/logo.png",alt:"Vue logo" }}tag: "img"内置了一个 ref 对象，里面有 create 函数，调用了 registerRef
var ref = { create: function create (_, vnode) {registerRef(vnode); }}在函数 invokeCreateHooks 调用 create
注意两点:
1、cbs 是什么？2、create又是什么，和 ref 对象的 create 有什么关系
function invokeCreateHooks (vnode, insertedVnodeQueue) { for (var i$1 = 0; i$1 < cbs.create.length; ++i$1) { cbs.create[i$1](emptyNode, vnode);}}后面会提到：hooks
var hooks = ['create', 'activate', 'update', 'remove', 'destroy'];核心部分：createPatchFunction，往 cbs 里面放置对应的函数
function createPatchFunction (backend) { var cbs = {}; var modules = backend.modules; for (i = 0; i < hooks.length; ++i) {cbs[hooks[i]] = [];for (j = 0; j < modules.length; ++j) { // ... cbs[hooks[i]].push(modules[j][hooks[i]]);} }}那谁调用了 createPatchFunction 函数呢：
var modules = platformModules.concat(baseModules);var patch = createPatchFunction({ nodeOps: nodeOps, modules: modules });我们发现 baseModules 关联了 ref
var baseModules = [ ref, directives]