谈谈你对 vue 的理解
vue 是一套用于构建用户界面的渐进式框架,vue 的核心库只关注视图层。vue 的渐进式表现在刚开始不会一股脑的把一些概念全抛给你,而是让你根据自己的需求来不断扩充。
vue是一个轻量级框架,大小只有几十kb,具有易用性、灵活性和高效性的特点。
vue 提供数据响应式、基于配置的组件系统以及大量的指令等,这些让开发者只需关心核心业务;
vue比较灵活,可以根据需要引入 vue-router、vuex、vue-cli 等工具;
vue 操作的是虚拟 DOM,采用 diff 算法更新 DOM,比传统的 DOM 操作更加的高效;
vue也有缺点:
不支持IE8及以下版本。
Vue.js 模板解析到渲染的过程:
模板解析:Vue会将模板解析为一个抽象语法树(AST),这个过程会解析模板中的指令、表达式等,并将它们转化为一个个的节点,每个节点包含了该节点的标签名、属性列表、指令、子节点等信息。解析过程可以通过 Vue.js 的编译器完成,也可以通过手动编写 render 函数来跳过这一步骤。
模板编译:主要是将抽象语法树(AST)转换为渲染函数。根据数据生成虚拟 DOM,并将虚拟 DOM 渲染到真实 DOM 上。渲染函数可以手动编写,也可以由 Vue.js 的编译器自动生成。
渲染和更新:将渲染函数执行的结果渲染到页面上。当组件的状态发生变化时,Vue会重新执行渲染函数,生成新的虚拟 DOM 树,并通过比较新旧虚拟 DOM 树的差异,最终将差异渲染到真实 DOM 上。
Vue 的双向数据绑定:
是一种数据流动的方式,它可以使数据的变化自动同步到视图,同时视图中的变化也可以自动地更新数据。
原理:
通过数据劫持结合发布者-订阅者模式来实现的。核心是通过Object.defineProperty()方法设置set和get函数来实现数据的劫持,在数据变化时发布消息给订阅者,触发相应的监听回调。
也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变。
具体实现步骤:
vue初始化时,会对data数据进行劫持监听,也就是监听器 Observe,用来监听所有属性。
如果有属性发生变化就告诉订阅者Watcher看是否需要更新。
因为订阅者Watcher有多个,所以需要一个消息订阅器 Dep 来专门收集这些订阅者,在监听器Observe和订阅者Watcher之间进行统一管理。
还需要有一个指令解析器 Compile ,对每个节点元素进行扫描解析,将相关的指令(如 v-model,v-on …)对应初始化成一个订阅者Watcher,并替换模板数据或者绑定相应函数,当订阅者Watcher接收到相应属性的变化通知,就会执行对应的更新函数,从而去更新视图。
vue初始化时,会对data数据进行劫持监听,也就是监听器 Observe,用来监听所有属性。
如果有属性发生变化就告诉订阅者Watcher看是否需要更新。
- 实现一个监听器Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者;
- 实现一个订阅者Watcher,每个Watcher都绑定一个更新函数,Watcher可以收到属性的变化通知并执行相应的函数,从而更新视图;
- 实现一个消息订阅器 Dep ,主要收集订阅者,当 Observe监听到发生变化,就通知Dep 再去通知Watcher去触发更新;
- 实现一个解析器Compile,可以扫描和解析每个节点的相关指令,若节点存在指令,则Compile初始化这类节点的模板数据(使其显示在视图上),以及初始化相应的订阅者。
v-model
在模板中使用双向绑定指令(例如 v-model)时,Vue 会在该指令所在的元素上注册一个事件监听器,该事件监听器会在用户输入时触发。
当用户输入时,事件监听器会调用该元素的 updateModelValue() 方法,该方法会将输入框的值赋给对应的 data 属性,并通知该属性的 Dep 对象。
Dep 对象会遍历其收集的所有观察者对象,并依次调用它们的 update() 方法,通知它们数据已经改变,需要更新视图。
观察者对象接收到数据改变的通知后,会触发其 update() 方法,该方法会重新渲染视图,使视图与最新的数据同步。
Vue 的响应式:
Vue 的响应式是通过 JavaScript 的 Object.defineProperty() 方法实现的。具体来说,Vue 将 data 对象中的每个属性都转化为 getter 和 setter,并且通过监听 getter 和 setter 的调用来实现响应式。当属性的值发生改变时,会自动地检测到变化并更新对应的视图。
当一个 Vue 实例被创建时,它会对 data 对象进行递归遍历,将每个属性都转化为 getter 和 setter,同时创建一个名为“依赖收集器”的对象。当访问属性时,getter 会被调用,并且会将“依赖收集器”中的当前 Watcher 对象加入到依赖列表中。当属性的值发生改变时,setter 会被调用,并且会遍历依赖列表,通知每个 Watcher 对象进行更新。
除了依赖收集器,Vue 还有一个名为“观察者”的对象。它负责实例化 Watcher 对象,并将 Watcher 对象加入到依赖收集器中。当一个组件被渲染时,Vue 会为这个组件创建一个“渲染 Watcher”,这个 Watcher 对象会监听组件中所使用的所有响应式数据。当组件中的响应式数据发生改变时,这个 Watcher 对象会触发组件的重新渲染。
双向数据绑定和响应式都是 Vue 中非常重要的概念,但是它们的区别在于前者是一种数据流动的方式,后者是实现数据绑定的机制。双向数据绑定依赖于响应式机制来实现,但是响应式机制本身并不一定需要双向数据绑定来使用。
Vue-router原理
更新视图而不重新请求页面,匹配不同的 url 路径,进行解析,然后动态的渲染出区域 html 内容。
vue-router两种方式:Hash模式和History模式
new Vue 时传入的router是为了给Vue实例注入 router,route 这两个属性,
$route 存储当前的路由规则信息,路径、参数等信息
$router 是提供一些操作路径的方法 push、replace、go 还能通过currentRoute拿到当前路由规则信息
对比:
两种方式都是,当路径法发生变化,不会向服务器发送请求,使用js监视路径的变化,根据不同的地址渲染不同的内容。
Hash模式:url里面有#,#后面是路由地址,原理实现是基于锚点 和 onhashchange事件
History模式:url里面没有#,原理实现是基于HTML5中History API,history.pushState(),history.replaceState(),
History需要服务器支持,因为History没有 # 号,所以当用户刷新页面的时候,浏览器还是会给服务器发送请求。为了避免出现这种情况,所以这个实现需要服务器的支持,把除了静态资源外所有路由都重定向到根页面,在nginx配置文件中进行修改。
Vuex原理
应用的核心是 store,里面包括
state: vuex的基本数据,用来存储变量。
getter:从基本数据(state)派生的数据,相当于store的计算属性;getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。
mutation:提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler) 。 回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数,提交载荷作为第二个参数。
action:可以包含任意异步操作,提交的是 mutation,而不是直接变更状态;
modules:模块化vuex,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,管理更为方便。
vuex的工作流程:
(1)通过dispatch去提交一个actions,
(2) actions接收到这个事件之后,在actions中可以执行一些异步|同步操作,根据不同的情况去分发给不同的mutations,
(3)actions通过commit去触发mutations,
(4)mutations去更新state数据,state更新之后,就会通知vue进行渲染
为什么Vuex要通过mutations修改state,而不能直接修改?
因为state是实时更新的,mutations无法进行异步操作,如果直接修改state的话是能够异步操作的,当你异步对state进行操作时,还没执行完,这时候如果state已经在其他地方被修改了,这样就会导致程序出问题。所以state要同步操作,通过mutations的方式限制了不允许异步。
另外我们还用到了devtools这个工具,如果直接修改state的话,它是没有办法跟踪的,而vue提供这个工具是为了帮助我们在多个界面都来修改state,它希望做一个跟踪,这时当某一个界面修改这个state修改错误它就可以跟踪到是哪里修改错了,再做相关的调试。更加方便。
谈谈你对 vue 的理解相关推荐
- 结合阿里云 FC 谈谈我对 FaaS 的理解
本文首发于政采云前端团队博客:结合阿里云 FC 谈谈我对 FaaS 的理解 https://www.zoo.team/article/my-understanding-of-faas 进入主题之前,先 ...
- 谈谈对APC的一点理解
谈谈对APC的一点理解 异步过程调用(APCs) 是NT异步处理体系结构中的一个基础部分,理解了它,对于了解NT怎样操作和执行几个核心的系统操作很有帮助. 1) APCs允许用户程序和系统元件在一个进 ...
- [vue] 有使用过vue吗?说说你对vue的理解
[vue] 有使用过vue吗?说说你对vue的理解 1.mvvm框架 2.数据驱动 3.SPA 4.渐进式 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起 ...
- 面试精讲之面试考点及大厂真题 - 分布式专栏 04 谈谈你对分布式的理解,为什么引入分布式?
04谈谈你对分布式的理解,为什么引入分布式? 引言 刚刚毕业第一份工作,没接触过分布式微服务相关的知识,后来换工作才了解到这些,面试官看了我简历里写了分布式相关,就开始揪住这个问题问,虽然一知半解地说 ...
- JVM面试1 :谈谈你对Java的理解
谈谈你对Java的理解 如何查看字节码? 使用 javap
- MVVM是什么?谈谈你对MVVM的理解?
MVVM是什么?谈谈你对MVVM的理解? 我的理解MVVM它就是一种前端开发的架构模式,作用就是为了让前端业务逻辑和HTML代码更加分离.它的核心思想就是把每个页面分成了M(Model数据模型).V( ...
- 分布式 - 谈谈你对分布式的理解,为什么引入分布式?
不啰嗦,我们直接开始! 划重点: 真正了解分布式系统的概念,日后工作中具有分布式系统设计思想. 能否在设计中对系统稳定性方面考虑周全. 能构建高 QPS 健壮的系统架构. 1.面试官:那谈谈你对分布式 ...
- 2021-08-06随记(vertical-align, 顶线、底线、中线、基线,vue原理理解)
vertical-align 父元素是inline或者是table-cel,如果是inline-block或者block则必须要设置line-height(和高度一样)子元素为inline或者inli ...
- 谈谈对数据治理的理解
谈谈对数据治理的理解 一.什么是数据治理?为什么要做数据治理? 1.数据标准 2.数据模型 3.元数据 4.主数据 5.数据质量管理 二.怎样做数据治理 一.什么是数据治理?为什么要做数据治理? 数据 ...
最新文章
- 面试官:缓存穿透、缓存雪崩和缓存击穿是什么?
- qt connect函数_Qt Inside信号和槽之connect
- mac上的mongodb安装与使用的踩坑记
- Android/Linux boot time分析优化
- 转:Apache2 httpd.conf 中文版
- solidworks分析视频教程-结构应力仿真有限元虚拟样机及流场分析
- Win10升级后出现的OEM分区处理
- 李笑来深夜宣布不做个人投资,背后有何深意?
- 计算机无法控制音频,系统之家win7系统电脑音量无法调节不能调节声音的解决方法...
- cur前缀_常用词根前缀
- Unity 生命周期
- 探求DVB+OTT商业模式,推动有线电视平台化运营
- Postman之Mock Servers虚拟服务器
- 修改LitJson支持iOS
- 中冠百年|年轻人收入低如何理财
- CRC校验码计算,以常用CRC-8为例
- Android - ReactNative Debug 技巧
- Revit版本对应的.NET框架版本
- 学建模的快速方法【快捷键】
- 阅读:朱自清《大学的路》