vue中常见的原理

1 、双向数据绑定的原理

Object.defineProperty()方法有何作用
1、语法 Object.defineProperty(obj, prop, descriptor) 是一个函数，可以对对象里面的属性加一些控制。
2、定义：Object.defineProperty() 直接在一个对象上定义一个新属性，或者修改现有属性，并返回该对象。
3、参数
obj 要在其上定义属性的对象。
prop 要定义或修改的属性的名称。
descriptor 将被定义或修改的属性描述符。 可写，可枚举，可删除
4、返回值
返回被操作的对象，即返回 obj 参数
5、注意点
1）当把 configurable 值设置为 false 后,就不能修改任何属性了,包括自己本身这个属性
2）想用访问器属性模拟默认行为的话,必须得在里面新顶一个属性,不然的话会造成循环引用
3）可枚举属性对 for/in, Object.keys(), JSON.stringify(), Object.assign() 方法才生效(for/in 是对所有可枚举属性，而其他三种是对自身可枚举属性)
4、使用Object.defineProperty()定义的属性，默认是不可以被修改的，不可以被枚举，不可以被删除的。不使用是可以的。
5、当使用了getter或setter方法，不允许使用writable和value这两个属性

Writable、enumerable、configurable

我们已经知道实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监听器Observer，用来监听所有属性。如果属性发上变化了，就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理的。接着，我们还需要有一个指令解析器Compile，对每个节点元素进行扫描和解析，将相关指令对应初始化成一个订阅者Watcher，并替换模板数据或者绑定相应的函数，此时当订阅者Watcher接收到相应属性的变化，就会执行对应的更新函数，从而更新视图。因此接下去我们执行以下3个步骤，实现数据的双向绑定：

1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
2、实现一个指令解析器 Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
3、实现一个 Watcher，作为连接 Observer 和 Compile 的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图

二、pramise实现原理

1、promise是异步编程的一种解决方案，主要用于异步计算
2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
3、可以在对象之间传递和操作 promise，帮助我们处理队列
resolve 作用是，将 Promise 对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；
reject 作用是，将 Promise 对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
promise 有三个状态：
1、pending[待定]初始状态
2、fulfilled[实现]操作成功
3、rejected[被否决]操作失败
当 promise 状态发生改变，就会触发 then()里的响应函数处理后续步骤； promise 状态一经改变，不会再变。
Promise 对象的状态改变，只有两种可能： 从 pending 变为 fulfilled。
从 pending 变为 rejected。
这两种情况只要发生，状态就凝固了，不会再变了。

三、图片懒加载实现原理

一.什么是懒加载？

懒加载突出一个“懒”字，懒就是拖延迟的意思，所以“懒加载”说白了就是延迟加载，比如我们加载一个页面，这个页面很长很长，长到我们的浏览器可视区域装不下，那么懒加载就是优先加载可视区域的内容，其他部分等进入了可视区域在加载。
二.为什么要懒加载？

懒加载是一种网页性能优化的方式，它能极大的提升用户体验。就比如说图片，图片一直是影响网页性能的主要元凶，现在一张图片超过几兆已经是很经常的事了。如果每次进入页面就请求所有的图片资源，那么可能等图片加载

出来用户也早就走了。所以，我们需要懒加载，进入页面的时候，只请求可视区域的图片资源。
总结出来就两个点：

1.全部加载的话会影响用户体验
2.浪费用户的流量，有些用户并不像全部看完，全部加载会耗费大量流量。三.懒加载的实现原理？
由于网页中占用资源较多的一般是图片，所以我们一般实施懒加载都是对图
片资源而言的，所以这里的实现原理主要是针对图片。
大家都知道，一张图片就是一个标签，而图片的来源主要是 src 属性。浏览器是否发起亲求就是根据是否有 src 属性决定的。
既然这样，那么我们就要对标签的 src 属性下手了，在没进入可视区域的时候，我们先不给这个标签赋 src 属性，这样岂不是浏览器就不会发送请求了。
如何判断是否进入可视区域
元素距离顶部高度（elOffsetTop） >= dom滚动高度（docScrollTop）
并且元素距离顶部高度（elOffsetTop） < （dom滚动高度 + 视窗高度）