浅析vue的两项原理

作者:神秘网友 发布时间:2020-06-15 18:56:22

浅析vue的两项原理

浅析vue的两项原理

一.vue双向绑定原理

浅析vue的两项原理Vue.js-作者为中国人尤雨溪

vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时,Vue 将遍历它的属性,用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化。

浅析vue的两项原理数据双向绑定

vue的数据双向绑定 将MVVM作为数据绑定的入口,整合Observer,Compile和Watcher三者,通过Observer来监听自己的model的数据变化,通过Compile来解析编译模板指令(vue中是用来解析 {{}}),最终利用watcher搭起observer和Compile之间的通信桥梁,达到数据变化 —>视图更新;视图交互变化(input)—>数据model变更双向绑定效果。

js实现简单的双向绑定:

浅析vue的两项原理js实现简单的双向绑定

二.Virtual DOM

 

若想了解它是如何工作的,就要先认清这几个概念:

1.更新DOM是非常昂贵的操作。

当我们使用Javascript来修改我们的页面,浏览器已经做了一些工作,以找到DOM节点进行更改,例如:

浅析vue的两项原理在现代的应用中,DOM数量会上千万

所以因更新的时候产生的计算非常昂贵。琐碎且频繁的更新会使页面缓慢,同时这也是不可避免的。

2.我们可以用JavaScript对象来代替DOM节点。

DOM节点在HTML文档中的表现通常是这样的:

浅析vue的两项原理

DOM节点也可以表示为一个JavaScript对象,就像这样:

浅析vue的两项原理虚拟的DOM节点

3.更新虚拟节点, 并不昂贵。

浅析vue的两项原理

如果我们用一个虚拟DOM,而不是直接调用像.getElementById的方法,这样只操作JavaScript对象,这样是相当便宜的。

浅析vue的两项原理把更改的部分更新到真正的DOM

4.Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。这是什么意思呢?也就是说并不修改数据之后vue会立刻更新DOM,vue是异步更新DOM的,这里就需要了解js的事件循环机制,我在前面已经介绍过,如果不了解,可以去看看。vue是使用promise来更新DOM的。这也就是说我们在改变数据后并不能立刻获取到更新后的DOM。

浅析vue的两项原理

这里我们需要使用nextTick来获取到更新后节点,或者使用setTimeout(fn,0)也可以。

浅析vue的两项原理相关教程

  1. Vuex简单总结
  2. vue.js基础(5)
  3. vue3.0新特性初体验(一)
  4. linux系统:ptrace系统调用浅析
  5. vue 组件修改网页标题
  6. Nginx---React、Vue项目部署Nginx后,刷新页面出现404问题
  7. 浅析MySQL存储引擎序列属性
  8. vue面试二十问