weixin_34315189
weixin_34315189

Vue源码剖析——render、patch、updata、vnode

个人博客

如有错误，希望各位留言指点，乐意之极。

有点乱，各种方法交错，很难理清顺序，请海涵

flow前置

在Vue源码里，尤大采用了Flow作为静态类型检查，Flow是facebook出品的静态类型检查工具。

为什么要用Flow？ 众所周知，JavaScript是弱类型的语言。

所谓弱类型指的是定义变量时，不需要什么类型，在程序运行过程中会自动判断类型，如果一个语言可以隐式转换它的所有类型，那么它的变量、表达式等在参与运算时，即使类型不正确，也能通过隐式转换来得到正确地类型，这对使用者而言，就好像所有类型都能进行所有运算一样，所以Javascript被称作弱类型。

可能在初期的时候，这个特点有时候用着很爽，但当你在一个较大的项目中的时候，就会发现这个特性不是一般的麻烦，同事往往不太清楚你所写的函数到底要哪种类型的参数，而且代码重构的时候也很麻烦。

于是基于这个需求有了Typescript和Flow的产生，但是TypeScript学习成本较大，一般来说不会为了一些便利去学习一门语言，所以Facebook在四年前开源了Flow。

Vue为什么要用Flow而不用Typescript开发框架呢？尤雨溪知乎的回答是这样的。

具体怎么用，可以到这学习查看中文文档。本文主要讲Vue源码技巧，不会过多解释Flow。

项目架构

Vue.js 是一个典型的 MVVM框架，核心思想是数据驱动和组件化。DOM是数据的一种自然映射，在Vue中只需要修改数据即可达到DOM更新的目的。组件化是将页面上每一个独立的功能块或者交互模块视作一个组件，把页面看做是容器，从而实现搭积木式的开发方式。 把源码download到本地我们看下目录结构

目录结构

Vue源码目录分工明确。整个目录大致分为

  • benchmarks:处理大量数据时测试Demo
  • dist:各环境所需的版本包
  • examples:用Vue实现的一些实用Demo
  • flow: 数据类型检测配置
  • packages: 特定环境运行需要单独安装的插件
  • src: 整个源码的核心。
  • script: npm脚本配置文件
  • test: 测试用例
  • types: 新版typescript配置

核心代码都在src目录下，其中包含实例化、数据响应式处理、模板编译、事件中心、全局配置等等都在这个目录下。

从入口开始

从编译器,找到根目录下的package.json文件,可以看到在script里有一个dev，这个文件生成了rollup打包器的配置， 

rollup -w -c scripts/config.js --environment TARGET:web-full-dev
复制代码

rollup表示它使用了rollup打包器，-w表示watch监听文件变化，c表示config使用配置文件来打包，如果后面没有指定文件就默认指定rollup.config.js,再后面表示指定scripts/config.js配置rollup，--environment表示设置环境变量，后面携带参数TARGET:web-full-dev表示环境变量名和值，我们再到scripts/config.js，可以看到环境变量参数已经带过来并且触发了genConfig()函数

那 genConfig()做了什么

其他的隐藏暂时不看，首先 const opts = builds[name]在 builds变量查找到配置。定义了入口文件和输出配置，如果定义了运行环境，就储存到该字段。 然后在这个文件里找到 web-full-dev对应的配置是这样的：它主要申明了入口 entry和模块定义 format、输出 dest、环境名称 env，rollup编译 alias，框架信息 banner，入口是 web/entry-runtime-with-compiler.js, 但是在当前目录并没有 web文件夹，那怎么找呢？在上面我们可以看到有一个 resolve()路径代理函数

利用 split切割传入的文件名匹配引入的 alias配置、最终定位到 src/platforms/web/entry-runtime-with-compiler.js，找到Vue在这储存了 $mount的方法并且新申明了一个 $mount的方法,利用储存的 mount方法在底部再次进行挂载处理并将结果返回。为什么要重新申明，查阅资料后知道原来 runtime-only版本并没有后申明的 $mount这部分的处理，这样的做就可以在保持原有函数的基础上进行复用，这一点值得我们去学习。

不轻易修改原有逻辑，但是可以将原有的函数储存起来，再重新声明。

整体流程

先看大概的整体流程

  • 首次渲染，执行compileToFunctions()将模板template解析成renderFn（render函数）,如果renderFn已存在就跳过此部
  • 将renderFn通过vm._render()编译成Vnode，在读取其中变量的同时，Watcher通过Object.defindProperty()的get方法收集依赖到dep,开始监听
  • 执行updataComponent()，首先到vdom的patch()方法会将vnode渲染成真实DOM
  • 将DOM挂载到节点上，等待data发生改变
  • data属性发生变化，首先查看收集的依赖中是否存在该data值的引用，不存在就不管，存在则触发Object.defindProperty()的set方法修改值并且执行_updata 进行 patch() 和updataComponent()进行组件更新

大致分为

esm 完整构建 ：包含模板编译器，渲染过程 HTML字符串 → render函数 → VNode → 真实DOM节点

runtime-only 运行时构建 ：不包含模板编译器，渲染过程 render函数 → VNode → 真实DOM节点

runtime-only版本是没有template=>render这一步的，不带模板编译器。

解释一下各类词汇

  1. template 模板 ：Vue的模板基于纯HTML，基于Vue的模板语法，还是可以按照以前HTML式写结构。
  2. AST 抽象语法树： Abstract Syntax Tree 的简称，主要做三步
    1. parse:Vue使用HTML的Parser将HTML模板解析为AST
    2. optimizer:对AST进行一些优化static静态节点的标记处理，提取最大的静态树，当_update更新界面时，会有一个patch的过程，diff算法会直接跳过静态节点，从而减少了patch的过程，优化了patch的性能
    3. generateCode:根据 AST 生成 render 函数
  3. renderFn 渲染函数 ：渲染函数是用来生成Virtual DOM(vdom)的。Vue推荐使用模板来构建我们的应用界面，在底层实现中Vue会将模板编译成renderFn函数，当然我们也可以不写模板，直接写渲染函数，以获得更好的控制
  4. Virtual DOM (vdom，也称为VNode)：虚拟DOM树，Vue的Virtual DOM Patching算法是基于 Snabbdom库 的实现，并在些基础上作了很多的调整和改进。只能通过RenderFn执行vm._render()生成，patch的目标都是Vnode，并且每个Vnode在全局都是唯一的
  5. patch：在上面vdom已经说到这个，但还是要说一句，patch是整个virtaul-dom当中最为核心的方法，主要功能是对旧vnode和新vnode进行diff的过程，最后生成新的DOM节点通过updataComponent()方法重新渲染，vue对此做了相当多的性能优化
  6. Watcher (观察者)：每个Vue组件都有一个对应的 Watcher ，这个 Watcher 将会在组件 render 的时候收集组件所依赖的数据，并在依赖有更新的时候，触发组件vm._updata调用patch()进行diff，重新渲染DOM。

不扯废话，开撸

挂载

新挂载$mount的这个方法。 

Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && query(el)
  .....
复制代码

key?:value (key: value|void);

el?:string|Element是flow的语法，表示传入的el字符串可以是string和Element以及void类型——undefined类型，hydrating?: boolean同样，必须是布尔类型和undefined。

key:?value (key: value|void|null);

表示该key必须为value或者undefined以及null类型。

function():value (:value) :Component表示函数返回值必须为Component类型。

function(key:value1|value2) (key:value1|value2) 表示key必须为value1或者是value2类型。

编译RenderFn

el = el && query(el)对传入的el元素节点做了确认，如果传入的节点容器没有找到的便警告并且return一个createElement('div')新的div。

//判断传入的标签如果是body或者是页面根节点
//就警告禁止挂载在页面根节点上，因为挂载会替换该节点。最后返回该节点
  if (el === document.body || el === document.documentElement) {
    process.env.NODE_ENV !== 'production' && warn(
      `Do not mount Vue to  or  - mount to normal elements instead.`
    )
    return this
  }
    
  const options = this.$options;    
  if (!options.render) {    //如果接受的值已经有写好的RenderFn，则不用进行任何操作,如果render不存在，就进入此逻辑将模板编译成renderFn
    let template = options.template
    if (template) {
        ...   //有template就使用idToTemplate()解析,最终返回该节点的innerHTML
      } if (typeof template === 'string') {
        if (template.charAt(0) === '#') {//如果模板取到的第一个字符是#
          template = idToTemplate(template)
          if (process.env.NODE_ENV !== 'production' && !template) {//开发环境并且解析模板失败的报错：警告模板为空或者未找到
            warn(
              `Template element not found or is empty: ${options.template}`,
              this
            )
          }
        }
      }else if (template.nodeType) {
        //如果有节点类型，判定是普通节点，也返回innerHTML
        template = template.innerHTML  
      } else {  
        //没有template就警告该模板无效
        if (process.env.NODE_ENV !== 'production') {
          warn('invalid template option:' + template, this)
        }
        return this
      }
    } else if (el) {
        //如果是节点的话，获取html模板片段,getOuterHTML()对传入的el元素做了兼容处理，最终目的是拿到节点的outerHTML
        //getOuterHTML()可以传入DOM节点，CSS选择器，HTML片段
      template = getOuterHTML(el)
    }
    if (template) {
     //编译HTML生成renderFn，赋给options,vm.$options.render此时发生变化
      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        //开始标记
        mark('compile')
      }
      /*  compileToFunctions()主要是将getOuterHTML获取的模板编译成RenderFn函数，该函数的具体请往后翻看
       *  具体步骤之后再说，编译大致主要分成三步 
       *  1.parse：将 html 模板解析成抽象语法树(AST)。
       *  2.optimizer：对 AST 做优化处理。
       *  3.generateCode：根据 AST 生成 render 函数。
       */ 
      const { render, staticRenderFns } = compileToFunctions(template, {
        shouldDecodeNewlines,
        shouldDecodeNewlinesForHref,
        delimiters: options.delimiters,
        comments: options.comments
      }, this)
      options.render = render;  //最后将解析的renderFn 赋值给当前实例
      options.staticRenderFns = staticRenderFns //编译的配置
      
      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        //结束标记
        mark('compile end')
        //根据mark()编译过程计算耗时差，用于到控制台performance查看阶段渲染性能
        measure(`vue ${this._name} compile`, 'compile', 'compile end')
      }
    }
  }
    //最后返回之前储存的mount()方法进行挂载，如果此前renderFn存在就直接进行此步骤
    return mount.call(this, el, hydrating)
}
复制代码

这里最重要的就是compileToFunctions()将template编译成RenderFn,该方法请通过目录跳转查看。

本段代码对 template的多种写法做兼容处理，最终取到 renderFn，过程中顺带进行性能埋点等辅助功能。 最后 return mount.call(...)这个在 

  import Vue from './runtime/index'
复制代码

编译的过程比较复杂，之后再说。到这发现Vue的原型方法并不是在这建立的，我们需要到上一级 src/platforms/runtime/index.js,

// 配置了一些全局的方法
Vue.config.mustUseProp = mustUseProp 
Vue.config.isReservedTag = isReservedTag 
Vue.config.isReservedAttr = isReservedAttr
Vue.config.getTagNamespace = getTagNamespace
Vue.config.isUnknownElement = isUnknownElement

// 安装平台的指令和组件
extend(Vue.options.directives, platformDirectives)
extend(Vue.options.components, platformComponents)

// 如果在浏览器里，证明不是服务端渲染，添加__patch__方法
Vue.prototype.__patch__ = inBrowser ? patch : noop

// 挂载$mount方法。
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
    //必须在浏览器环境才返回该节点，runtime-only版本会直接运行到这
  el = el && inBrowser ? query(el) : undefined
  
  return mountComponent(this, el, hydrating)
}
复制代码

hydrating这个传参可以全局性的理解为，服务端渲染，默认false。 最后进行mountComponent(this, el, hydrating)其实就是对组件进行一个update和watcher的过程。具体看下mountComponent做了什么。找到src/core/instance/lifecycle.js，这个文件负责为实例添加生命周期类函数.

export function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean 
): Component {
  vm.$el = el  //首先将vm.$el将传入的el做缓存,$el现在为真实的node
  if (!vm.$options.render) {
    //因为最后只认renderFn，如果没有的话，就创建一个空节点Vnode
    vm.$options.render = createEmptyVNode
    
    if (process.env.NODE_ENV !== 'production') {//开发环境下
      if ((vm.$options.template && vm.$options.template.charAt(0) !== '#') ||
        vm.$options.el || el) {
        /*
         （如果定义了template但是template首位不是'#'）或者（没有传入element），就会警告当前使用的是runtime-only版本，
         默认不带编译功能，如果需要编译的话，则需要更换构建版本，下面类似
         */
      } else {
        warn(//挂载组件失败：template或者renderFn未定义
          'Failed to mount component: template or render function not defined.',
          vm
        )
      }
    }
  }
  // 在挂载之前为当前实例初始化beforMount生命周期
  callHook(vm, 'beforeMount');
  
  // 声明了一个 updateComponent 方法，这个是将要被 Watcher实例调用的更新组件的方法。
  // 根据性能的对比配置不同的更新方法,
  // performance+mark可以用于分析Vue组件在不同阶段中花费的时间，进而知道哪里可以优化。
  let updateComponent 
  if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
    updateComponent = () => {
      //获取组件标记
      const name = vm._name
      const id = vm._uid
      const startTag = `vue-perf-start:${id}`
      const endTag = `vue-perf-end:${id}`

      mark(startTag);//标记开始节点
      const vnode = vm._render();//生成一个Vnode
      mark(endTag);//标记结束节点
      
      
      //做performance命名'vue ${name} render'，这样就可以在proformance中查看应用程序的运行状况、渲染性能，最后删除标记和度量
      measure(`vue ${name} render`, startTag, endTag);
     
      mark(startTag);
      vm._update(vnode, hydrating);
     
      mark(endTag)
      measure(`vue ${name} patch`, startTag, endTag);
    }
  } else {
    updateComponent = () => {
    // 定义一个渲染watcher函数
    // vm._render()里会调用render函数，并返回一个VNode，在生成VNode的过程中，会动态计算getter,同时推入到dep里面进行数据监听，每次数据更新后都出触发当前实例的_updata进行组件更新
    // _update()方法会将新vnode和旧vnode进行diff比较，最后完成dom的更新工作,该方法请往下移步
      vm._update(vm._render(), hydrating)
    }
  }
  /* 新建一个_watcher对象，将监听目标推入dep，vm实例上挂载的_watcher主要是为了更新DOM调用当前vm的_watcher 的 update 方法。用来强制更新。为什么叫强制更新呢？
   * vue里面有判断，如果newValue == oldValue， 那么就不触发watcher更新视图了
   * vm：当前实例
   * updateComponent：用来将vnode更新到之前的dom上
   * noop：无效函数，可以理解为空函数
   * {before(){...}}：配置，如果该实例已经挂载了，就配置beforeUpdate生命周期钩子函数
   * true：主要是用来判断是哪个watcher的。因为computed计算属性和如果你要在options里面配置watch了同样也是使用了 new Watcher ，加上这个用以区别这三者
   */
  new Watcher(vm, updateComponent, noop, {
    before () {
      if (vm._isMounted) {
        callHook(vm, 'beforeUpdate')
      }
    }
  }, true )
  hydrating = false  //关闭服务端渲染，服务端渲染只有created()和beforeCreate()
  
  if (vm.$vnode == null) {
    vm._isMounted = true
    callHook(vm, 'mounted')
  }
  return vm
}
复制代码

这个函数的具体作用就是挂载节点，并对data做响应式处理。 至于为什么会有个判断语句来根据条件声明 updateComponent方法，其实从 performance 可以看出，其中一个方法是用来测试render 和 update 性能的。便于在Chrome=>performance中查看渲染性能

process.env.NODE_ENV !== 'production' && config.performance && mark
复制代码

首先判断当前的环境和是否配置支持performance，然后调用mark和measure方法，其中mark封装了一个方法,具体的API可以参考MDN performance,给当前元素做一个标记，然后返回一个具体的时间点，主要功能是性能埋点

if (process.env.NODE_ENV !== 'production') {
    //判断当前浏览器runtime是否支持performace
  const perf = inBrowser && window.performance
  if (
    perf &&
    perf.mark &&
    perf.measure &&
    perf.clearMarks &&
    perf.clearMeasures
  ) {
    mark = tag => perf.mark(tag);//标记该节点
    measure = (name, startTag, endTag) => {
      perf.measure(name, startTag, endTag)
      //作性能埋点后，删除所有的标记和度量
      perf.clearMarks(startTag)
      perf.clearMarks(endTag)
      perf.clearMeasures(name)
    }
  }
}
复制代码

至于刚才的vm._update()在上面lifecyle.js已经定义了

Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
    //首先接收vnode
    const vm: Component = this
    const prevEl = vm.$el;//真实的dom节点
    const prevVnode = vm._vnode;//之前旧的vnode
    const prevActiveInstance = activeInstance;// null
    activeInstance = vm;//获取当前的实例
    vm._vnode = vnode;//当前新的vnode 
    if (!prevVnode) {
      // 如果需要diff的旧vnode不存在，就无法进行__patch__
      // 因此需要用新的vnode创建一个真实的dom节点
      vm.$el = vm.__patch__(
                        vm.$el, //真实的dom节点
                        vnode,  //传入的vnode
                        hydrating, //是否服务端渲染
                        false /* removeOnly是一个只用于  的特殊标签，确保移除元素过程中保持一个正确的相对位置。 */)
    } else {
      // 如果需要diff的prevVnode存在，那么首先对prevVnode和vnode进行diff
      // 并将需要的更新的dom操作已patch的形式打到prevVnode上，并完成真实dom的更新工作
      vm.$el = vm.__patch__(prevVnode, vnode)
    }
    
    activeInstance = prevActiveInstance;//
    // 如果存在真实的dom节点
    if (prevEl) {
      //就将之前的__vue__清空，再挂载新的
      prevEl.__vue__ = null
    }
    // 将更新后的vm挂载到的vm__vue__上缓存
    if (vm.$el) {
      vm.$el.__vue__ = vm
    }
    // 如果当前实例的$vnode与父组件的_vnode相同，也要更新其$el
    if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) {
      vm.$parent.$el = vm.$el
    }
  }
复制代码

怎么进行patch？

__patch__是整个整个virtaul-dom当中最为核心的方法了，主要功能是对prevVnode(旧vnode)和新vnode进行diff的过程，经过patch比对，最后生成新的真实dom节点更新改变部分的视图。 在/packages/factory.js里，定义了patch()，代码过多，只摘取重要部分，目前清楚流程即可，vue2.0+是参考snabbdom建立的patch虚拟dom算法

return function patch (oldVnode, vnode, hydrating, removeOnly, parentElm, refElm) {
    //用到的参数，oldVnode：旧的vnode、vnode：新的vnode、hydrating：服务端渲染、removeOnly：避免误操作
    //当新的vnode不存在，并且旧的vnode存在时，直接返回旧的vnode，不做patch
    if (isUndef(vnode)) {
      if (isDef(oldVnode)) { invokeDestroyHook(oldVnode); }
      return
    }
    var insertedVnodeQueue = [];

    //如果旧的vnode不存在
    if (isUndef(oldVnode)) {
      //就创建一个新的节点
      createElm(vnode, insertedVnodeQueue, parentElm, refElm);
    } else {
      //获取旧vnode的节点类型
      var isRealElement = isDef(oldVnode.nodeType);
      // 如果不是真实的dom节点并且属性相同
      if (!isRealElement && sameVnode(oldVnode, vnode)) {
        // 对oldVnode和vnode进行diff，并对oldVnode打patch
        patchVnode(oldVnode, vnode, insertedVnodeQueue, removeOnly);
      } 
      }
    }
    //最后返回新vnode的节点内容
    return vnode.elm
  }
复制代码

这是一个基本的patch，它的目标转到/src/core/vdom/patch.js的patchVnode(), 并且通过sameVnode()可以预先比对旧vnode和新vnode两者的基础属性，这个方法决定了接下来是否需要对oldVnode和vnode进行diff

function sameVnode (a, b) {
  return (
    a.key === b.key &&
    a.tag === b.tag &&
    a.isComment === b.isComment &&
    isDef(a.data) === isDef(b.data) &&
    sameInputType(a, b)
  )
}
复制代码

只有当基本属性相同的情况下才认为这个2个vnode只是局部发生了更新，然后才会对这2个vnode进行diff，如果2个vnode的基本属性存在不一致的情况，那么就会直接跳过diff的过程，进而依据vnode新建一个真实的dom，同时删除老的节点。 首次渲染的时候，oldVnode并不存在，所以直接进行domcreateElm(vnode, insertedVnodeQueue, parentElm, refElm);创建一个新的节点，相反，存在oldVnode，当oldVnode和vnode都存在且sameVnode(oldVnode, vnode)2个节点的基本属性相同，那么就进入了2个节点的diff过程。

在/src/core/vdom/patch.js里定义里patchVnode函数

function patchVnode (oldVnode, vnode, insertedVnodeQueue, removeOnly) {
    /* 
    * 比较新旧vnode节点，根据不同的状态对dom做合理的更新操作（添加，移动，删除）整个过程还会依次调用prepatch,update,postpatch等钩子函数，在编译阶段生成的一些静态子树
    * 在这个过程中由于不会改变而直接跳过比对，动态子树在比较过程中比较核心的部分就是当新旧vnode同时存在children，通过updateChildren方法对子节点做更新，
    * @param oldVnode 旧vnode
    * @param vnode    新vnode
    * @param insertedVnodeQueue  空数组，用于生命周期 inserted 阶段，记录下所有新插入的节点以备调用
    * @param removeOnly 是一个只用于  的特殊标签，确保移除元素过程中保持一个正确的相对位置。
    */
    if (oldVnode === vnode) {
      return
    }
    
    const elm = vnode.elm = oldVnode.elm
    // 异步占位
    if (isTrue(oldVnode.isAsyncPlaceholder)) {
      if (isDef(vnode.asyncFactory.resolved)) {
        hydrate(oldVnode.elm, vnode, insertedVnodeQueue)
      } else {
        vnode.isAsyncPlaceholder = true
      }
      return
    }
    
    //如果新vnode和旧vnode都是静态节点，key相同，或者新vnode是一次性渲染或者克隆节点，那么直接替换该组件实例并返回
    if (isTrue(vnode.isStatic) &&
      isTrue(oldVnode.isStatic) &&
      vnode.key === oldVnode.key &&
      (isTrue(vnode.isCloned) || isTrue(vnode.isOnce))
    ) {
      vnode.componentInstance = oldVnode.componentInstance
      return
    }

    // 可以往下翻去看vnode的例子，data是节点属性，包含class style attr和指令等
    let i
    const data = vnode.data
    // 如果组件实例存在属性并且存在prepatch钩子函数就更新attrs/style/class/events/directives/refs等属性
    if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) {
      i(oldVnode, vnode)
    }

    const oldCh = oldVnode.children
    const ch = vnode.children
    //如果新的vnode带有节点属性，isPatchable返回是否含有组件实例的tag标签，两者满足
    if (isDef(data) && isPatchable(vnode)) {
      // cbs保存了hooks钩子函数: 'create', 'activate', 'update', 'remove', 'destroy'
      for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode)
      // 取出cbs保存的update钩子函数，依次调用，更新attrs/style/class/events/directives/refs等属性
      if (isDef(i = data.hook) && isDef(i = i.update)) i(oldVnode, vnode)
    }
    //如果vnode没有文本节点
    if (isUndef(vnode.text)) {
      //如果旧vnode和新vnode的子节点都存在
      if (isDef(oldCh) && isDef(ch)) {
        // 如果子节点不同，updateChildren就对子节点进行diff
        if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
        //如果只存在新vnode
      } else if (isDef(ch)) {
        // 先将旧节点的文本清空
        if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
        // 然后将vnode的children放进去
        addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
        // 如果只存在旧vnode
      } else if (isDef(oldCh)) {
        // 就删除elm下的oldchildren
        removeVnodes(elm, oldCh, 0, oldCh.length - 1)
        // 如果只有旧vnode的文本内容
      } else if (isDef(oldVnode.text)) {
        // 直接清空内容
        nodeOps.setTextContent(elm, '')
      }
      // 如果是两者文本内容不同
    } else if (oldVnode.text !== vnode.text) {
      // 直接更新vnode的文本内容
      nodeOps.setTextContent(elm, vnode.text)
    }
    // 更新完毕后，执行 data.hook.postpatch 钩子，表明 patch 完毕
    if (isDef(data)) {
      if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode)
    }
  }
复制代码

通过比对新旧vnode节点属性、子元素、节点类型和内容等多种方式进行patch，过程中使用hooks更新节点属性。 理一下逻辑 源码中添加了一些注释便于理解，来理一下逻辑。

  1. 如果两个vnode相等，不需要 patch。
  2. 如果是异步占位，执行 hydrate 方法或者定义 isAsyncPlaceholder 为 true，然后退出。
  3. 如果两个vnode都为静态，不用更新，所以将以前的 componentInstance 实例传给当前 vnode。 退出patch
  4. 执行 prepatch 钩子。
  5. 依次遍历调用 update 回调，执行 update钩子。更新attrs/style/class/events/directives/refs等属性。
  6. 如果两个 vnode 都有 children，且 vnode 没有 text 文本内容、两个 vnode 不相等，执行 updateChildren 方法。这是虚拟 DOM 的关键。
  7. 如果新 vnode 有 children，而老的没有，清空文本，并添加 vnode 节点。
  8. 如果老 vnode 有 children，而新的没有，清空文本，并移除 vnode 节点。
  9. 如果两个 vnode 都没有 children，老 vnode 有 text ，新 vnode 没有 text ，则清空 DOM 文本内容。
  10. 如果老 vnode 和新 vnode 的 text 不同，更新 DOM 元素文本内容。
  11. 调用 postpatch 钩子告知patch完毕。

updateChildren

这个有点绕

function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
    /*
     * @ parentElm 父元素
     * @ oldCh  旧子节点
     * @ newCh  新子节点
     * @ insertedVnodeQueue 记录下所有新插入的节点以备调用
     * @ removeOnly 是仅由使用的特殊标志，在离开过渡期间，确保删除的元素保持正确的相对位置
     */
    let oldStartIdx = 0  //oldStartIdx => 旧头索引
    let newStartIdx = 0   //newStartIdx => 新头索引
    let oldEndIdx = oldCh.length - 1 //oldEndIdx => 旧尾索引
    let oldStartVnode = oldCh[0] // 旧首索引节点，第一个
    let oldEndVnode = oldCh[oldEndIdx] // 旧尾索引节点，最后一个
    let newEndIdx = newCh.length - 1 //newEndIdx => 新尾索引
    let newStartVnode = newCh[0] // 新首索引节点，第一个
    let newEndVnode = newCh[newEndIdx] // 新首索引节点，最后一个

    // 可以理解为
    // 1. 旧子节点数组的 startIndex, endIndex, startNode, endNode
    // 2. 新子节点数组的 startIndex, endIndex, startNode, endNode

    let oldKeyToIdx, idxInOld, vnodeToMove, refElm
    //可以进行移动
    const canMove = !removeOnly  

    if (process.env.NODE_ENV !== 'production') {
      //首先会检测新子节点有没有重复的key
      checkDuplicateKeys(newCh)
    }

    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
      if (isUndef(oldStartVnode)) {
        oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
      } else if (isUndef(oldEndVnode)) {
        oldEndVnode = oldCh[--oldEndIdx]

        //如果旧首索引节点和新首索引节点相同
      } else if (sameVnode(oldStartVnode, newStartVnode)) {
        //对旧头索引节点和新头索引节点进行diff更新， 从而达到复用节点效果
        patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue)
        //旧头索引向后
        oldStartVnode = oldCh[++oldStartIdx]
        //新头索引向后
        newStartVnode = newCh[++newStartIdx]
                //如果旧尾索引节点和新尾索引节点相似，可以复用
      } else if (sameVnode(oldEndVnode, newEndVnode)) {
        //旧尾索引节点和新尾索引节点进行更新
        patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue)
        //旧尾索引向前
        oldEndVnode = oldCh[--oldEndIdx]
        //新尾索引向前
        newEndVnode = newCh[--newEndIdx]
      } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
        /*  有一种情况，如果
          * 旧【5，1，2，3，4】
          * 新【1，2，3，4，5】，那岂不是要全删除替换一遍 5->1,1->2...?
          * 即便有key，也会出现[5,1,2,3,4]=>[1,5,2,3,4]=>[1,2,5,3,4]...这样太耗费性能了
          * 其实我们只需要将5插入到最后一次操作即可
        */
        // 对旧首索引和新尾索引进行patch
        patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue)
        // 旧vnode开始插入到真实DOM中，旧首向右移，新尾向左移
        canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))
        oldStartVnode = oldCh[++oldStartIdx]
        newEndVnode = newCh[--newEndIdx]
      } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
        // 同上中可能，旧尾索引和新首也存在相似可能
        // 对旧首索引和新尾索引进行patch
        patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue)
        // 旧vnode开始插入到真实DOM中，新首向左移，旧尾向右移
        canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
        oldEndVnode = oldCh[--oldEndIdx]
        newStartVnode = newCh[++newStartIdx]
      } else {
        //如果上面的判断都不通过，我们就需要key-index表来达到最大程度复用了
         //如果不存在旧节点的key-index表，则创建
        if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
         //找到新节点在旧节点组中对应节点的位置
        idxInOld = isDef(newStartVnode.key)? oldKeyToIdx[newStartVnode.key] : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
          //如果新节点在旧节点中不存在，就创建一个新元素，我们将它插入到旧首索引节点前（createElm第4个参数）
        if (isUndef(idxInOld)) { // New element
          createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
        } else {
          // 如果旧节点有这个新节点
          vnodeToMove = oldCh[idxInOld]
            // 将新节点和新首索引进行比对，如果类型相同就进行patch
          if (sameVnode(vnodeToMove, newStartVnode)) {
            patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue)
            // 然后将旧节点组中对应节点设置为undefined,代表已经遍历过了，不在遍历，否则可能存在重复插入的问题
            oldCh[idxInOld] = undefined
            // 如果不存在group群体偏移，就将其插入到旧首节点前
            canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
          } else {
            // 类型不同就创建节点，并将其插入到旧首索引前（createElm第4个参数）
            // same key but different element. treat as new element
            createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
          }
        }
        //将新首往后移一位
        newStartVnode = newCh[++newStartIdx]
      }
    }
    //当旧首索引大于旧尾索引时，代表旧节点组已经遍历完，将剩余的新Vnode添加到最后一个新节点的位置后
    if (oldStartIdx > oldEndIdx) {
      refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
      addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
    } //如果新节点组先遍历完，那么代表旧节点组中剩余节点都不需要，所以直接删除
      else if (newStartIdx > newEndIdx) {
      removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx)
    }
  }
复制代码

Vnode

在/src/core/vdom/vnode.js中有定义Vnode属性

export default class VNode {
  constructor (
    tag?: string,
    data?: VNodeData,
    children?: ?Array,
    text?: string,
    elm?: Node,
    context?: Component,
    componentOptions?: VNodeComponentOptions,
    asyncFactory?: Function
  ) {
    this.tag = tag //标签属性
    this.data = data  //渲染成真实DOM后，节点上到class attr style 事件等...
    this.children = children //子节点，也上vnode
    this.text = text  // 文本
    this.elm = elm  //对应着真实的dom节点
    this.ns = undefined //当前节点的namespace（命名空间）
    this.context = context //编译的作用域
    this.fnContext = undefined // 函数化组件上下文
    this.fnOptions = undefined // 函数化组件配置项
    this.fnScopeId = undefined // 函数化组件ScopeId
    this.key = data && data.key  //只有绑定数据下存在，在diff的过程中可以提高性能
    this.componentOptions = componentOptions // 通过vue组件生成的vnode对象，若是普通dom生成的vnode，则此值为空
    this.componentInstance = undefined  //当前组件实例
    this.parent = undefined // vnode、组件的占位节点
    this.raw = false    //是否为原生HTML或只是普通文本
    this.isStatic = false  //静态节点标识 || keep-alive
    this.isRootInsert = true    // 是否作为根节点插入
    this.isComment = false  // 是否为注释节点
    this.isCloned = false  //是否为克隆节点
    this.isOnce = false    //是否为v-once节点
    this.asyncFactory = asyncFactory // 异步工厂方法
    this.asyncMeta = undefined //异步Meta
    this.isAsyncPlaceholder = false //是否为异步占位

  }

  //容器实例向后兼容的别名
  get child (): Component | void {
    return this.componentInstance
  }
}
复制代码

其他属性不重要，最主要的上tag、data、children、key、text这几个属性。 VNode可以具体氛围以下几类

  • TextVNode 文本节点。
  • ElementVNode 普通元素节点。
  • ComponentVNode 组件节点。
  • EmptyVNode 没有内容的注释节点。
  • CloneVNode 克隆节点，可以是以上任意类型的节点，唯一的区别在于isCloned属性为true 我们先定义一个vnode
 {
    tag: 'div'
    data: {
        id: 'app',
        class: 'test'
    },
    children: [
        {
            tag: 'span',
            data:{
                
            },
            text: 'this is test'
        }
    ]
}
复制代码

每一层对象都是一个节点。vnode

    {
        tag:'标签1',
        attrs:{
            属性key1:属性value1,
            属性key2:属性value2,
            ...
        },
        children:[
            {
                tag:'子标签1',
                attrs:{
                    子属性key1:子属性value1,
                    子属性key2:子属性value2,
                    ...
                },
                children:[
                    {
                        ....
                    }
                ]
            },
            {
                tag:'子标签2',
                attrs:{
                    子属性key1:子属性value1,
                    子属性key2:子属性value2,
                    ...
                },
                children:[
                    {
                        ....
                    }
                ]
            }
        ]
    }
复制代码

以嵌套递归的方式产生最后渲染成

"app" class="test">
    this is test


复制代码

Vue组件树建立起来的整个VNode树是唯一的。这意味着，手写render函数不能组件化

render: function (createElement) {
  var myVnode = createElement('p', 'hi')
  return createElement('div', [
    myVnode, myVnode
  ])
}
复制代码

而官方的做法是可以用工厂函数进行

render: function (createElement) {
  return createElement('div',
    Array.apply(null, { length: 20 }).map(function () {
      return createElement('p', 'hi')
    })
  )
}
复制代码

为什么要这么做？ 笔者的理解是，createElement是创建了一个子 Vnode对象，此时的Vnode已经是唯一的，你如果再重复去使用到组件中，就造成了不唯一。

看了一下，有点门路。顺带解释下 可能你会觉得这样写太麻烦了，直接Array(20).map()多轻松。但是

new Array(20).map(function(v,i){
	console.log(v,i);//不会输出任何东西，
})
复制代码

map只对有值(包括undefined)的下标项才会去依次遍历，最后按先后顺序再组成数组，因为new Array(20)的话，数组内的值没有初始化，打印输出结果为[ empty * 20]。所以map后不会打印出任何东西，因为没有被初始化,都是空值，被略过了。

但是，第二种方式，Array.apply(null, {length: 20}),输出为[undefined,undefined,undefined....*20]，是一个已经被初始化值、包含20个undefined的数组。再加上map()，也就是说每一次都是Array.apply(null,[undefined,undefined,.....]，再熟悉一点就是Array(undefined,undefined,...*20)，通过return去循环createElement创建20个vnode

为什么要写这么复杂？ES6的Array.from能做到，但是作者应该是考虑到兼容还是用了ES5就能够办到的事情。感叹尤大的基础功力...

compileToFunctions（template编译成render)

首先在/src/platforms/web/compiler/index.js有定义compileToFunctions()方法，

// 设置编译的选项，不设置则使用默认配置，配置项比较多
import { baseOptions } from './options'
import { createCompiler } from 'compiler/index'
// 通过模板导入配置生成AST和Render
const { compile, compileToFunctions } = createCompiler(baseOptions)

export { compile, compileToFunctions }
复制代码

先看导入的配置

export const baseOptions: CompilerOptions = {
  expectHTML: true,
  modules,
  directives,
  isPreTag,
  isUnaryTag,
  mustUseProp,
  canBeLeftOpenTag,
  isReservedTag,
  getTagNamespace,
  staticKeys: genStaticKeys(modules)
}
复制代码

可以看到定义了compile和compileToFunctions,前者是AST语法树，后者是是编译好的renderFn

import { parse } from './parser/index' // 将 HTML template解析为AST
import { optimize } from './optimizer'  // 对AST优化标记处理，提取最大的静态树
import { generate } from './codegen/index' // 根据 AST 生成 render 函数
import { createCompilerCreator } from './create-compiler' //允许创建使用替代编译器，在这只使用默认部件导出默认编译器

export const createCompiler = createCompilerCreator(function baseCompile (
  template: string,
  options: CompilerOptions
): CompiledResult {
  // parseHTML 的过程，导入配置，将template去掉空格，解析成AST ，最后返回AST元素对象
  const ast = parse(template.trim(), options)
  console.log(ast)
  
  // 默认开始优化标记处理，否则不进行优化
  if (options.optimize !== false) {
    optimize(ast, options)
  }
  // 拿到最终的code。里面包含renderFn和静态renderFn
  const code = generate(ast, options)
  console.log(code.render)
  
  //抛出
  return { 
    ast, 
    render: code.render,
    staticRenderFns: code.staticRenderFns
  }
})
复制代码

createCompilerCreator()接受一个函数参数，createCompiler用以创建编译器，返回值是compile以及compileToFunctions。

export function createCompilerCreator (baseCompile: Function): Function {
  return function createCompiler (baseOptions: CompilerOptions) {
    function compile (
      template: string,//模板
      options?: CompilerOptions // 编译配置
    ): CompiledResult {
    
    // 将finalOptions的隐式原型__proto__指向baseOptions对象
      const finalOptions = Object.create(baseOptions) 
      const errors = []
      const tips = []
      
      finalOptions.warn = (msg, tip) => {
        (tip ? tips : errors).push(msg)
      }
      
      // 如果导入了配置就将配置进行合并  
      if (options) {
        // 合并分支模块
        if (options.modules) {
          finalOptions.modules =
            (baseOptions.modules || []).concat(options.modules)
        }
        // 合并自定义指令
        if (options.directives) {
          finalOptions.directives = extend(
            Object.create(baseOptions.directives || null),
            options.directives
          )
        }
        // 合并其他配置
        for (const key in options) {
          if (key !== 'modules' && key !== 'directives') {
            finalOptions[key] = options[key]
          }
        }
      }
      // 将传入的函数执行，传入模板和配置项,得到编译结果
      const compiled = baseCompile(template, finalOptions)
      if (process.env.NODE_ENV !== 'production') {
        errors.push.apply(errors, detectErrors(compiled.ast))
      }
      compiled.errors = errors
      compiled.tips = tips
      return compiled
    }
    
    return {
      compile,
      compileToFunctions: createCompileToFunctionFn(compile)
    }
  }
}
复制代码

最后在compile()层级执行完毕后，将抛出编译函数

compile是一个编译器，它会将传入的template转换成对应的AST树、renderFn以及staticRenderFns函数

compileToFunctions,通过执行createCompileToFunctionFn(compile)得到，createCompileToFunctionFn()是带缓存的编译器，同时staticRenderFns以及renderFn会被转换成Funtion对象。最终将编译

不同平台有一些不同的options，所以createCompiler会根据平台区分传入一个baseOptions，会与compile本身传入的options进行合并得到最终的finalOptions。

export function createCompileToFunctionFn (compile: Function): Function {
  // 声明缓存器
  const cache = Object.create(null)

  return function compileToFunctions (
    template: string,
    options?: CompilerOptions,
    vm?: Component
  ): CompiledFunctionResult {
    // 合并配置
    options = extend({}, options)
    const warn = options.warn || baseWarn
    delete options.warn
    //开发环境下尝试检测CSP，类似于用户浏览器设置，需要放宽限制否则无法进行编译，一般情况下可以忽略
    if (process.env.NODE_ENV !== 'production') {
      // detect possible CSP restriction
      try {
        new Function('return 1')
      } catch (e) {
        if (e.toString().match(/unsafe-eval|CSP/)) {
          warn(
            'It seems you are using the standalone build of Vue.js in an ' +
            'environment with Content Security Policy that prohibits unsafe-eval. ' +
            'The template compiler cannot work in this environment. Consider ' +
            'relaxing the policy to allow unsafe-eval or pre-compiling your ' +
            'templates into render functions.'
          )
        }
      }
    }
    //有缓存的时候优先读取缓存的结果，并且返回 ，
    const key = options.delimiters
      ? String(options.delimiters) + template
      : template
    if (cache[key]) {
      return cache[key]
    }

    // 没有缓存结果则直接编译 
    const compiled = compile(template, options)

    // 检查编译错误/提示 
    if (process.env.NODE_ENV !== 'production') {
      if (compiled.errors && compiled.errors.length) {
        warn(
          `Error compiling template:\n\n${template}\n\n` +
          compiled.errors.map(e => `- ${e}`).join('\n') + '\n',
          vm
        )
      }
      if (compiled.tips && compiled.tips.length) {
        compiled.tips.forEach(msg => tip(msg, vm))
      }
    }

    // 将代码转换成功能 
    const res = {}
    const fnGenErrors = []
    // 将render转换成Funtion对象
    res.render = createFunction(compiled.render, fnGenErrors)
    // 将staticRenderFns全部转化成Funtion对象
    res.staticRenderFns = compiled.staticRenderFns.map(code => {
      return createFunction(code, fnGenErrors)
    })

    //检查函数生成错误。只在编译器本身存在错误时才会发生,作者主要用于codegen开发使用
    if (process.env.NODE_ENV !== 'production') {
      if ((!compiled.errors || !compiled.errors.length) && fnGenErrors.length) {
        warn(
          `Failed to generate render function:\n\n` +
          fnGenErrors.map(({ err, code }) => `${err.toString()} in\n\n${code}\n`).join('\n'),
          vm
        )
      }
    }
    //最后存放在缓存中，下一次用可以进行读取
    return (cache[key] = res)
  }
}
复制代码

这里有一点很有意思，

const cache = Object.create(null)

为什么不直接const cache = {}呢？我们感受下

最直观的感受就是隐式原型__proto__在null上面没有，首先 const cache = {}会继承 Object.prototype上所有的原型方法。而null不会，另一个使用 Object.create(null)的理由是，使用 for..in循环的时候会遍历对象原型链上的属性，使用 Object.create(null)就不必再对属性进行检查了，当然，我们也可以直接使用Object.keys[]。除非你想你需要一个非常干净且高度可定制的对象当作数据字典或者想节省 hasOwnProperty的一些性能损失。

HTML转RenderFn

我们先写点代码

"app">

  
复制代码

我们先看下他的AST语法树,

可能你看的有点头晕，没事，我们无需关心这个，抽象，能让你看懂了还叫抽象？ 我们再看下render函数

with(this){return _c('div',{on:{"click":function($event){changeName()}}},[_c('span',[_v(_s(name))]),_v(" "),_c('ul',_l((like),function(item,index){return _c('li',{key:index},[_v(_s(item))])}))])}
复制代码

为了方便大家看清楚结构，费会劲手动格式化以下

with(this) {
      return _c('div', 
                {
                  on: {
                    "click": function ($event) {
                      changeName()
                    }
                  }
                }, 
                [
                  _c('span', [ _v(_s(name)) ]), 
                  _v(" "), 
                  _c('ul', 
                      _l( (like), function (item, index) {
                      return _c('li', 
                                  {
                                    key: index
                                  }, 
                                  [
                                    _v( _s(item) )
                                  ]
                                )
                    })
                  )
                ]
              )
    }
复制代码

可能有些人想着更看不懂，没事，这个逻辑可以看懂的。

_c(
    '标签名',
    {
        on:{//绑定
            属性1:值,
            属性2:值,
            ...
        }
    },
    [//子节点
       _c(
            '标签名',
            {
                on:{//绑定
                    子属性1:值,
                    子属性2:值,
                    ...
                }
            },
            [
                //子标签...
            ]
        }
    ]
)

复制代码

将renderFn编译Vnode

由于使用的with(this)语法，函数内有所变量都依赖于this变量，_c等同与this._c等同与vm._c，我们打印下vm._c

在JavaScript语言精粹一书中提到，尽量不要在你的函数内使用with()语法,它可能会让你的应用程序无法调试。但是尤雨溪这么使用，使用闭包将其封装在了函数内，无需担心外泄。

ƒ (a, b, c, d) { return createElement(vm, a, b, c, d, false); }

/src/core/instance/render.js定义该方法
// 将 createElement 函数绑定到这个实例上以便在其中获得renderFn上下文。
vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
复制代码

指向createElement()函数，它又指向_createElement()，该函数定义在/src/core/vdom/create-element.js。最终返回的是一个Vnode。该函数定义可以在本文目录里跳转查看 其他的函数我们可以在 /rc/core/instance/render-helper/index.js里找到相关定义

export function installRenderHelpers (target: any) {
  target._o = markOnce   // v-once静态组件
  target._n = toNumber   // 判断是否数字，先parse再isNAN
  target._s = toString   // 需解析的文本，之前在parser阶段已经有所修饰
  target._l = renderList //  v-for节点
  target._t = renderSlot // slot节点
  target._q = looseEqual //  检测两个变量是否相等
  target._i = looseIndexOf // 检测数组中是否包含与目标变量相等的项
  target._m = renderStatic // 渲染静态内容
  target._f = resolveFilter // filters处理
  target._k = checkKeyCodes // 从config配置中检查eventKeyCode是否存在
  target._b = bindObjectProps // 合并v-bind指令到VNode中
  target._v = createTextVNode  // 创建文本节点
  target._e = createEmptyVNode // 注释节点
  target._u = resolveScopedSlots // 处理ScopedSlots
  target._g = bindObjectListeners // 处理事件绑定
}
复制代码

createElement

var SIMPLE_NORMALIZE = 1;
var ALWAYS_NORMALIZE = 2;

function createElement (
  context,
  tag,
  data,
  children,
  normalizationType,
  alwaysNormalize
) {
  // 兼容不传data的情况
  if (Array.isArray(data) || isPrimitive(data)) {
    normalizationType = children;
    children = data;
    data = undefined;
  }
  // 如果alwaysNormalize是true
  // 那么normalizationType应该设置为常量ALWAYS_NORMALIZE的值
  if (isTrue(alwaysNormalize)) {
    normalizationType = ALWAYS_NORMALIZE;
  }
   // 调用_createElement创建虚拟节点
  return _createElement(context, tag, data, children, normalizationType)
}

function _createElement (
  context,
  tag,
  data,
  children,
  normalizationType
) {
   /*
    * 如果存在data.__ob__，说明data是被Observer观察的数据
    * 不能用作虚拟节点的data
    * 需要抛出警告，并返回一个空节点
    * 
    * 被监控的data不能被用作vnode渲染的数据的原因是：data在vnode渲染过程中可能会被改变，这样会触发监控，导致不符合预期的操作
    * 
    */
  if (isDef(data) && isDef((data).__ob__)) {
    "development" !== 'production' && warn(
      "Avoid using observed data object as vnode data: " + (JSON.stringify(data)) + "\n" +
      'Always create fresh vnode data objects in each render!',
      context
    );
    return createEmptyVNode()
  }
  // 当组件的is属性被设置为一个false的值
  if (isDef(data) && isDef(data.is)) {
    tag = data.is;
  }
  // Vue将不会知道要把这个组件渲染成什么,所以渲染一个空节点
  if (!tag) {
    return createEmptyVNode()
  }
  // 如果key是原始值，就警告key不能是原始值，必须string或者是number类型的值
  if ("development" !== 'production' &&
    isDef(data) && isDef(data.key) && !isPrimitive(data.key)
  ) {
    {
      warn(
        'Avoid using non-primitive value as key, ' +
        'use string/number value instead.',
        context
      );
    }
  }
    // 作用域插槽
    // 如果子元素是数组并且第一个是renderFn，就将其转移到scopedSlots
  if (Array.isArray(children) &&
    typeof children[0] === 'function'
  ) {
    data = data || {};
    data.scopedSlots = { default: children[0] };
    children.length = 0;
  }
  // 根据normalizationType的值，选择不同的处理方法
  if (normalizationType === ALWAYS_NORMALIZE) {
    children = normalizeChildren(children);
  } else if (normalizationType === SIMPLE_NORMALIZE) {
    children = simpleNormalizeChildren(children);
  }
  var vnode, ns;
  //如果标签名是string类型
  if (typeof tag === 'string') {
    var Ctor;
    // 取到如果当前有自己的vnode和命名空间 或者 获取标签名的命名空间
    ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag);
    // 判断是否为保留标签
    if (config.isReservedTag(tag)) {
       // 如果是保留标签,就创建一个这样的vnode
      vnode = new VNode(
        config.parsePlatformTagName(tag), data, children,
        undefined, undefined, context
      );// 如果不是保留标签，那么我们将尝试从vm实例的components上查找是否有这个标签的定义，自定义组件
    } else if (isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
        //  如果找到了这个标签的定义，就以此创建虚拟组件节点
      vnode = createComponent(Ctor, data, context, children, tag);
    } else {
       // 保底方案，正常创建一个vnode
      // unknown or unlisted namespaced elements
      // check at runtime because it may get assigned a namespace when its
      // parent normalizes children
      vnode = new VNode(
        tag, data, children,
        undefined, undefined, context
      );
    }
  } else {
    // direct component options / constructor
    // 当tag不是字符串的时候，就是组件的构造类，直接创建
    vnode = createComponent(tag, data, context, children);
  }
  // 如果vnode是数组，直接返回。
  if (Array.isArray(vnode)) {
    return vnode
              //如果有vnode
  } else if (isDef(vnode)) {
     // 如果有namespace，就应用下namespace，然后返回vnode
    if (isDef(ns)) { applyNS(vnode, ns); }
    // 如果定义了数据，就将其深度遍历，针对于class或者是style
    if (isDef(data)) { registerDeepBindings(data); }
    return vnode
  } else {
    //保底创建空VNode
    return createEmptyVNode()
  }
}
复制代码

流程图看下

new Vue

找到src/core/instance/index.js

创建Vue函数，并且检测当前是不是开发环境，如果Vue不是通过new实例化的将警告。然后初始化 this._init(options)。为什么(this instanceof Vue)这一句可以判断是否使用了new操作符？

已new来调用构造函数会经历4个步骤：

  • 创建一个新对象；
  • 将构造函数的作用域赋给新对象（因此this 就指向了这个新对象）；
  • 执行构造函数中的代码（为这个新对象添加属性）；
  • 返回新对象。 而instanceof用来检测Vue构造函数的prototype是否存在于this的原型链上，换句话说，如果使用new实例化的时候，this就指向了这个新创建的对象，这时this instanceof Vue这句话的意思就是判断新创建的对象是否是Vue类型的，也就相当于判断新实例对象的constructor是否是Vue构造函数。

未完待续...持续更新

你可能感兴趣的:(javascript,runtime,json)

  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • docker igotyback eureka云原生
    Docker容器的文件系统是隔离的，但是可以通过挂载卷（Volumes）或绑定挂载（BindMounts）将宿主机的文件系统目录映射到容器内部。要查看Docker容器的映射路径，可以使用以下方法：查看容器配置：使用dockerinspect命令可以查看容器的详细配置信息，包括挂载的卷。例如：bashdockerinspect在输出的JSON格式中，查找"Mounts"部分，这里会列出所有的挂载信息
  • 在Ubuntu中编译含有JSON的文件出现报错 芝麻糊76 Linuxkill_buglinuxubuntujson
    在ubuntu中进行JSON相关学习的时候，我发现了一些小问题，决定与大家进行分享，减少踩坑时候出现不必要的时间耗费截取部分含有JSON部分的代码进行展示char*str="{\"title\":\"JSONExample\",\"author\":{\"name\":\"JohnDoe\",\"age\":35,\"isVerified\":true},\"tags\":[\"json\",\"
  • Xinference如何注册自定义模型 玩人工智能的辣条哥 人工智能AI大模型Xinference
    环境：Xinference问题描述：Xinference如何注册自定义模型解决方案：1.写个model_config.json，内容如下{"version":1,"context_length":2048,"model_name":"custom-llama-3","model_lang":["en","ch"],"model_ability":["generate","chat"],"model
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
  • 更改npm镜像源为淘宝镜像 骆小骆 基于node.js
    npm常用指令后缀*最近复习了一下node.js整理了一下跟node.js相关的指令后缀*--save、-S参数意思是把模块的版本信息保存到dependencies（生产环境依赖）中，即你的package.json文件的dependencies字段中；–--save-dev、-D参数意思是把模块版本信息保存到devDependencies（开发环境依赖）中，即你的package.json文件的de
  • COCO 格式的数据集转化为 YOLO 格式的数据集 QYQY77 YOLOpython
    """--json_path输入的json文件路径--save_path保存的文件夹名字，默认为当前目录下的labels。"""importosimportjsonfromtqdmimporttqdmimportargparseparser=argparse.ArgumentParser()parser.add_argument('--json_path',default='./instances
  • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
    在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
  • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
    切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
  • golang获取用户输入的几种方式 余生逆风飞翔 golang开发语言后端
    一、定义结构体typeUserInfostruct{Namestring`json:"name"`Ageint`json:"age"`Addstring`json:"add"`}typeReturnDatastruct{Messagestring`json:"message"`Statusstring`json:"status"`DataUserInfo`json:"data"`}二、get请求的
  • 高性能javascript--算法和流程控制 海淀萌狗
    -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
  • spring mvc @RequestBody String类型参数 zoyation spring-mvcspringmvc
    通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • JavaScript中秋快乐！ Q_w7742 javascript开发语言ecmascript
    我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
  • Nginx从入门到实践(三) 听你讲故事啊
    动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
  • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
  • 前端知识点 ZhangTao_zata 前端javascriptcss
    下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
  • 【JS】前端文件读取FileReader操作总结 程序员-张师傅 前端前端javascript开发语言
    前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi
  • UI 自动化的页面对象管理神器 PO-Manager TesterHome
    原文由alex发表于TesterHome社区网站，点击原文链接可于作者直接交流。做UI自动化的同学都知道，UI自动化一个难点就是页面元素的变化，让自动化维护成为一个痛点。在此，为了减轻这个痛点，我在基于Page-Object模式的基础上开发了页面对象维护的工具。该工具为vscode的一个插件，可以通过vscode插件市场搜索PO-Manager来下载安装本文中的页面对象库文件基于json.一个元素
  • webstorm报错TypeError: this.cliEngine is not a constructor Blue_Color
    点击Details在控制台会显示报错的位置TypeError:this.cliEngineisnotaconstructoratESLintPlugin.invokeESLint(/Applications/RubyMine.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js:97:
  • 创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端ui服务器
    前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
  • 了解 UNPKG：前端开发者的包管理利器 小于负无穷 前端javascripttypescriptcsshtml5node.js
    在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n
  • 基于Python执行lua脚本 xu-jssy Python自动化脚本pythonlua自动化rpa
    一、依赖安装pipinstalllupa二、源码将lua文件存放在base_path路径，将lua文件名称（不包含后缀名）传递给lua_runner函数即可importmultiprocessingimportlupa#lua文件存放位置base_path='D:\\test\\lua'classLuaFuncion:#创建Lua运行时环境lua=lupa.LuaRuntime(unpack_re
  • python的request请求401_Python模拟HTTPS请求返回HTTP 401 unauthorized错误 weixin_39599372
    Python模拟HTTPS请求返回HTTP401unauthorized错误开始是使用的httplib模块，代码如下：header={"Content-type":"application/json","Accept":"*/*"}params={‘source‘:‘en‘,‘target‘:‘es‘,‘text‘:match.group(1)}data=urllib.urlencode(para
  • shp转geojson、kml转geojson 是乔木 地图javascript前端
    导入效果：用到的npm库pnpmaddshpjs//或者npmishpjs5.0.2pnpmaddjszip//或者npmijszip版本3.10.1pnpmadd@tmcw/togeojson//或者npmi@tmcw/togeojson版本5.8.1创建方法用来区分导入的文件1.这里只是做了一个文件的区分其中的kmlToGeoJson和readShp、dealZip具体方法会写明//处理文件e
  • 2019-05-29 vue-router的两种模式的区别 Kason晨
    1、大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容优点:良好的交互体验,用户不需要刷新页面,页面显示流畅,良好的前后端工作分离模式,减轻服务器压力,缺点:不利于SEO,初次加载耗时比较多2、hash模式vue-router默认的是hash
  • github中多个平台共存 jackyrong github
    在个人电脑上，如何分别链接比如oschina,github等库呢，一般教程之列的，默认 ssh链接一个托管的而已，下面讲解如何放两个文件 1） 设置用户名和邮件地址 $ git config --global user.name "xx" $ git config --global user.email "[email protected]"
  • ip地址与整数的相互转换(javascript) alxw4616 JavaScript
    //IP转成整型 function ip2int(ip){ var num = 0; ip = ip.split("."); num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[3]); n
  • 读书笔记-jquey+数据库+css chengxuyuancsdn htmljqueryoracle
    1、grouping ,group by rollup, GROUP BY GROUPING SETS区别 2、$("#totalTable tbody>tr td:nth-child(" + i + ")").css({"width":tdWidth, "margin":"0px", &q
  • javaSE javaEE javaME == API下载 Array_06 java
    oracle下载各种API文档： http://www.oracle.com/technetwork/java/embedded/javame/embed-me/documentation/javame-embedded-apis-2181154.html JavaSE文档： http://docs.oracle.com/javase/8/docs/api/ JavaEE文档： ht
  • shiro入门学习 cugfy javaWeb框架
    声明本文只适合初学者，本人也是刚接触而已，经过一段时间的研究小有收获，特来分享下希望和大家互相交流学习。 首先配置我们的web.xml代码如下，固定格式，记死就成 <filter>         <filter-name>shiroFilter</filter-name> &nbs
  • Array添加删除方法 357029540 js
         刚才做项目前台删除数组的固定下标值时，删除得不是很完整，所以在网上查了下，发现一个不错的方法，也提供给需要的同学。 //给数组添加删除             Array.prototype.del = function(n){
  • navigation bar 更改颜色 张亚雄 IO
    今天郁闷了一下午，就因为objective-c默认语言是英文，我写的中文全是一些乱七八糟的样子，到不是乱码，但是，前两个自字是粗体，后两个字正常体，这可郁闷死我了，问了问大牛，人家告诉我说更改一下字体就好啦，比如改成黑体，哇塞，茅塞顿开。       翻书看，发现，书上有介绍怎么更改表格中文字字体的，代码如下    
  • unicode转换成中文 adminjun unicode编码转换
      在Java程序中总会出现\u6b22\u8fce\u63d0\u4ea4\u5fae\u535a\u641c\u7d22\u4f7f\u7528\u53cd\u9988\uff0c\u8bf7\u76f4\u63a5这个的字符，这是unicode编码，使用时有时候不会自动转换成中文就需要自己转换了使用下面的方法转换一下即可。 /** * unicode 转换成 中文
  • 一站式 Java Web 框架 firefly aijuans Java Web
    Firefly是一个高性能一站式Web框架。 涵盖了web开发的主要技术栈。 包含Template engine、IOC、MVC framework、HTTP Server、Common tools、Log、Json parser等模块。 firefly-2.0_07修复了模版压缩对javascript单行注释的影响，并新增了自定义错误页面功能。 更新日志： 增加自定义系统错误页面功能
  • 设计模式——单例模式 ayaoxinchao 设计模式
    定义          Java中单例模式定义：“一个类有且仅有一个实例，并且自行实例化向整个系统提供。”   分析          从定义中可以看出单例的要点有三个：一是某个类只能有一个实例；二是必须自行创建这个实例；三是必须自行向系统提供这个实例。   &nb
  • Javascript 多浏览器兼容性问题及解决方案 BigBird2012 JavaScript
    不论是网站应用还是学习js,大家很注重ie与firefox等浏览器的兼容性问题，毕竟这两中浏览器是占了绝大多数。 一、document.formName.item(”itemName”) 问题 问题说明：IE下，可以使用 document.formName.item(”itemName”) 或 document.formName.elements ["elementName&quo
  • JUnit-4.11使用报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing错误 bijian1013 junit4.11单元测试
            下载了最新的JUnit版本，是4.11，结果尝试使用发现总是报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing这样的错误，上网查了一下，一般的解决方案是，换一个低一点的版本就好了。还有人说，是缺少hamcrest的包。去官网看了一下，如下发现：    
  • [Zookeeper学习笔记之二]Zookeeper部署脚本 bit1129 zookeeper
    Zookeeper伪分布式安装脚本(此脚本在一台机器上创建Zookeeper三个进程，即创建具有三个节点的Zookeeper集群。这个脚本和zookeeper的tar包放在同一个目录下，脚本中指定的名字是zookeeper的3.4.6版本，需要根据实际情况修改)：   #!/bin/bash #!!!Change the name!!! #The zookeepe
  • 【Spark八十】Spark RDD API二 bit1129 spark
    coGroup package spark.examples.rddapi import org.apache.spark.{SparkConf, SparkContext} import org.apache.spark.SparkContext._ object CoGroupTest_05 { def main(args: Array[String]) { v
  • Linux中编译apache服务器modules文件夹缺少模块(.so)的问题 ronin47 modules
    在modules目录中只有httpd.exp，那些so文件呢？ 我尝试在fedora core 3中安装apache 2. 当我解压了apache 2.0.54后使用configure工具并且加入了 --enable-so 或者 --enable-modules=so (两个我都试过了) 去make并且make install了。我希望在/apache2/modules/目录里有各种模块，
  • Java基础-克隆 BrokenDreams java基础
            Java中怎么拷贝一个对象呢？可以通过调用这个对象类型的构造器构造一个新对象，然后将要拷贝对象的属性设置到新对象里面。Java中也有另一种不通过构造器来拷贝对象的方式，这种方式称为 克隆。         Java提供了java.lang.
  • 读《研磨设计模式》-代码笔记-适配器模式-Adapter bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ package design.pattern; /* * 适配器模式解决的主要问题是，现有的方法接口与客户要求的方法接口不一致 * 可以这样想，我们要写这样一个类（Adapter）: * 1.这个类要符合客户的要求 ---> 那显然要
  • HDR图像PS教程集锦&心得 cherishLC PS
    HDR是指高动态范围的图像，主要原理为提高图像的局部对比度。 软件有photomatix和nik hdr efex。 一、教程 叶明在知乎上的回答： http://www.zhihu.com/question/27418267/answer/37317792 大意是修完后直方图最好是等值直方图，方法是HDR软件调一遍，再结合不透明度和蒙版细调。 二、心得 1、去除阴影部分的
  • maven-3.3.3 mvn archetype 列表 crabdave ArcheType
    maven-3.3.3 mvn archetype 列表 可以参考最新的：http://repo1.maven.org/maven2/archetype-catalog.xml   [INFO] Scanning for projects... [INFO]                
  • linux shell 中文件编码查看及转换方法 daizj shell中文乱码vim文件编码
    一、查看文件编码。     在打开文件的时候输入:set fileencoding     即可显示文件编码格式。 二、文件编码转换     1、在Vim中直接进行转换文件编码,比如将一个文件转换成utf-8格式       &
  • MySQL--binlog日志恢复数据 dcj3sjt126com binlog
    恢复数据的重要命令如下 mysql> flush logs; 默认的日志是mysql-bin.000001，现在刷新了重新开启一个就多了一个mysql-bin.000002                  
  • 数据库中数据表数据迁移方法 dcj3sjt126com sql
    刚开始想想好像挺麻烦的，后来找到一种方法了，就SQL中的 INSERT 语句，不过内容是现从另外的表中查出来的，其实就是 MySQL中INSERT INTO SELECT的使用   下面看看如何使用   语法：MySQL中INSERT INTO SELECT的使用 1. 语法介绍       有三张表a、b、c，现在需要从表b
  • Java反转字符串 dyy_gusi java反转字符串
           前几天看见一篇文章，说使用Java能用几种方式反转一个字符串。首先要明白什么叫反转字符串，就是将一个字符串到过来啦，比如"倒过来念的是小狗"反转过来就是”狗小是的念来过倒“。接下来就把自己能想到的所有方式记录下来了。 1、第一个念头就是直接使用String类的反转方法，对不起，这样是不行的，因为Stri
  • UI设计中我们为什么需要设计动效 gcq511120594 UIlinux
    随着国际大品牌苹果和谷歌的引领，最近越来越多的国内公司开始关注动效设计了，越来越多的团队已经意识到动效在产品用户体验中的重要性了，更多的UI设计师们也开始投身动效设计领域。 但是说到底，我们到底为什么需要动效设计？或者说我们到底需要什么样的动效？做动效设计也有段时间了，于是尝试用一些案例，从产品本身出发来说说我所思考的动效设计。 一、加强体验舒适度 嗯，就是让用户更加爽更加爽的用
  • JBOSS服务部署端口冲突问题 HogwartsRow java应用服务器jbossserverEJB3
    服务端口冲突问题的解决方法，一般修改如下三个文件中的部分端口就可以了。   1、jboss5/server/default/conf/bindingservice.beans/META-INF/bindings-jboss-beans.xml   2、./server/default/deploy/jbossweb.sar/server.xml   3、.
  • 第三章 Redis/SSDB+Twemproxy安装与使用 jinnianshilongnian ssdbreidstwemproxy
    目前对于互联网公司不使用Redis的很少，Redis不仅仅可以作为key-value缓存，而且提供了丰富的数据结果如set、list、map等，可以实现很多复杂的功能；但是Redis本身主要用作内存缓存，不适合做持久化存储，因此目前有如SSDB、ARDB等，还有如京东的JIMDB，它们都支持Redis协议，可以支持Redis客户端直接访问；而这些持久化存储大多数使用了如LevelDB、RocksD
  • ZooKeeper原理及使用 liyonghui160com
               ZooKeeper是Hadoop Ecosystem中非常重要的组件，它的主要功能是为分布式系统提供一致性协调(Coordination)服务，与之对应的Google的类似服务叫Chubby。今天这篇文章分为三个部分来介绍ZooKeeper，第一部分介绍ZooKeeper的基本原理，第二部分介绍ZooKeeper
  • 程序员解决问题的60个策略 pda158 框架工作单元测试
    根本的指导方针 1. 首先写代码的时候最好不要有缺陷。最好的修复方法就是让 bug 胎死腹中。 良好的单元测试 强制数据库约束 使用输入验证框架 避免未实现的“else”条件 在应用到主程序之前知道如何在孤立的情况下使用   日志 2. print 语句。往往额外输出个一两行将有助于隔离问题。 3. 切换至详细的日志记录。详细的日
  • Create the Google Play Account sillycat Google
    Create the Google Play Account Having a Google account, pay 25$, then you get your google developer account. References: http://developer.android.com/distribute/googleplay/start.html https://p
  • JSP三大指令 vikingwei jsp
    JSP三大指令   一个jsp页面中，可以有0~N个指令的定义！ 1. page --> 最复杂：<%@page language="java" info="xxx"...%>   * pageEncoding和contentType：     > pageEncoding：它
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他