关键词:
模板转换成视图的过程
在底层实现中Vue会将模板编译成渲染函数,当然我们也可以不写模板,直接写渲染函数,以获得更好的控制。
渲染函数:渲染函数是用来生成Virtual DOM的;
VNode虚拟节点:vnode可以理解成dom节点的描述对象,它描述了应该怎样去创建真实的DOM节点;
patch(patching算法):虚拟DOM最核心的部分,它可以将vnode渲染成真实的DOM。这个过程是对比新旧虚拟节点之间有哪些不同,然后根据对比结果找出需要更新的的节点进行更新。其实际作用是在现有DOM上进行修改来实现更新视图的目的;
Virtual DOM
Virtual DOM用JS对象来描述dom的节点(VNode),这个对象至少包含标签名( tag)、属性(attrs)和子元素对象( children)这三个属性。它是对真实 DOM 的抽象,最终可以通过一系列操作把这个对象转化为真实的dom。
具体步骤为
Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存
Virtual DOM的作用
虚拟DOM的最终目标是将虚拟节点渲染到视图上,但是如果直接使用虚拟节点覆盖旧节点的话,会有很多不必要的DOM操作。例如,一个ul标签下很多个li标签,其中只有一个li有变化,这种情况下如果使用新的ul去替代旧的ul,因为这些不必要的DOM操作而造成了性能上的浪费。
为了避免不必要的DOM操作,虚拟DOM在虚拟节点映射到视图的过程中,将虚拟节点与上一次渲染视图所使用的旧虚拟节点(oldVnode)做对比,找出真正需要更新的节点来进行DOM操作,从而避免操作其他无需改动的DOM。
其实虚拟DOM在Vue.js主要做了两件事:
提供与真实DOM节点所对应的虚拟节点vnode;
将虚拟节点vnode和旧虚拟节点oldVnode进行对比,然后更新视图;
Virtual DOM的diff算法
递归地进行同级vnode的diff,最终实现整个DOM树的更新
步骤:
用 JavaScript 对象结构表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树,插到文档当中;
当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异;
把所记录的差异应用到所构建的真正的DOM树上,视图就更新了;
Virtual DOM的优点
跨平台的优势:由于 Virtual DOM 是以 JavaScript 对象为基础而不依赖真实平台环境,所以使它具有了跨平台的能力,比如说浏览器平台、Weex、Node 等;
提高效率:操作 DOM 慢,js运行效率高,所以将DOM对比操作放在JS层可以提高效率;
提高渲染性能:通过patch 的核心----diff 算法,找出本次DOM需要更新的节点来更新,其他的不更新。比如修改某个model 100次,从1加到100,那么有了Virtual DOM的缓存之后,只会把最后一次修改patch到view上。
nextTick
this.$nextTick(()=> // 操作。。。 )
1 Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中;
2 当项目中你想在改变DOM元素的数据后基于新的dom做点什么,对新DOM一系列的js操作都需要放进Vue.nextTick()的回调函数中;
3 在使用某个第三方插件时 ,希望在vue生成的某些dom动态发生变化时重新应用该插件,也会用到该方法;
改变数据有时不更新
1 vue实现数据双向绑定有这么一个过程:当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用Object.defineProperty() 把这些属性全部转为getter/setter。每个组件实例都有相应的 watcher 实例对象,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter 被调用时,会通知 watcher 重新计算,从而致使它关联的组件得以更新。实现数据data变化更新视图view。
var vm = new Vue( data: a:1; // vm.a 是响应的 ) vm.b = 2; // vm.b 是非响应的
2 没有更新dom是因为改变数据之后Object.defineproperty()的set方法没有被触发,即没有监测到数据更新。以下几种情况会出现这个问题:
当你利用索引直接设置数组的一项时,例如:this.items[indexOfItem] = newValue;
当你修改数组的长度时,例如:this.items.length = newLength;
数组的push,splice等方法也不会更新dom;
对象里边的修改:
data () return student: name: ‘‘ , teach:["李磊"] // 以下操作不会触发视图更新 this.student.name="XXX";
解决办法:
1 使用set:
this.$set(‘对象名‘, key, value); // 对象写法 this.$set(this.teach,0, “韩梅梅”); // 数组写法
2 使用deep
watch: student: handler:(n,o)=> //逻辑处理 , deep:true
3 改变原对象或数组的地址
this.obj = Object.assign(,this.obj,"sex","man");
Virtual DOM更新dom的机制
原文:https://www.cnblogs.com/fundebug/p/vue-virtual-dom.html
如何理解vue,virtualdom(代码片段)
Vue.js2.0窥探之VirtualDOM到底是什么?Vue.js2.0已经发布,并且在其中新添加如了一些新功能。其中一个功能就是“VirtualDOM”。 VirtualDOM是什么?在之前,React和Ember早就开始用虚拟DOM技术来提高页面更新的速度了。若想了解它是... 查看详情
virtualdom(虚拟dom)(代码片段)
文章目录什么是VirtualDOM为什么要使用VirtualDOM虚拟DOM的作用虚拟DOM库Snabbdom基本使用安装parcel配置scripts目录结构导入Snabbdom基本使用包含子节点Snabbdom中的模块模块的作用官方提供的模块模块的使用步骤模块代码演示Snabbdom源码解... 查看详情
为什使用虚拟dom(代码片段)
...m当说起vue和react时候,大家都不免会提到一个概念,就是VirtualDOM(虚拟Dom)。那么,这个虚拟Dom到底是个什么东西,为什么这两个伟大的框架都要使用呢。首先VirtualDOM是一个映射真实DOM的JavaScript对象,如果需要改变任何元素的... 查看详情
为什使用虚拟dom(代码片段)
...m当说起vue和react时候,大家都不免会提到一个概念,就是VirtualDOM(虚拟Dom)。那么,这个虚拟Dom到底是个什么东西,为什么这两个伟大的框架都要使用呢。首先VirtualDOM是一个映射真实DOM的JavaScript对象,如果需要改变任何元素的... 查看详情
vue虚拟dom原理
...拟dom进行diff,算出最小差异,然后再修改真实dom。vue的virtualdom的diff算法是基于snabbdom算法改造而来,与react的diff算法一样仅在同级的vnode间做diff,递归的进行同级vnode的diff,最终实现整个DOM树的更新。虚拟DOM的缺点:1.代码更... 查看详情
render学习(代码片段)
...示源代码中的一种结构。渲染函数:渲染函数是用来生成VirtualDOM的。Vue推荐使用模板来构建我们的应用界面,在底层实现中Vue会将模板编译成渲染函数,当然我们也可以不写模板,直接写渲染函数,以获得更好的控制(这部分... 查看详情
虚拟dom(virtualdom)
一、虚拟DOMVirtualDOM(虚拟DOM)不是真实的DOM对象,它是由普通的JS对象来描述DOM对象。真实DOM对象它的成员非常多,所以创建真实DOM的成本非常高。创建一个虚拟DOM(普通的JavaScript对象)的属性非常少,所以创建一个虚拟DOM的... 查看详情
虚拟dom(代码片段)
...DOM节点,结果仅仅是轻量级的JavaScript对象,我们称之为virtualDOM。虚拟DOM是React的一大亮点,具有batching(批处理)和高效的Diff算法。这让我们可以无需担心性能问题而”毫无顾忌”的随时“刷新”整个页面,由虚拟DOM来确保只对界... 查看详情
part3-2-2vue.js源码剖析-虚拟dom(代码片段)
什么是虚拟DOM虚拟DOM(VirtualDOM)是使用JavaScript对象来描述DOM,虚拟DOM的本质就是JavaScript对象,使用JavaScript对象来描述DOM的结构。应用的各种状态变化首先作用于虚拟DOM,最终映射到DOM。Vue.js中的虚拟DOM借鉴了Snabbdom... 查看详情
vue虚拟dom
...DOM,会产生一定的性能问题。这就是虚拟Dom的产生原因。VirtualDOM本质就是用一个原生的JS对象去描述一个DOM节点。是对真实DOM的一层抽象。(也就是源码中的VNode类,它定义在src/core/vdom/vnode.js中。)虚拟DOM的实现原理主要包括以下3... 查看详情
vue.js2.0更新之增加virtualdom讲解
VirtualDOM是什么?在之前,React和Ember早就开始用虚拟DOM技术来提高页面更新的速度了。若想了解它是如何工作的,就要先认清这几个概念:1.更新DOM是非常昂贵的操作当我们使用Javascript来修改我们的页面,浏览器已经做了一些工... 查看详情
如何实现一个virtualdom及源码分析
如何实现一个VirtualDOM及源码分析VirtualDOM算法 web页面有一个对应的DOM树,在传统开发页面时,每次页面需要被更新时,都需要手动操作DOM来进行更新,但是我们知道DOM操作对性能来说是非常不友好的,会影响页面的重排... 查看详情
virtualdom算法
...react.js javascript目录:1前言2对前端应用状态管理思考3VirtualDOM算法4算法实现4.1步骤一:用JS对象模拟DOM树4.2步骤二:比较两棵虚拟DOM树的差异4.3步骤三:把差异应用到真正的DOM树上5结语6References1前言本文会在教你怎么用300~400... 查看详情
[react]你知道virtualdom的工作原理吗?
[react]你知道VirtualDOM的工作原理吗?VirtualDOM是什么:虚拟DOM是真实DOM的javascript对象的映射VirtualDOM的工作原理:数据驱动视图更新这个过程中,首先会改变虚拟DOM对象,一个视图的更新周期,首先会简单新... 查看详情
react的虚拟dom
ReactJs的一大特点就是引进了虚拟dom(VirtualDOM)的概念。为什么我们需要VirtualDOM,VirtualDOM给我们带来了什么优势。首先我们要了解一下浏览器的工作流。当我们从一个服务拿到请求的html时,浏览器会怎么办?(1)创建DOM树一旦... 查看详情
vue虚拟dom和diff算法(代码片段)
...,他到底是个啥玩意儿呢?什么是虚拟DOM所谓的Virtualdom,也就是我们常说的虚拟节点,它是通过JS的Object对象模拟DOM中的节点,然后再通过特定的render方法将其渲染成真实的DOM的节点。为什么使用虚拟DOM既然... 查看详情
虚拟domvituraldomtree
提起VirtualDOM,总是给人一种高深莫测的感觉,大家都知道它比DOM快。那么VirtualDOM到底是何方神圣呢?在深入理解VirtualDOM之前,先让我们回顾一下DOM。一、什么DOM?所谓DOM,就是HTML、XML、XHTML的一种抽象描述,它会把这... 查看详情
深度剖析:如何实现一个virtualdom算法#13(代码片段)
...m/livoras/blog/issues/13目录:1前言2对前端应用状态管理思考3VirtualDOM算法4算法实现4.1步骤一:用JS对象模拟DOM树4.2步骤二:比较两棵虚拟DOM树的差异4.3步骤三:把差异应用到真正的DOM树上5结语6References1前言本文会在教你怎么用300~400... 查看详情