第四十一篇 指令中的VNode
VNode
前面讲到了自定义指令的引入使用,以及结合封装swiper组件一起进行结合使用,还记在inserted 指令生命周期当中使用的参数吗?第一个参数是可以拿到DOM节点(el),第二个参数是可以拿到使用自定义指令绑定的值(binding),那么它还有第三个参数,就是本篇内容要讲的这个 VNode ,那么当听到这个虚拟DOM,VNode,虚拟节点 和 vdom这些词其实指的是 在Vue中虚拟DOM其实是一个js对象来模拟真实DOM节点跟 diff 算法搭配方便做比对,最后Vue会进行哪些节点能否被复用的复用,不能复用的删除创建,以此达到更好的用户体验。那么下面来简单的自定义一个指令来使用这个三个参数:
<div id="app"><div v-custom = "'customVal'">{{mytext}}</div>
</div>
<script>Vue.directive("custom",{inserted(el,binding,vnode){console.log(el);console.log(binding.value);console.log(vnode);}})new Vue({el:'#app',data:{mytext:'自定义指令'}})
</script>
可以查看一下VNode的内容其实它是一个虚拟DOM,虚拟DOM的内容相对真实DOM的内容要少一些,虚拟DOM当中仅有一些必要的属性,那么下面创建一个空div遍历一下真实的DOM:
回头看一下这个VNode,当中没有设置key值,所以可以看到的是key值是undefined值;
在这个div当中还有一个子节点 " {{mytext}} ",没有 "tag",所以它是一个普通的文本节点;
VNode.context
那么看这些和拿到这个虚拟DOM有啥用?我们知道在Vue中实例化创建之后 —— 才有状态 —— 再有VNode —— 映射真实DOM ,所以这个 VNode 起到关联索引的作用,如果放置在根节点,它就是根组件,放置在里边就是一个子组件,在VNode当中有一个context属性,它能关联到当前组件所在节点的对象,VNode.context 拿到的是组件对象,如果放置在根组件的话,拿到的就是Vue的实例;
拿到Vue实例有什么用?还记在上一篇内容当中,在inserted指令生命周期中去拿swiperList的数组长度吗?this.swiperList.length并不能够拿到,this的指向是window对象,我们是通过指令绑定的一个对象,通过这个对象的传过来的,那么现在通过VNode.context能够拿到Vue根组件的实例,不就轻而易举的就访问到根组件中swiperList的数组长度;下面来更改上一回封装swiper获取swiperList.length的方式:(具体内容看上一篇内容)
上一篇部分代码:(this指向)
<!-- v-swiper绑定的是对象 -->
...<div v-swiper=" { current : index , length : swiperList.length } "> ... </div>
..<script>Vue.diretive("swiper",{inserted(el,binding){// 通过 binding.value.length 拿到 swiperList.lengthconsole.log(binding.value.length); // 输出3}})new Vue({ el:'#app',data:{ swiperList:[] },mounted(){ // 赋值swiperList数组三条数据 } })
<script>
修改代码:
<!-- v-swiper绑定的是对象 -->
...<div v-swiper="index"> ... </div>
..<script>Vue.diretive("swiper",{inserted(el,binding,vnode){// 通过 vnode.context console.log(vnode.context.swiperList.length); // 输出3}})new Vue({ el:'#app',data:{ swiperList:[] },mounted(){ // 赋值swiperList数组三条数据 } })
<script>
当然如果是封装的话还是需要注意这个,虽然通过vnode.context可以拿到swiperList.length,但它内部是非常依赖外部的状态,如果使用者用到不是swiperList存放数据的话,通过vnode.content.swiperList.length 具有强关联和强耦合,自己使用的话无可厚非。
小知识 - 指令相关周期
常用的 inserted 和 update ,如果内容相同,可以使用函数(function)进行简写;
bind : 只调用一次,指令第一次绑定到元素时调用,在这里可以进行一次性的初始化设置;
inserted : 被绑定元素插入父节点时调用(仅能保证父节点存在,但不一定已被插入到文档中);
update : 所有组件的VNode更行时调用,但是可能发生发生在其子VNode更新之前.指令的值可能发生了改变,也可能没有,但是通过比较更新前后的值来忽略不必要的模板更新;
componentUpdated : 指令所在组件的VNode及其子VNode(children)全部更新后调用;
upbind : 只调用一次,指令与元素解绑时调用;
那么本篇的内容就到此结束,感谢大家的支持!
第四十一篇 指令中的VNode相关推荐
- angularJS在创建指令需要注意的问题(指令中使用ngRepeat)
现在发现,当初的自己真的是太菜了,为什么你在指令中更改数据,没有作用呢?这其实是原型链的问题. 详细的我就不在这里说了,有位大神早已发布了这个内容,在这里复制个地址给大家,有兴趣的可以看看 http: ...
- Angularjs进阶笔记(2)—自定义指令中的数据绑定
[摘要]有关自定义指令的scope参数,网上很多文章都在讲这3种绑定方式实现的效果是什么,但几乎没有人讲到底怎么使用,本篇希望聊聊到底怎么用这个话题. 一. 自定义指令 自定义指令,是Angularj ...
- 【转】angularjs指令中的compile与link函数详解
这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在使用 ...
- [译]ng指令中的compile与link函数解析 转
通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. 原文地址 angularjs里的指令非常神 ...
- angularjs指令中的compile与link函数详解
通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你 ...
- 【Unity3D Shader编程】之五 圣诞夜篇 Unity中Shader的三种形态对比 混合操作合辑
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 本系列文 ...
- 我的世界服务器中的m p c显示指令,我的世界指令中的commat;p | 手游网游页游攻略大全...
发布时间:2017-04-22 导读:不少玩家在自己的我的世界服务器中,想要限制其他玩家的权限,但是不少心把自己的权限禁止了,那么如何解除op禁用呢?下面小编我就来简单的介绍一下. 问:如何解除服务器 ...
- $httpprovider指令中拦截器interceptors的使用介绍
2019独角兽企业重金招聘Python工程师标准>>> $http服务允许我们使用http请求和后台做通信,但是在每一次放松请求之前我们都希望能够捕捉这个请求并且进行操作,比如之前富 ...
- 如何调用AngularJS指令中定义的方法?
本文翻译自:How to call a method defined in an AngularJS directive? I have a directive, here is the code : ...
最新文章
- 某房产中介服务器托管及安全方案(下)
- 盛语小智教育机器人是骗人的_武清区人民检察院未检工作室,开展普法机器人进校园宣讲活动...
- boost::units模块实现展示信息单元系统
- Cache超清晰逻辑详解----不一致性(待更)
- [再寄小读者之数学篇](2014-12-24 乘积型不等式)
- 2019青海大学计算机调剂,2019青海大学招收硕士研究生调剂公告
- 工作中使用到的单词(软件开发)_2022-02-26_备份
- Paraview使用指南
- Pytorch深度学习实战教程(四):必知必会的炼丹法宝
- 计算机与网络安全系列书籍推荐
- matlab程序求解工程,面向计算科学与工程的Matlab编程源码
- 【Golang】✔️实战✔️ 10 种加密方法实现 ☢️万字长文 建议手收藏☢️
- ​ ViewBag​
- 【Computer Graphics】向量投影
- java wtc_WTC的配置(二)
- Android异步和同步的区别
- SEE Conf 大会直播邀请函丨体验技术风向标
- Dunn检验的介绍和python实现
- 在托马斯·哈代的五月中学习机器学习之新闻分类
- 对象赋值时this指向问题 obj1.say = obj2.say;obj1.say()