new Vue()

  _init()

    mergeOptions

   

$watch --> new Watch

   

vm._render  生成VNode

  create diff patch

vm._update  渲染VNode

  createElm

vue组件更新

  数据变化时,触发 渲染watcher的回调函数,进而执行组件的更新过程

  new Watcher

  updateComponent

    vm._update  vm._render()--> vnode

      vm.__patch__

  新旧节点不同

   创建新节点--> 更新占位符节点 --> 删除纠结点 

      

编译

  runtime+ compile

    Vue.prototype.$mount(没有render时重写)

      

Vue.js 技术揭秘(学习) vue流程的更多相关文章

  1. Vue.js 技术揭秘学习 (3) render

    Vue 的 _render 方法是实例的一个私有方法,它用来把实例渲染成一个虚拟 Node  ,返回的是一个VNode 在 Vue 的官方文档中介绍了 render 函数的第一个参数是 createE ...

  2. Vue.js 技术揭秘学习 (2) Vue 实例挂载的实现

    Vue 中我们是通过 $mount 实例方法去挂载 vm 的 $mount 方法实际上会去调用 mountComponent 方法,mountComponent 核心就是先实例化一个渲染Watcher ...

  3. Vue.js 技术揭秘学习 (1) new Vue 发生了什么

    Vue 初始化主要就干了几件事情,合并配置,初始化生命周期,初始化事件中心,初始化渲染,初始化 data.props.computed.watcher 等等.

  4. Vue.js 技术揭秘(学习) slot

    slot特性分发父组件的内容 作用域插槽:通过子组件的一些数据来决定父组件实现插槽

  5. Vue.js 技术揭秘(学习) 深入响应式原理 nextTick外传

    microTask  mutationObserve. promise.then macroTask setImmediate. messageChannnel.setTimeout.postMess ...

  6. Vue.js 第1章 Vue常用指令学习

    今日目标 能够写出第一个vue应用程序 能够接受为什么需要学vue 能够使用指令 能够通过指定完成简单的业务(增加删除查询) 能够理解mvvm 为什么要学习vue 企业需要 可以提高开发效率 实现vu ...

  7. Vue.js是什么,vue介绍

    Vue.js是什么,vue介绍 Vue.js 是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用. ...

  8. Vue.js系列(一):Vue项目创建详解

    引言 Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,并详细介绍使用vue-cli脚手架工具快速的构建Vu ...

  9. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

随机推荐

  1. Vue项目分环境打包的实现步骤

    转:https://blog.csdn.net/xinzi11243094/article/details/80521878 方法一:亲测真的有效 在项目开发中,我们的项目一般分为开发版.测试版.Pr ...

  2. Docker(3):Dockerfile配置详解

    FROM  : 指定base镜像 MAINTAINER :设置镜像的作者,可以是任意的字符串 COPY :将文件从build context 复制到镜像   COPY 支持两种形式:COPY src ...

  3. 实战申请Let's Encrypt永久免费SSL证书过程教程及常见问题

    最近需要https这里看到一份不错的博客,收录一下! Let's Encrypt作为一个公共且免费SSL的项目逐渐被广大用户传播和使用,是由Mozilla.Cisco.Akamai.IdenTrust ...

  4. 如何将Bitcoin比特币区块链数据导入关系数据库

    在接触了比特币和区块链后,我一直有一个想法,就是把所有比特币的区块链数据放入到关系数据库(比如SQL Server)中,然后当成一个数据仓库,做做比特币交易数据的各种分析.想法已经很久了,但是一直没有 ...

  5. java获取真实的IP地址工具类

    在实际项目中,有调用微信支付完成支付功能,在微信支付的请求参数中需要传递一个本机的ip地址,java代码运行环境目前为windows10以及centos7. 以下为获取ip地址工具类: package ...

  6. 炸弹人游戏开发系列(7):加入敌人,使用A*算法寻路

    前言 上文中我们实现了炸弹人与墙的碰撞检测,以及设置移动步长来解决发现的问题.本文会加入1个AI敌人,敌人使用A*算法追踪炸弹人. 本文目的 加入敌人,追踪炸弹人 本文主要内容 开发策略 加入敌人 实 ...

  7. Python--day03(变量、数据类型、运算符)

    day02主要内容回顾 1.语言的分类 -- 机器语言:直接编写0,1指令,直接能被硬件执行 -- 汇编语言:编写助记符(与指令的对应关系),找到对应的指令直接交给硬件执行 -- 高级语言:编写人能识 ...

  8. Jquery mobile动态生成ListView调用刷新方法报错

    错误:cannot call methods on listview prior to initialization... 示例: <div data-role="page" ...

  9. react-navigation 简介

    StackNavigator: 原理和浏览器相似但又有局限,浏览器的方式是开放性的,通过点击一个链接可以跳转到任何页面(push),点击浏览器后退按钮,返回到前一个页面(pop).StackNavig ...

  10. BZOJ4762 最小集合(动态规划+容斥原理)

    https://www.cnblogs.com/AwD-/p/6600650.html #include<iostream> #include<cstdio> #include ...