Vue.js 源码分析(十) 基础篇 ref属性详解
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属性详解的更多相关文章
- Vue.js 源码分析(九) 基础篇 生命周期详解
先来看看官网的介绍: 主要有八个生命周期,分别是: beforeCreate.created.beforeMount.mounted.beforeupdate.updated .beforeDes ...
- Vue.js 源码分析(六) 基础篇 计算属性 computed 属性详解
模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护,比如: <div id="example">{{ messag ...
- Vue.js 源码分析(十三) 基础篇 组件 props属性详解
父组件通过props属性向子组件传递数据,定义组件的时候可以定义一个props属性,值可以是一个字符串数组或一个对象. 例如: <!DOCTYPE html> <html lang= ...
- Vue.js 源码分析(四) 基础篇 响应式原理 data属性
官网对data属性的介绍如下: 意思就是:data保存着Vue实例里用到的数据,Vue会修改data里的每个属性的访问控制器属性,当访问每个属性时会访问对应的get方法,修改属性时会执行对应的set方 ...
- Vue.js 源码分析(三) 基础篇 模板渲染 el、emplate、render属性详解
Vue有三个属性和模板有关,官网上是这样解释的: el ;提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标 template ;一个字符串模板作为 Vue 实例的标识使用.模板将会 ...
- Vue.js 源码分析(二) 基础篇 全局配置
Vue.config是一个对象,包含Vue的全局配置,可以在启动应用之前修改下列属性,如下: ptionMergeStrategies ;自定义合并策略的选项silent ...
- Vue.js 源码分析(八) 基础篇 依赖注入 provide/inject组合详解
先来看看官网的介绍: 简单的说,当组件的引入层次过多,我们的子孙组件想要获取祖先组件的资源,那么怎么办呢,总不能一直取父级往上吧,而且这样代码结构容易混乱.这个就是这对选项要干的事情 provide和 ...
- Vue.js 源码分析(七) 基础篇 侦听器 watch属性详解
先来看看官网的介绍: 官网介绍的很好理解了,也就是监听一个数据的变化,当该数据变化时执行我们的watch方法,watch选项是一个对象,键为需要观察的数据名,值为一个表达式(函数),还可以是一个对象, ...
- Vue.js 源码分析(十一) 基础篇 过滤器 filters属性详解
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScrip ...
随机推荐
- 开发技术--浅谈python数据类型
开发|浅谈python数据类型 在回顾Python基础的时候,遇到最大的问题就是内容很多,而我的目的是回顾自己之前学习的内容,进行相应的总结,所以我就不玩基础了,很多在我实际生活中使用的东西,我会在文 ...
- Java构造函数执行顺序
首先执行基类的构造函数 然后执行派生类的构造函数之外的初始化语句 最后执行派生类的构造函数 在Java中,如果派生类构造函数需要调用基类的构造函数,那么基类构造函数必须作为派生类构造函数的第一句话.在 ...
- 电信NBIOT 5 - NB73模块下行测试(自己平台-电线平台-NB73)
电信NBIOT 1 - 数据上行(中国电信开发者平台对接流程) 电信NBIOT 2 - 数据上行(中间件获取电信消息通知) 电信NBIOT 3 - 数据下行 电信NBIOT 4 - NB73模块上行测 ...
- SQL中的视图(极客时间)
视图 视图也就是虚拟表, 本身不具备数据, 是SQL中的一个变红要概念. 如图 视图可以帮助我们使用表的一部分, 而不是所有的表, 另一方面可以针对不同的用户制定不同的查询视图. 创建, 更新与删除视 ...
- JavaScript深入浅出第4课：V8引擎是如何工作的？
摘要: 性能彪悍的V8引擎. <JavaScript深入浅出>系列: JavaScript深入浅出第1课:箭头函数中的this究竟是什么鬼? JavaScript深入浅出第2课:函数是一等 ...
- day06 作业
猜年龄游戏 ''' 1. 给定年龄,用户可以猜三次年龄 2. 年龄猜对,让用户选择两次奖励 3. 用户选择两次奖励后可以退出 ''' import random age = random.randin ...
- 变量、数据类型、python内存管理
pycharm快捷键 ctrl + c 复制, 默认复制整行 ctrl + v 粘贴 ctrl + x 剪切 ctrl + a 全选 ctrl + z 撤销 ctrl + f 查找 ctrl + sh ...
- 【Idea】idea中编译后无法提示错误信息的解决方案
- Centos7安装JDK环境配置
作为一名程序员,各种环境搭建都要会. 下面介绍关于Linux操作系统之centos7(64位)安装JDK以及环境配置. 下面开始学习吧 查看并卸载CentOS自带的OpenJDK 安装好的CentOS ...
- xenserver 添加和卸载硬盘
最近在浪潮服务器上安了xenserver系统,创建虚拟机,没注意磁盘超负载就重启了服务导致各种坑,一言难尽,忧伤逆流成河啊,所以准备将各种操作整理总结记录下,持续更新ing~~ ...