Vue ref 的用法详解

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。
用法如下

<!-- `vm.$refs.p` will be the DOM node -->
<p ref="p">hello</p>

<!-- `vm.$refs.child` will be the child component instance -->
<child-component ref="child"></child-component>

当 v-for 用于元素或组件的时候，引用信息将是包含 DOM 节点或组件实例的数组。

源码解读：

关键函数

function registerRef (vnode, isRemoval) {
    var key = vnode.data.ref; // 读取设置的ref的值
    if (!isDef(key)) { return }

    var vm = vnode.context;
    var ref = vnode.componentInstance || vnode.elm;
    var refs = vm.$refs;
    if (isRemoval) {
      if (Array.isArray(refs[key])) {
        remove(refs[key], ref);
      } else if (refs[key] === ref) {
        refs[key] = undefined;
      }
    } else {
      // 如果是v-for 的组件，会push到数组里
      if (vnode.data.refInFor) {
        if (!Array.isArray(refs[key])) {
          refs[key] = [ref];
        } else if (refs[key].indexOf(ref) < 0) {
          // $flow-disable-line
          refs[key].push(ref);
        }
      } else {
        refs[key] = ref;
      }
    }
  }

这是ref对应hook里的对应生命周期的执行流程

var ref = {
    create: function create (_, vnode) {
       //$refs里加入新的vnode
      registerRef(vnode);
    },
    update: function update (oldVnode, vnode) {
      if (oldVnode.data.ref !== vnode.data.ref) {
        // 移除$refs里的oldVnode
        registerRef(oldVnode, true);
        //$refs里加入新的vnode
        registerRef(vnode);
      }
    },
    destroy: function destroy (vnode) {
      // 移除$refs里的vnode
      registerRef(vnode, true);
    }
  };