1.定义指令：constclickOutside={bind(el,binding,vnode){functionclickHandler(e){if(el.contains(e.target)){//

update：所在组件的VNode更新时调用，

render函数的作用简单的说，在vue中使用模板HTML语法组建页面，使用render函数可以用js语言来构建DOM因为vue是虚拟DOM，所以在拿到template模板时也要转译成VNode的函数，

1.创建文件preventReClick.js//自定义指令防止按钮重复点击v-preventReClickexportdefault{inserted(el,binding,vnode){el.addEventListener

dragDialog.js’//让dialog支持鼠标拖动importVuefrom'vue'Vue.directive('DragDialog',{update:function(el,binding,vnode

/transition'//recursivelysearchforpossibletransitiondefinedinsidethecomponentrootfunctionlocateNode(vnode

1.渲染组件如果是组件则：vnode.type的值是一个对象。

$slots在render函数中的应用灌篮高手我是要成为海贼王的男人我是h1《海贼王》//用slot给h3起个名字《火影忍者》//第三个参数存的就是VNODE(虚拟节点)createElement('header

1、创建directive/el-drag-dialog文件drag.js文件exportdefault{bind(el,binding,vnode){constdialogHeaderEl=el.querySelector

渲染器的核心功能:挂载与更新挂载子节点和元素的属性挂载子节点(vnode.children)vnode.children可以是字符串类型的，也可以是数组类型的，如下：constvnode={type:'

Document/*1.通过h函数创建vnode*/constvnode=h('div',{calss:'pei',id:'aaa'},[h('h2',null,'当前计数：100'),h('button

前文提到，vue使用虚拟DOM中主要做了两件事，一个是创建了VNode来模拟DOM树，另一个是通过patch算法比对新旧DOM的变更状态。本节主要介绍VNode相关，包括VNode是什么？

在Vue2版本中，可以使用全局Apirender函数，Vue会给这个函数内部传递一个h函数作为参数，用于创建Vnode的描述对象//使用模板语法编写的.Vue文件最终会被编译成什么样importSonfrom

我们先来解释一下VNode的概念：目前我们先理解HTML元素创建出来的VNode；VNode的全称是VirtualNode，也就是虚拟节点；事实上，无论是组件还是元素，它们最终在Vue中表示出来的都是一个个

constclickoutside={//初始化指令bind(el,binding,vnode){functiondocumentHandler(e){//这里判断点击的元素是否是本身，是本身，则返回if

比如monogodb,es里面叫做shard;hbase叫region,cassdra叫vnode;消息的三层结构如下图：即topic->partition->message;topic是逻辑上的消息容器

自定义指令指令钩子(都是可选的)constmyDirective={//在绑定元素的attribute前//或事件监听器应用前调用created(el,binding,vnode,prevVnode){

Vue.directive('getImage',{//插入inserted(el,binding,vnode){letsrc=el.getAttribute('src');requestImage(src

虽然能直接赋值粘贴就能使用，但是发现在IE下并不能够拖拽，后面终于找到了原因，以下是具体实现的代码：1、首先新建xx.jsVue.directive('dialogDrag',{bind(el,binding,vnode

VirtualDOM）这个概念相信大家都不陌生，从React到Vue，虚拟DOM为这两个框架都带来了跨平台的能力（React-Native和Weex）实际上它只是一层对真实DOM的抽象，以JavaScript对象(VNode

vnode到真实DOM是如何转换的？一个组件想要生成DOM的过程创建vnode----->渲染vnode------>生成DOM组件创建好之后如何初始化？先看一下Vue2和Vue3中的初始化的代码?

性能消耗会比较大；2.解决思路因为js执行速度非常快，vdom最根本原理和解决方案：用js模拟DOM结构，计算出最小的变更，操作真实的dom；3.具体解决方案1.用js模拟dom结构item1item2用vnode

为什么要设置key值提高diff算法的效率,可以更加快捷找出变化和新增的元素，更高效的更新虚拟DOM（key是给每一个vnode的唯一id,可以依靠key,更准确,更快的拿到oldVnode中对应的vnode

属性支持传入HTML片段，但是示例只展示了简单的html片段，通常不能满足开发中的更深入需要，比如我需要把通知弹框添加按钮、复选框，尤其是按钮还会绑定点击事件，这时就不能用示例的html片段；应该使用VNode

generate组成，下面我们来聊聊optimize和generateoptimize，翻译成中文是优化，而optimize完成的正是优化的过程，optimize通过对节点添加标志，从而在页面重新刷新进行vnode

因为vue是虚拟DOM，所以在拿到template模板时也要转译成VNode的函数，而用render函数构建DOM，vue就免去了转译的过程。

渲染函数被执行之后，可以生成一份VNode，而虚拟DOM可以通过这个VNode来渲染视图。AST生成代码字符串比如下面这个代码。

h('',{attrs},'content')h('',{attrs},[itemChildrens])patch(container,vnode)//如果是初次渲染，直接push到contaioner

除了助记图,这里还会添加重点,供大家来理解比较复杂的知识一.重点1.生命周期bind:生成的HTML在内存是调用inserted:HTML渲染在界面上调用update:所在组件的VNode更新时调用，但是可能发生在其子

newVue({1.初始化init()2.挂载$mount()3.编译compile()4.render()5.vnode6.patch()7.DOM})functioninit(){1.合并配置mergerOptions

首先会对模板文件的html的每一个节点转换成VNode，然后多个VNode结合成虚拟Dom树(VDom)，最后再将VDom转成真实的Dom结构。

1.v-if、v-show、v-html的原理v-if会调用addIfCondition方法,生成vnode的时候会忽略对应节点,render的时候就不会渲染v-show会生成vnode,render的时候也会渲染成真实节点

之前我们说过虚拟dom，也就是虚拟dom拿到vnode后所做的事情，而模版编译是如何让虚拟dom拿到vnode。

computed计算属性函数watch监听函数父子通信模板引用组合选项vue3项目搭建简单看下Vue3的优势吧下载安装npm及node.js16.0以上版本（确保安装成功可用如下代码检查版本）npm-vnode-v

VUE3浅析—VNode虚拟节点&diff算法&计算监听属性这里写目录标题一、VNode：虚拟节点二、diff：对比算法1、无key的算法源码实现，分三个步骤：2、有key的算法源码实现，分三个步骤：三

functiondrag(el,binding,vnode){el.onmousedown=function(event){constx=event.pageX-el.offsetLeftconsty=

vue初始化时会用Object.defineProperty()给data中的每一个属性添加getter和setter,同时创建dep和watcher进行依赖收集与派发更新，最后通过diff算法对比新老vnode

exportdefault{bind:function(el,binding,vnode){constdialogHeaderEl=el.querySelector('.el-dialog__header

代码如下：functionpatchVnode(oldVnode,vnode,insertedVnodeQueue,ownerArray,index,removeOnly){if(oldVnode===

VNode有哪些属性？

在src目录下新建directivespermission.js文件exportdefault{name:'action',mounted(el,binding,vnode){console.log(vnode.ctx

vue渲染系统实现，应该包含三个功能，分别是：①h函数，用于返回一个VNode对象；②mount函数，用于将VNode转为真实dom，并挂载到DOM上；③patch函数，类似于diff算法，用于对比两个

directives:{big:{bind(el,binding){console.log(el,binding)el.innerText=binding.value*10},inserted(el,binding,vnode

组合模式概念生成树形结构，表示“整体-部分”让整体和部分都具有一致的操作方式例如文件夹目录image.png虚拟DOM中的vnode是这种形式，但数据类型简单。

exportdefault{bind(el,binding,vnode,oldVnode){constresizeEvent=newCustomEvent('drag-resize',{detail:'

在虚拟dom中，vnode是比较重要的。什么是vnode在vuejs中，有一个Vnode类使用它可以实例不同类型的vnode实例，而不同类型的vnode实例各自表示不同类型的dom元素。

elementUI中el-dialog上部到页面顶部的距离//在main.js中引入Vue.directive('alterELDialogMarginTop'{inserted(el,binding,vnode

patch通过对vnode的type进行判断当前是什么类型节点。

diff算法在很多场景下都有应用，在vue中，作用于虚拟dom渲染成真实dom的新旧VNode节点比较。比较方式：深度优先，同层比较。

只为了演示一下Vue的patch算法这个patch算法也就是Vue的虚拟dam渲染成真正dom的流程首先:初始化patch(container,vnode)functioncreatedElement(