vue核心——MVVM、虚拟dom、diff算法

最新推荐文章于 2024-04-12 16:13:44 发布
最新推荐文章于 2024-04-12 16:13:44 发布
阅读量1.2k 收藏 7
点赞数 2
分类专栏： # 前端面试题目汇总 文章标签： vue.js 算法 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yunxiu988622/article/details/121694532
版权

1、MVVM

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2、双向绑定（v-model）（发布者订阅者模式）

① 原理

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

②具体实现

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

③ Object.defineProperty()

在这里插入图片描述

3、虚拟dom

vue核心之虚拟DOM(vdom)

是这样：

  • 如果没有虚拟dom的话， 一次操作中有十次更新dom节点的操作，就要去真实的的dom中更改十次，有虚拟dom，把十次更改都先沾到虚拟dom上，然后一次更改
  • 在把十次虚拟dom改变的时候，并不是直接把整个虚拟dom树上的dom都更新一遍，而是根据diff只更改那十个节点，然后再去操作对应真实dom中的那十个节点

① 定义

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

② 为什么要用虚拟dom

在这里插入图片描述
在这里插入图片描述

③ 进一步改善虚拟dom——Diff算法

Vue中的Diff算法

1）为什么使用diff算法

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

2）虚拟dom中的新旧节点

在这里插入图片描述
在这里插入图片描述

3）diff算法具体实现过程

结合代码的具体更新过程
在这里插入图片描述
在这里插入图片描述

秀秀的奇妙旅行
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue常用的一些方法
panpan2316872469的博客
01-14 2086
vue中数组的相关应用 一：v-for中的key属性 作用： 如果是index作为key，在中间插入新节点，则后面的位置都变了，都会重新更新节点 如果加入key，每一个都是唯一的，在中间插入新节点，只会更新中间的节点 好处： 为了更高效地更新虚拟dom 二：计算总和(js) reduce方法的使用 let arr=[1,2,3,4] arr=arr.reduce(function(pre, current){ return pre+current }) // 1+2+3+4 三：计算属性 1.计算
MVVM模型，虚拟DOM和diff算法
weixin_44212870的博客
03-09 337
1.MVVM是前端开发领域当中非常流行的开发思想。（一种架构模式）目前前端的大部分主流框架都实现了这个MVVM思想，例如Vue,React等2.虽然Vue没有完全遵循MVVM模型，但是Vue的设计也受到了它的启发。Vue框架基本上也是符合MVVM思想的 3.MVVM模型当中尝到了Model和View进行了分离，为什么要分离？
vue基础_diff 算法
Henry_ID的博客
07-12 441
diff 算法对比动图 从pathnode往下看diff算法执行过程 Vue生命周期流程图（含diff算法）
vue核心diff算法简介
weixin_42965828的博客
04-19 387
一.diff算法的事件复杂度 两个树的完全的diff算法是一个事件复杂度为O(n3) ,Vue进行了优化O(n3) 复杂度的问题转换成O(n)复杂度的问题(只比较同级不考虑跨级问题),因为在前端操作dom的时候,不会把当前元素作为上一级或下一级元素,很少会跨越层级地移动dom元素,常见的都是同级比较,所以Virtual Dom只会对同一级的元素进行对比. 二.vue中diff算法的原理 在数据发生变化,vue是先根据真实dom生成virtual dom,当virtual dom 某个节点的数据改变后会生成一
vue2 原理【详解】MVVM、响应式、模板编译、虚拟节点 vDom、diff 算法
最新发布
朝阳39的博客
04-12 761
vue 的更新过程，是一种异步渲染，即并不是每一点 data 的改变都会立马触发视图更新， 而是会汇总 data 的修改，再一次性更新视图，这样可以减少 DOM 的操作次数，提高性能。vue 文件中支持指令、插值、JS 表达式，还能实现判断、循环，大大便捷了开发，但无法在浏览器中渲染，需要先将其转换成 JS 代码才行，这个转换的过程，即模板编译。vue 的响应式机制是在vue 实例初始化时建立的，即 data 函数中定义的变量，在页面初始化后，都具有响应式。1000 个节点，要计算1亿次，算法不可用！
Vue的diff算法详解和key作用(较详细)
01-20
在前端开发中，Vue.js是一个非常流行的MVVM框架，它的核心特性之一是使用虚拟DOM（Virtual DOM）来优化页面更新。为了理解Vue的diff算法，首先需要了解DOM（Document Object Model）的概念。 DOM是Web页面的结构...
vue mvvm数据响应实现
01-18
另一方面，框架会通过虚拟dom及diff算法提高页面性能。这其中需要数据优先最根本的思路就是实现数据响应式。so，本次来看下如何基于原生实现数据响应式。 vue中的数据响应 vue中会根据数据将数据通过大胡子语法及...
虚拟dom1
08-08
Diff算法是虚拟DOM的核心，用于找出两个虚拟DOM树之间的最小差异。它采用深度优先搜索策略，通过比较节点的key属性来决定是移动节点还是创建新的节点。主要分为三步：同层比较（Keyed Diff）、子树比较（Component ...
前端开源库-domdiff
08-30
`domdiff` 的核心是DOM diff算法，它借鉴了React等虚拟DOM库的思想，通过对比新旧两个DOM子树，找出最小的变更集，然后只执行必要的DOM操作。这个过程减少了对整个DOM树的遍历和操作，显著提升了性能。 ### 工作...
vue框架介绍的一些简介
04-04
虚拟DOM与Diff算法：Vue.js使用虚拟DOM以及优秀的Diff算法，尽量复用DOM节点，优化性能。 遵循MVVM模式：Vue.js中提供了MVVM数据绑定和一个可组合的组件系统，具有简单、灵活的API，可以实现响应式的数据绑定和可...
Vue的transition-group与Virtual Dom Diff算法的使用
01-19
开始 这次的题目看上去好像有点奇怪：把两个没有什么关联的名词放在了一起，正如大家所知道的，transition-group就是Vue的内置组件之一主要用在列表的动画上，但是会跟Virtual Dom Diff算法有什么特别的联系吗？答案明显是有的，所以接下来就是代码分解。 缘起 主要是最近对Vue的Virtual Dom Diff算法有点模糊了，然后顺手就打开了电脑准备温故知新；但是很快就留意到代码： // removeOnly is a special flag used only by <transition> // to ensure removed eleme
vue框架——详解vue的diff算法原理
qq_40556950的博客
05-29 1136
我的目标是写一个非常详细的关于diff的干货，所以本文有点长。也会用到大量的图片以及代码举例，目的让看这篇文章的朋友一定弄明白diff的边边角角。 先来了解几个点... 1. 当数据发生变化时，vue是怎么更新节点的？ 要知道渲染真实DOM的开销是很大的，比如有时候我们修改了某个数据，如果直接渲染到真实dom上会引起整个dom树的重绘和重排，有没有可能我们只更新我们修改的那一小块dom而不要更新整个dom呢？diff算法能够帮助我们。 我们先根据真实DOM生成一颗virtual DOM，当...
Mvvm----虚拟Dom树
Sycc的博客
02-15 194
Mvvm: model view viewModel mvvm设计模式：对前端代码的重新划分 一、旧的前端代码分为三部分： html：专门保存网页的内容和结构 css：专门为网页中的元素添加样式 js：专门为网页中的元素添加交互效果 问题： a.因为html和css都是静态语言，缺少标准的程序语言必须的要素 b.页面上所有的琐碎都要修改，都要依赖js来实现，导致js代码及其冗余，且重复大量劳动 二、新的mvvm将代码分为了3部分： 1.界面(view)：包括以前的html+css，还增强了html的功能 a
Vue常用的一些方法：
SunPeng的博客
02-24 1549
1、转字符串： （1）数组.toString(‘间隔符号’) （2）数组.join(‘间隔符号’) （3）{…数组} 2、截取字符串： let index =item.njqx.index(" ")//空格 item.njqx=item.njqx.substring(0,index)//从0位开始截取到空格
vue的常见理论知识
liurong1028的博客
02-20 412
1. active-class是哪个组件的属性？嵌套路由怎么定义？ active-class是vue-router模块的router-link组件。需要在 VueRouter 的参数中使用 children 配置，这样就可以很好的实现路由嵌套。 2. 怎么定义vue-router的动态路由？怎么获取传过来的动态参数？ 一个参数 对path属性加上/:参数名 获取: $route.para...
MVVM原理（建立虚拟DOM树）
WF帆少的博客
02-22 692
1.创建虚拟节点的类，这里使用es6语法糖。 export default class VNode { constructor( // 节点类型和标签类型的区别是什么？ tag, // 标签类型，DIV，SPAN，INPUT，#text ele, // 对应的真实节点 children, // 当前节点下的子节点 ...
MVVM的概念，原理，及实现
m0_51578916的博客
09-02 979
1，mvvm的概念 model-view-viewmodel,通过数据劫持+发布者订阅模式来实现 在model中定义数据修改和操作的业务逻辑 在view表示ui组件，负责将数据模型转化为ui展示出来，做的是数据绑定声明，指令的声明，事件绑定的声明 viewmodel是一个同步view和model的对象，view和model没有直接的联系，通过viewmodel来进行交互的 2.MVVM和MVC的优点 a.MVVM是数据驱动，MVC是dom驱动 b.MVVM优点在于不用操作大量的DOM，不用关.
vue 的简介 MVVM和虚拟DOM
qq_37152533的博客
10-13 1263
1、渐进式框架Vue Vue是构建用户界面的渐进式框架，只关注视图层（view）； 2、vue中两个核心点 响应的数据绑定(双向绑定):当数据发生改变，自动更新视图。内部利用Object.definedProperty中的setter/getter代理数据，监控对数据的操作。由于Object.definedProperty不兼容IE8浏览器，所以Vue不兼容IE8及以下浏览器。 组合的视图组件：...
Vue入门3、MVVM+虚拟DOM+绑定+基本语法+如何在console里调用vue组件属性+双向绑定
舌尖上的蛋炒饭的博客
08-12 812
Vue入门3、MVVM+虚拟DOM+绑定+如何在console里调用vue组件属性+双向绑定 MVVM 我们直接从网上找来一张图 需要注意的是，ViewModel所封装出来的数据模型包括视图和行为两部分，而Model层的数据模型只包含状态，比如： 页面的这一块展示什么，那一块展示什么，这些都是与试视图状态（展示） 试图家在进来时发生什么，点击这一块发生什么，这一块滚动时发生什么，这些都属于视图行为（交互） 视图行为和状态都封装在了ViewModel里，这样的封装使得ViewModel可以完整的去描述Vie
前端Vue常见面试题大全
10-27
手动整理了前端Vue常见面试题

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值