(七)不只是 huohuo 的 Vue 面试题

终于来到了框架部分,我们所熟悉的前端框架的底层都是 JS,所以我们更应该关注的是框架的思想原理及源码设计。基本的使用部分,推荐详看官方文档。因为时间和精力优先,这里暂时只给出文章整体脉络,后续慢慢补充完整。

如何理解前端渲染

把数据填充到HTML标签中:模板 + 数据 →前端渲染→静态HTML内容

more

如何理解响应式

Html5 中的响应式

屏幕尺寸的变化导致样式的变化

数据的响应式

数据的变化导致页面内容的变化

Vue 的响应式系统

  • 任何⼀个 Vue Component 都有⼀个与之对应的 Watcher 实例
  • Vue data 上的属性会被添加 getter 和 setter 属性
  • Vue Component render 函数被执⾏的时候, data 上会被 触碰(touch),即被,getter ⽅法会被调用此时 Vue 会去记录此 Vue component 所依赖的所有 data(这⼀过程被称为依赖收集)
  • data 被改动时(主要是用户操作) ,  即被 ,setter 方法会被调⽤ 此时 Vue 会去通知所有依赖于此 data 的组件去调用他们的 render 函数进⾏更新

谈谈双向数据绑定

当数据发生变化的时候,视图也就发生变化 ;当视图发生变化的时候,数据也会跟着同步变化

实现数据绑定的方法

  • 发布者-订阅者模式(backdone.js)
  • 脏值检查(angular.js)
  • 数据劫持(vue.js)

Vue 的数据双向绑定是如何实现的

数据劫持

理解:通过 Object.defineProperty 劫持对象的访问器

你对 MVVM 的理解

MVVM

构成:

  • Model(数据层):数据模型(获取数据的逻辑)
  • View(视图层):视图模板(Vue中指的是各种template)
  • ViewModel(控制层):视图适配器(Vue中对应的js,声明绑定的元素及绑定的数据)。暴露给 View 层需要的数据,并处理 View 层具体业务逻辑

优点:

  • 分离 View(视图)和 Model(模型),降低代码耦合,提⾼视图或者逻辑的重⽤性:比如 View 可以独⽴于 Model 变化和修改,⼀个 ViewModel 可以绑定在不同的 View 上,当View 变化的时候 Model 可以不变,当 Model变化 的时候View也可以不变。你也可以把⼀些视图逻辑放在⼀个ViewModel⾥⾯,让很多 View 重⽤这段视图逻辑
  • 提⾼可测试性:ViewModel 的存在可以帮助开发者更好地编写测试代码
  • ⾃动更新 Dom::利⽤双向绑定数据更新后视图⾃动更新开发者从繁琐的⼿动Dom中解放

缺点:

  • Bug很难被调试:因为使⽤双向绑定的模式,当你看到界⾯异常了,有可能是你 View 的代码有Bug,也可能是 Model 的代码有问题。数据绑定使得⼀个位置的 Bug 被快速传递到别的位置,要定位原始出问题的地⽅就变得不那么容易了。另外,数据绑定的声明是指令式地写在View 的模版当中的,这些内容是没办法去打断点 debug 
  • ⼀个⼤的模块中 Model 也会很⼤,虽然使⽤⽅便且保证了数据的⼀致性,但是如果⻓期持有不释放内存,就会造成内存的浪费
  • 对于⼤型的图形应⽤程序,视图状态较多,ViewModel 构建和维护的成本都会⽐较⾼

MVC

构成:

  • Model(数据层):程序需要操作的数据或信息(用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法)---- 数据保存
  • View(视图层):提供给用户的操作界面,是程序的外壳 ---- 用户界面
  • Controller(控制层):M和V之间的连接器,用于控制应用程序的流程,及页面的业务逻辑 ---- 业务逻辑

理解:

它的构成可以看做"外观"、"机制"和"功能/数据"这三层结构。实际运作便是视图层传送指令给控制层,控制层调用数据层对象方法完成业务逻辑,并把结果返回到视图层(V-C-M-V-V)

三层紧密联系(对外提供接口),又相互独立(内部变化不影响其它层)

  • 实现模块化
  • 变化不影响其它层,方便维护

MVVM 和 MVC 有什么不同

  • MVVM 实现了数据的双向绑定
  • MVVM 可维护性更高
  • MVC 某些时候性能更好
  • MVC 是后端分层开发概念,MVVM 是前端视图层的概念,主要关注于视图层分离

实现一个 MVVM(双向绑定)

简易MVVM实现已放入我的手写系列仓库

评论 3 您还未登录,请先 登录 后发表或查看评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页

打赏作者

huohuoit

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值