【总结】:MVVM
模式简化了界面与业务的依赖,解决了数据频繁更新。在 MVVM
中,利用双向绑定技术,使得 Model
变化时,ViewModel
会自动更新,而 ViewModel
变化时,View
也会自动更新。
SPA
应用仅在页面首次初始化时加载相应的 HTML
,CSS
,JS
。一旦完成加载,就不会因为用户的操作而进行页面的重新加载,取而代之的是利用前端路由实现内容的变换。
【优点】:
-
前后端职责更好的分离,架构清晰
-
用户体验好,服务器相对压力小
【缺点】:
-
首次加载耗时久
-
SEO
难优化
通过数据模型(普通的 JS
对象)来驱动视图的更新,就是响应式。
以实例的 data
选项为例,当我们把一个普通的 JS
对象传入 Vue
实例作为 data
时,Vue
将遍历这个对象的所有属性,然后通过 Object.defineProperty
(vue 2.x)或者 Proxy
(vue 3.x)定义属性的 getter
和 setter
,从而让 Vue
能够追踪当这些属性访问与修改。具体是怎么追踪的呢?每个组件实例都对应一个 watcher
实例,它会在组件渲染的过程中把接触过的数据记录为依赖,这个过程也称为依赖收集,然后当依赖的 setter
触发时,就会通知 watcher
,从而使他们关联的组件重新渲染。
Vue
双向数据绑定是指:数据变化更新视图,视图变化更新数据,例如输入框输入内容变化时,data
中对应的数据同步变化,data
中绑定的数据变化时,输入框的内容同步变化。
Vue
主要通过4个部分来实现双向数据绑定:
-
监听器
Observer
:对数据对象进行遍历,利用Object.defineProperty()
在属性上都加上getter
和setter
,从而监听数据的变化。 -
解析器
Compile
:解析模板指令,将模板中的变量都替换成数据,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变化就会调用更新函数进行更新。 -
订阅者
Watcher
:订阅者是监听器和解析器之间通信的桥梁,主要任务是订阅监听器中的属性值变化的消息,当收到属性值变化的消息时,触发解析器中对应的更新函数。 -
订阅器
Dep
:订阅器采用发布-订阅设计模式,用来收集订阅者Watcher
对监听器Observer
和 订阅者Watcher
进行统一管理。
【Q5】为什么 Vue
要采用异步渲染?异步渲染是如何实现的?
如果不采用异步渲染,那么每次更新数据都会进行重新渲染,这会对性能大打折扣,异步渲染是提高性能的手段之一。
只要监听到数据变化,Vue
将开启一个队列,并缓冲在同一个事件循环中发生的所有数据变更。如果同一个 watcher
被多次触发,只会被推入到队列中一次。然后,在下一个事件循环中,Vue
刷新队列并执行实际工作。Vue
内部对异步队列常使用原生的 Promise.then
、MutationObserver
和 setImmediate
。如果环境不支持,则采用 setTimeout(fun,0)
。
在 Vue
官方中,提供了7个操作数组的方法:
-
push()
-
pop()
-
shift()
-
unshift()
-
splice()
-
sort()
-
reverse()
用于 “响应式” 的操作数组,也就是说,通过以上7个方法改变数组的元素,这会导致 data
中的数据变化,从而导致视图发生变化。除此以外,还可以通过 “新数组” 替换 “旧数组” 的方式来触发视图层的改变。但是,千万不能通过索引直接改变一个数组,这样不会引起视图层的改变,只是单纯的改变了数据。还有,不能通过修改数组长度来删除元素。
Vue
将 data
中的数组进行了原型链重写,指向了自己所定义的数组原型方法(也就是说上面的7个方法是Vue
重写过的),从而实现了通过这些方法改变数组就可以通知视图层更新的效果。
Vue
实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载DOM
、渲染、更新、卸载等一些列过程,就是生命周期。
小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助,可以添加下面V无偿领取!(备注:前端)
)]
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助,可以添加下面V无偿领取!(备注:前端)
[外链图片转存中…(img-4yMAuRqN-1710904233444)]