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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="vue.js"></script>

</head>

<body>

    <div id="app">

        <h1 ref="info">11</h1>

        <child ref="child"></child>

        <p v-for="item in items" ref="item">{{item}}</p>

        <button @click='show'>Test</button>

    </div>

    <script>

        Vue.component('child',{template:'<h1>I am childComponent</h1>'})

        var app = new Vue({

            el:'#app',

            data:{items:[11,12,13]},

            methods:{show:function(){console.log(this.$refs)}}              //点击后输出Vue实例的$refs属性

        })

    </script>   

</body>

</html>

渲染如下:

点击Test后输出如下:

writer by:大沙漠 QQ:22969969

源码分析

_init初始化的时候会执行initLifecycle()函数，该函数会初始化当前Vue实例的$refs为一个空对象。

挂载的时候首先会将模板解析成一个AST对象，此时会执行processElement()函数，该函数又会执行processRef去解析ref属性，如下:

function processRef (el) {          //第9359行 解析ref属性

  var ref = getBindingAttr(el, 'ref');  //尝试获取ref属性

  if (ref) {                            //如果存在

    el.ref = ref;                           //保存到el.ref里面

    el.refInFor = checkInFor(el);           //执行checkInFor检查是否在v-for循环内，将结果保存到el.refInfor里面

  }

}

function checkInFor (el) {        //第9605行 检测ref属性是否在v-for里面

  var parent = el;                  //首先将el保存到parent里，这样v-for和ref就可以作用在同一个元素上

  while (parent) {                  //通过检测parent的AST对象是否由for来判断

    if (parent.for !== undefined) {

      return true                     //如果在v-for内则返回true

    }

    parent = parent.parent;

  }

  return false                        //否则返回false

}

检测是否在v-for内会影响最后的保存方式，如果在v-for内则最后保存为数组形式，例如例子里的p标签，否则就是非数组，对于h1属性来说，执行到这里后，属性如下:

最后将AST生成render函数的时候会执行genData$2()函数($2是Vue项目build的时候node自动转换的，防止同名)，genData$2()会判断是否有ref和refInFor属性，如果有则保存到data属性上(就是render属性对应的参数,这个参数是一个函数，函数的第二个参数)，如下:

function genData$2 (el, state) {  //第10274行

  var data = '{';

  // directives first.

  // directives may mutate the el's other properties before they are generated.

  var dirs = genDirectives(el, state);

  if (dirs) { data += dirs + ','; }

  // key

  if (el.key) {

    data += "key:" + (el.key) + ",";

  }

  // ref

  if (el.ref) {                           //对应ref属性

    data += "ref:" + (el.ref) + ",";

  }

  if (el.refInFor) {                      //如果组件元素有设置了v-for指令

    data += "refInFor:true,";

  }

  /*略*/

}

最后等到DOM创建后，会执行ref模块的create钩子函数(Vue内部有七个模块，分别对应属性、样式、事件、DOM属性、样式、动画、ref和指令，用于在DOM新增、更新、卸载时执行一些列操作)

ref模块初始化时会执行registerRef函数，如下:

function registerRef (vnode, isRemoval) {     //第5389行 ref的实现函数 vnode:节点对应的VNode,isRemoval:是否移除

  var key = vnode.data.ref;

  if (!isDef(key)) { return }                     //如果没有定义ref属性，则直接返回

  var vm = vnode.context;                             //当前的根Vue实例

  var ref = vnode.componentInstance || vnode.elm;    //优先获取vonde的组件实例(对于组件来说)，或者el(该Vnode对应的DOM节点，非组件来说)

  var refs = vm.$refs;

  if (isRemoval) {

    if (Array.isArray(refs[key])) {

      remove(refs[key], ref);

    } else if (refs[key] === ref) {

      refs[key] = undefined;

    }

  } else {                                            //如果不是移除

    if (vnode.data.refInFor) {                          //当在v-for之内时，则保存为数组形式

      if (!Array.isArray(refs[key])) {

        refs[key] = [ref];

      } else if (refs[key].indexOf(ref) < 0) {

        // $flow-disable-line

        refs[key].push(ref);

      }

    } else {                                            //不是在v-for之内时

      refs[key] = ref;                                      //直接保存到refs对应的key属性上

    }

  }

}

ref属性比较简单的，可以方便的引用某个DOM节点或子组件实例，在很多地方用得到，比如Elementui里的表单等

Vue.js 源码分析(十) 基础篇 ref属性详解的更多相关文章

  1. Vue.js 源码分析(九) 基础篇 生命周期详解

    先来看看官网的介绍: 主要有八个生命周期,分别是: beforeCreate.created.beforeMount.mounted.beforeupdate.updated   .beforeDes ...

  2. Vue.js 源码分析(六) 基础篇 计算属性 computed 属性详解

    模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护,比如: <div id="example">{{ messag ...

  3. Vue.js 源码分析(十三) 基础篇 组件 props属性详解

    父组件通过props属性向子组件传递数据,定义组件的时候可以定义一个props属性,值可以是一个字符串数组或一个对象. 例如: <!DOCTYPE html> <html lang= ...

  4. Vue.js 源码分析(四) 基础篇 响应式原理 data属性

    官网对data属性的介绍如下: 意思就是:data保存着Vue实例里用到的数据,Vue会修改data里的每个属性的访问控制器属性,当访问每个属性时会访问对应的get方法,修改属性时会执行对应的set方 ...

  5. Vue.js 源码分析(三) 基础篇 模板渲染 el、emplate、render属性详解

    Vue有三个属性和模板有关,官网上是这样解释的: el ;提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标 template ;一个字符串模板作为 Vue 实例的标识使用.模板将会 ...

  6. Vue.js 源码分析(二) 基础篇 全局配置

    Vue.config是一个对象,包含Vue的全局配置,可以在启动应用之前修改下列属性,如下: ptionMergeStrategies        ;自定义合并策略的选项silent         ...

  7. Vue.js 源码分析(八) 基础篇 依赖注入 provide/inject组合详解

    先来看看官网的介绍: 简单的说,当组件的引入层次过多,我们的子孙组件想要获取祖先组件的资源,那么怎么办呢,总不能一直取父级往上吧,而且这样代码结构容易混乱.这个就是这对选项要干的事情 provide和 ...

  8. Vue.js 源码分析(七) 基础篇 侦听器 watch属性详解

    先来看看官网的介绍: 官网介绍的很好理解了,也就是监听一个数据的变化,当该数据变化时执行我们的watch方法,watch选项是一个对象,键为需要观察的数据名,值为一个表达式(函数),还可以是一个对象, ...

  9. Vue.js 源码分析(十一) 基础篇 过滤器 filters属性详解

    Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScrip ...

随机推荐

  1. C#中全局作用域的常量、字段、属性、方法的定义与使用

    场景 在开发中,经常会有一些全局作用域的常量.字段.属性.方法等. 需要将这些设置为全局作用域保存且其实例唯一. 注: 博客主页: https://blog.csdn.net/badao_liuman ...

  2. ptrace函数深入分析

    ptrace函数:进程跟踪. 形式:#include<sys/ptrace.h> Int ptrace(int request,int pid,int addr,int data); 概述 ...

  3. 查看 JVM 默认参数

    -XX:+PrintFlagsFinal 可以获取所有可设置参数及值 获取 JVM 默认 Xss 大小 java -XX:+PrintFlagsFinal -version | grep Thread ...

  4. 【Java】理解ClassNotFoundException与NoClassDefFoundError的区别

    一.概念上的认识 1)Exception与Error的区别 1.Exception的出现不会导致程序结束,用户程序可以捕获该异常 2.Error的出现会导致程序结束,用户程序无法捕获Error错误 2 ...

  5. 其它综合-CentOS7 解决忘记root密码

    CentOS7 解决忘记root密码 1.重启 长时间不用的 CentOS 机器再次开机的时候忽然忘记了密码,总不能就重装一台吧,还有好多服务在机器上,于是决定重置 root 的密码. 如果是已经开启 ...

  6. Jquery ajax 同步阻塞引起的UI线程阻塞的坑（loading图片显示不出来，layer.load延迟）

    今天想做一个点击地市用ajax重新获取数据刷新页面功能,因为ajax属于耗时操作,想在获取数据且加载页面时显示加载遮罩层,结果发现了ajax的好多坑. 例如如上栗子,我想点击按钮让遮罩层显示,ajax ...

  7. E08【选尺码】I'm looking for size 43

    核心句型 I'm looking for size 43 我想要43号的 场景对话 A:Can I help you?您需要什么? B:Yes,can I try on those shoes,ple ...

  8. Maven 生命周期的阶段与插件的目标之间的绑定关系

    clean 生命周期 clean 生命周期的阶段 插件的目标 pre-clean clean maven-clean-plugin:clean post-clean default 生命周期的内置插件 ...

  9. Shell编程 | 脚本参数与交互及常见问题

    在执行一个脚本程序时,会经常需要向脚本传递一些参数,并根据输入的参数值生成相应的数据或执行特定的逻辑. 向脚本传递参数 执行Shell脚本时可以带有参数,在Shell脚本中有变量与之对应进行引用.这类 ...

  10. Maven 本地仓库同步到私服中

    步骤: 第一步:找到安装私服的目录中plexus.properties文件. 地址:C:\Windows\apache-tomcat-7.0.26\webapps\nexus-2.7.0-06\WEB ...