vuejs全局运行机制

2019-06-14 admin

行文介绍

本文通过一张流程图来简要的分析vue的【初始化,模板编译,数据响应式,数据驱动视图】的流程。

目的是理清思路。想看详情的请看文末参考链接,或者查找其他文档,因为每一块的内容都是很多的。

流程图

搭配

本文可以搭配我写的 从new Vue()看源码流程 食用。这篇文章主要是从源码来梳理流程。

流程分析

  1. 初始化以及挂载init, mount
  2. 在进行模板编译compile,将template编译为渲染函数render function
  3. 执行render function生成Virtual DOM, render function => VNode tree
  4. 再进行响应式依赖收集,render function => getter, setter => Watcher.update => patch。以及使用队列进行异步更新的策略。
  5. 通过diff算法后进行patch更新视图

问题

问题来源

有这个问题是因为受这篇神文的影响剖析Vue原理&实现双向绑定MVVM。它这里面是精确收集的watcher,数据更新时直接更新指定的dom内容,非常高效。但是vue源码中并没有类似的实现。

数据变化时是【触发精确watcher,直接更新指定DOM】,还是【触发render watcher, 然后走patch流程】?

答案是【触发render watcher, 然后走patch流程】。

而且在源码中打断点,也可以发现,当改变一个data时是会触发render watcher的。

vue中有三种watcher

  1. render Watcher
  2. computed Watcher
  3. watch Watcher

不信的,请vue源码中搜索 new Watcher即可发现只有三处。(目前vue@2.6.10, 以后的版本不敢保证)

参考链接

https://www.kancloud.cn/hanxu…

[转载]原文链接:https://segmentfault.com/a/1190000019473075

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-67242.html

文章标题:vuejs全局运行机制

相关文章
深入解读JavaScript中的Hoisting机制
hoisting机制 javascript的变量声明具有hoisting机制,JavaScript引擎在执行的时候,会把所有变量的声明都提升到当前作用域的最前面。 先看一段代码 var v = "hello"; (fun...
2017-03-29
详解vuelidate 对于vueJs2.0的验证解决方案
介绍 在后端项目里 比如我们的Laravel框架 对于表单验证有自己的一套validation机制 他将验证集成在FormRequest 我们只需要在我们的方法中依赖注入我们自己实例化后的验证类 当然也可以直接去在方法里去验证表单数据 而在...
2017-03-13
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
本文实例讲述了js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法。分享给大家供大家参考。具体分析如下: 问题描述: 网站中使用了一个js插件,设置innerHTML时,在IE8下报错“未知运行时错误”: <div...
2017-03-22
nuxt scss 全局变量设置问题 nuxt-sass-resources-loader
因为百度搜不到,所以写下这篇文章 答案:https://www.npmjs.com/package… 作为非菜鸟,遇到这问题我很快就想到改webpack配置,在nuxt.conifg.js里,然而始终不行,最终放弃了自己的探索和百度的解决方...
2018-06-13
译文:JS事件循环机制(event loop)之宏任务、微任务
原文标题:《Tasks, microtasks, queues and schedules》 这是一篇谷歌大神文章,写得非常精彩。译者想借这次翻译深入学习一下,由于水平有限,英文好的同学建议直接阅读原文。 原文地址:Tasks, micro...
2018-05-20
详解VueJs异步动态加载块
首先定义组件为异步加载 define(['jquery','vue'],function($,Vue){ Vue.component('comp1',function(res...
2017-03-13
Vue 的异常处理机制
最近需要在业务中加一个全局的 filter,filter 会对输入进行验证,用于进行前端监控。其中一个要处理的问题,就是验证失败后如何发送异常日志,这个过程中顺便了解了一下 vue 的异常处理机制。 <a id=“more”>&...
2018-07-05
Vuejs 组件——props数据传递的实例代码
本篇资料来于官方文档:http://cn.vuejs.org/guide/components.html#Props 本文是在官方文档的基础上,更加细致的说明,代码更多更全。 简单来说,更适合新手阅读 props数据传递 ①组件实例的作用域...
2017-03-13
vuejs2.0运用原生JavaScript实现简单的拖拽元素功能示例
整理文档,搜刮出一个vuejs2.0运用原生js实现简单的拖拽元素功能示例,留作笔记。 <!DOCTYPE html> <html> <head> <meta name="viewport...
2017-03-15
javascript异步处理工作机制详解
从基础的层面来讲,理解JavaScript的定时器是如何工作的是非常重要的。计时器的执行常常和我们的直观想象不同,那是因为JavaScript引擎是单线程的。我们先来认识一下下面三个函数是如何控制计时器的。 var id = setTime...
2017-03-22
回到顶部