vue原理总结

一、vue2.0的双向绑定是如何实现的1、view和model相互实时更新的原理：Object。compile,watcher(1)observe是一个数据监听器，核心方法是Object.defineProperty(2)watcher是一个订阅者，处理Observer发来的update消息，执行update(3)compile是一个指令解析器，用于扫描并解析需要监控的节点和属性。3、这种模式的优点：不需要显式调用，可以直接通知变化和更新视图；hijackpropertysetters，不需要额外的diff操作4.Object.defineProperty的缺点（1）不能监控数组（2）不能监控整个Objects只能监控属性（3）不能监控属性的增删改查，只能监控变化设置的时候直接有参数，不需要单独存放变量。(4)newProxy()会返回一个新的对象，不会污染源对象。6.参考文档：https://blog.nowcoder.net/n/8517450fe4fd4220b4078f9c61e42ec1#:~:text=Vue%20%E6%95%B0%E6%8D%AE%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A,%E6%89%A7%E8%A1%8C%E5%AF%B9%E5%BA%94%E7%9A%84%E6%9B%B4%E6%96%B0%E5%87%BD%E6%95%B0%E3%80%82二、不更新数据的问题1、更新原则：读取数据时收集依赖，读取时通知依赖赋值更新。2.对象有一个defineProperty方法。getter和setter只监听属性的读取和赋值，并没有检测新增属性和删除的属性，所以特意提供了$set和$delete来实现3.array，没有defineProperty方法。没有setter，原来的方法push、pop、shift、unshift、splice、sort、reserve通过get修改和新的数组方法拦截器实现监听，修改数组下标对数组的操作不会检测到，所以$特意提供了Set和$delete实现4、$set(target,key,value)和$delete(target,propertyName/index)方法原理（1）判断target是undefined、null还是primitivetype，或者vue实例，或者vue实例的根数据对象（2）如果target是一个数组，通过调用拼接操作index来更新数据（3）如果target是一个对象，并且是响应式的，调用defineReactive来操作数据（4）更新数据后通知依赖更新3.computed和watch及方法1、computed（1）原创设计：为了让模板中的逻辑操作更简单（2）适用于数据复用的场景或复杂且耗时的计算；依赖其他数据的场景（3）读缓存，如果依赖不变，则不需要重新计算。（根据dirtyflag判断）2.watch是对数据的监听回调。3、computed和watch的区别是一样的：都会观察页面上的数据变化。;(2)watch比较适合异步操作和数据变化时开销大的操作。4.computed和methods的区别Computed依赖于缓存，你可以定义getters和setters，但是methods不能。监控hashchange的实施。(2)有点，兼容性好，ie8支持(3)缺点：看起来很奇怪3.历史：(1)h5新加入的。允许开发者直接修改前端路由，无需重新触发请求页面(2)实现原理：监听popstate事件。可以监听用户点击浏览器的前进后退事件或者手动调用go、back、forward事件；它无法监听pushState和replaceState事件。（3）为了避免浏览器刷新时出现404页面，需要在服务器端配置兼容性。(4)如果浏览器不支持，则降级为hash模式*通过vue.use插件机制和vue.mixin将store在beforeCreate和destroyed生命周期中混合。五、vuex解决了哪些问题1、vuex解决了vue项目中的数据状态管理问题2、它是一种组件通信的方式。3.原理：创建单个状态树，包括state、mutation、action、getter、module。4.视图（调度）动作（提交）突变（突变）状态（渲染）view5。通过vue的data和computed，state变成responsive。6.通过vue.use插件机制和vue.mixin，存储在beforeCreate生命周期中混入。6.nextTick是如何实现的1.功能：延迟回调，直到下一个DOM更新周期执行完2.原因:VUE更新DOM时是异步的。Vue检测到数据变化后，不会立即更新DOM，而是会开启一个事件队列，并在同一时间循环中缓冲所有数据变化，并在下一个tick更新DOM。3、js的运行机制：js是单线程的，基于事件循环，有宏任务和微任务。4、内部原理：（1）能力检测：Promise.then（微）、MutationObserve（微）、setImmediate（微）、setTimeout（宏）（2）将回调函数推入回调队列，锁上Yistep锁，以及执行回调。七、keep-alive内置组件和LRU算法（queue）1.本身不会渲染成DOM，也没有常规的