vue常见的算法有哪些（vue常用的方法）

今天给各位分享vue常见的算法有哪些的知识，其中也会对vue常用的方法进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、vue原理相关总结
• 2、你怎么理解vue中的diff算法？
• 3、Vue2.x和Vue3.x渲染器的diff算法

vue原理相关总结

一、vue2.0的双向绑定是怎么实现的

2、observer，compile，watcher

（1）observe是一个数据监听器，核心方法是Object.defineProperty

（3）compile是一个指令解析器，对需要监听的节点和属性进行扫描和解析。

3、此模式的优点：不需要显式调用，可以直接通知变化，更新视图；劫持了属性setter，不需要额外的diff操作

4、Object.defineProperty缺点

（1）不能监听数组

（2）不能监听整个对象，只能监听属性

（3）不能监听属性的增删，只能监听变化

5、3.0版本使用Proxy

（1）可以监听数组

（2）可直接监听整个对象，不用层层递归属性

（3）get和set时候直接有参数，不需要单独存储变量

（4）new Proxy()会返回一个新对象，不会污染源对象。

二、数据不更新的问题

1、更新的原理：在数据读取时收集依赖，在赋值时通知依赖更新。

2、object有defineProperty方法，通过getter，setter只监听了属性的读取和赋值，但是新增属性和删除属性没有检测，所以专门提供了$set和$delete来实现

3、array，没有defineProperty方法，没有setter，通过get和新建数组方法拦截器修改原生方法push,pop,shift,unshift,splice,sort,reserve来实现监听，而通过修改数组下标操作数组的不会被检测，所以专门提供了$set和$delete来实现

4、$set(target, key, value)和$delete(target, propertyName/index)方法原理

（1）判断target是否是undefined，null，或者原始类型,或者vue实例，或者vue实例的跟数据对象

（2）target为数组，则还是通过调用splice操作索引更新数据

（3）target为对象，且为响应式，则调用defineReactive操作数据

（4）更新完数据后通知依赖更新

三、computed和watch和methods

1、computed

（1）设计初衷：为了使模板中的逻辑运算更简单

（2）适用于数据被重复使用或者计算复杂费时的场景；依赖其他数据的场景

（3）读取缓存，依赖不变，则不需重新计算。（根据dirty标志判断）

2、watch是对数据的监听回调

3、computed和watch的区别

相同点：都会观察页面的数据变化

不同点：（1）computed是读取缓存，watch每次都要重新执行；

（2）watch更适合数据变化时的异步操作和开销较大的操作。

4、computed和methods的区别

computed依赖缓存，可以定义getter和setter，但是methods不行

四、vue-router的模式区别

1、abstract：非浏览器环境下使用

2、hash：

（1）默认。监听hashchange实现。

（2）有点，兼容性好，ie8支持

（3）缺点：看起来奇怪

3、history：

（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、view(dispatch)action(commit)mutation(mutate)state(render)view

5、通过vue的data和computed，让state变成响应式，

6、通过vue.use插件机制和vue.mixin将store在beforeCreate生命周期进行混入。

六、nextTick是怎么是实现的

1、作用：将回调延迟到下次DOM更新循环之后执行

2、原因：VUE在更新DOM时是异步的，vue检测到数据变化后，不会立即更新DOM，而是会开启一个事件队列，并缓冲同一时间循环中的所有数据变更，在下一次tick中，执行更新DOM。

3、js的运行机制：js是单线程的，基于事件循环，有宏任务和微任务。

4、内部原理：

（1）能力检测：Promise.then(微), MutationObserve(微)，setImmediate(微),setTimeout(宏)

（2）将回调函数推入回调队列，锁上易步锁，执行回调。

七、keep-alive内置组件和LRU算法（队列）

1、自身不会渲染成DOM，没有常规的 标签，是个函数组件，被他包裹的组件，切换时会被缓存在内存中，而不是销毁。

（1）可以有条件的缓存:include（匹配到的缓存）,exclude（匹配到的不缓存）,max(最多可以缓存多少组件实例)

2、原理：内部维护了this.cache（缓存的组件对象）和this.keys（this.cache中的key），运用LRU策略。

（1）命中了缓存的组件要调整组件key的顺序。

（2）缓存的组件数量如果超过this.max时，要删除第一个缓存组件。

（3）LRU(Least recently used，最近最少使用)：根据数据的 历史 访问记录来进行淘汰数据。“如果数据最近被访问过，那么将来被访问的几率也更高。”

3、生命周期钩子：activated和deactivated，被keep-alive包括的组件激活和停用时调用。先停用组件的deactivated，再激活组件的activated

你怎么理解vue中的diff算法？

diff算法是虚拟 DOM 的必然产物,通过新旧虚拟 DOM 对比,将变化的地方更新在真实 DOM 上,另外也需要 diff 高效的执行对比过程,从而降低时间复杂度

vue2中为了降低 watcher 力度,每个组件只有一个 watcher 与之对应,只有引入 diff 才能精确的找到发生变化的地方

diff 之所以发生变化,是引入组件数据的变化调用了 set 方法,导致 watcher能够监控到数据的变化,导致其触发 updateComponent 中 pathVnode方法,在 pathVnode 函数中对对比上一次渲染结果和新渲染结果.两个节比较的过程就是发生diff的过程.整个更新过程叫做 path 过程,也叫打补丁的过程

diff 过程整体遵从深度优先,同层比较的策略;两个节点之间比较会根据它们是否拥有子节点或者文本节点做不同的操作.比较两组节点是算法的重点.首先假设头尾节点相同做 4 次比较尝试,如果这 4 中方式都没有找到,就按照通用方式遍历查找.查找结束在按照情况处理剩下的节点;借助 key,通常可以精确的找到相同的节点,因此整个 path 过程是非常高效的

Vue2.x和Vue3.x渲染器的diff算法

简单来说，diff算法有以下过程

正常Diff两个树的时间复杂度是 O(n^3) ，但实际情况下我们很少会进行 跨层级的移动DOM ，所以Vue将Diff进行了优化，从 O(n^3) - O(n) ，只有当新旧children都为多个子节点时才需要用核心的Diff算法进行同层级比较。

Vue2的核心Diff算法采用了 双端比较 的算法，同时从新旧children的两端开始进行比较，借助key值找到可复用的节点，再进行相关操作。相比React的Diff算法，同样情况下可以减少移动节点次数，减少不必要的性能损耗，更加的优雅。

Vue3.x借鉴了 ivi 算法和 inferno 算法

在创建VNode时就确定其类型，以及在 mount/patch 的过程中采用 位运算 来判断一个VNode的类型，在这个基础之上再配合核心的Diff算法，使得性能上较Vue2.x有了提升。(实际的实现可以结合Vue3.x源码看。)

该算法中还运用了 动态规划 的思想求解最长递归子序列。

vue常见的算法有哪些的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vue常用的方法、vue常见的算法有哪些的信息别忘了在本站进行查找喔。