Vue.js源码分析
文章平均质量分 82
poppy.xu
一个努力让自己输出内容的前端呀
展开
-
那些Vue面试常问的原理问题(看一眼不亏)
请简述 Vue 首次渲染的过程。Vue首次渲染的时候先去调用vm._init()方法,然后去执行两个实例方法vm.$mount,这两个$mount在不同的地方定义,一个作用是将模板编译成render函数,一个是渲染模板vm.$mount/platforms/web/entry-runtime-with-compiler.js中定义核心作用是调用了compileToFunctions将模板编译成render函数vm.$mount在/platform/web/runtiem/index.j原创 2021-02-09 16:47:40 · 273 阅读 · 0 评论 -
Vue.js源码分析——模板编译过程
什么是抽象语法树,为什么使用抽象语法树什么是抽象语法树抽象语法树简称AST使用对象的形式描述树形的代码结构此处的抽象语法树是用来形容树形结构的HTML字符串为什么使用抽象语法树模板字符串转换成AST后,可以通过AST对模板进行优化标记模板中的静态内容,在patch的时候直接跳过静态内容在patch的过程中静态内容不需要对比和重新渲染...原创 2021-02-08 17:10:00 · 613 阅读 · 2 评论 -
解析snabbdom源码,理解virtual dom 实现
谈论Virtual DOM 之前,首先说下什么是DOM, 为什么需要虚拟DOM, 他们之间存在着什么样的关系什么是DOM文档对象模型 (DOM) 是HTML和XML文档的编程接口,将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合, 简单的说,DOM就是解析文档,将web页面和脚本或程序语言连接起来。更多内容可以参考MDN中对DOM的定义为什么需要虚拟DOMDOM主要问题是没有为创建动态UI而优化以前直接使用 DOM API 比较繁琐,然后有了 jQuery 等库来简化 DOM.原创 2021-02-04 15:53:40 · 242 阅读 · 2 评论 -
v-for时为什么要写 key ?
开发vue的朋友也都知道,一定要去写上key 不然通过vue-cli创建的项目会报出警告。也知道key是用来标记当前元素。这篇文章的目的是看一下源码,了解下我们为啥要去写这个key ?原创 2021-02-01 16:20:08 · 1124 阅读 · 1 评论 -
Vue.js源码分析04—— patchVnode和createElm
下面我们来分析下这两个函数,这两个函数我们就不贴源码了,主要讲下大概流程,感兴趣的可以根据地址去看对应源码patchVnode他的作用是对比新旧vnode, 也就是执行diff算法找到差异,更新到真实dom。函数定义在core/vdom/patch.js里面Created with Raphaël 2.2.0开始新节点没有文本新老节点是否都有子节点并且不相等对子节点,把子节点的差异更新到真实dom新节点有子节点,老节点没有子节点先清空老节点dom的文本内容清空,为当前dom节点加入子节点老节点有子节点原创 2021-02-01 13:39:27 · 351 阅读 · 0 评论 -
Vue.js源码分析03——虚拟DOM
前言之前写过博文Vue的首次渲染过程,在文章中提到,渲染dom的时候会调用vm.render()函数生成VNode,之后会调用vm._update(vnode, ...)来渲染页面。这篇文章我们从两个方面入手vm.render()是如何生成虚拟DOM的生成了虚拟dom后又进行了什么操作准备调试虚拟DOM的代码之前我们准备了首次渲染的调试代码,下面我们new Vue中补充一些参数,去观察Vue是如何进行关于虚拟DOM的操作<body> <div id="app">&原创 2021-02-01 11:43:07 · 105 阅读 · 0 评论 -
Vue.js源码分析——单步调试响应式
同样是Vue.js专栏系列,本文算是自己的查缺补漏,如果有不正确的地方欢迎大家指正,如果觉得在文中有所收获也欢迎大家点上宝贵的???? 写文不易,请多鼓励参考文章:图解Vue响应式原理准备代码这个文章很简单,主要是看下面的代码运行的过程<script src="../../dist/vue.js"></script><body> <div id="app"> {{ msg }} </div> <script&原创 2021-01-29 10:26:56 · 317 阅读 · 0 评论 -
Vue.js源码分析——页面首次渲染
最近在看Vue的响应式原理,记录下自己的总结,方便后续查看。如果这篇文章能给你一些思考,不要吝啬的帮我点上???? 哦要是写的有啥错误 ❌ ,也拜托大佬们不吝赐教Vue初始化下面是vue的初始化模板 , 这段代码很简单,最后会在页面输出 hello world,下面我们从new Vue 开始来分析下他是如何实现的<template> <div> {{ message }} </div></template><script原创 2021-01-27 14:38:55 · 3314 阅读 · 11 评论