盒子
盒子
文章目录󰁋
  1. 一、说一下使用 jquery 和使用框架的区别
    1. 1.1 jQuery 实现 todo-list
    2. 1.2 vue 实现 todo-list
    3. 1.3 jQuery 和框架的区别
  2. 二、说一下对 MVVM 的理解
    1. 2.1 MVC
    2. 2.2 MVVM
    3. 2.3 关于 ViewModel
    4. 2.4 MVVM 框架的三大要素
  3. 三、vue 中如何实现响应式
    1. 3.1 什么是响应式
    2. 3.2 Object.defineProperty
    3. 3.3 模拟实现
  4. 四、vue 中如何解析模板
    1. 4.1 模板是什么
    2. 4.2 render 函数
    3. 4.3 render 函数与 vdom
  5. 五、vue 的整个实现流程
    1. 5.1 第一步:解析模板成 render 函数
    2. 5.2 第二步:响应式开始监听
    3. 5.3 第三步:首次渲染,显示页面,且绑定依赖
    4. 5.4 第四步:data 属性变化

前端面试之MVVM浅析

image.png

一、说一下使用 jquery 和使用框架的区别

1.1 jQuery 实现 todo-list

image.png

1.2 vue 实现 todo-list

image.png

1.3 jQuery 和框架的区别

  • 数据和视图的分离,解耦(开放封闭原则)
  • 以数据驱动视图,只关心数据变化,DOM 操作被封装

二、说一下对 MVVM 的理解

2.1 MVC

  • M - Model 数据
  • V - View 视图、界面
  • C - Controller 控制器、逻辑处理

image.png
image.png

2.2 MVVM

  • Model - 模型、数据
  • View - 视图、模板(视图和模型是分离的)
  • ViewModel - 连接 ModelView

image.png

2.3 关于 ViewModel

  • MVVM 不算是一种创新
  • 但其中的 ViewModel 确实一种创新
  • 真正结合前端场景应用的创建

image.png

image.png

2.4 MVVM 框架的三大要素

  • 响应式:vue如何监听到 data 的每个属性变化?
  • 模板引擎:vue 的模板如何被解析,指令如何处理?
  • 渲染:vue 的模板如何被渲染成 html ?以及渲染过程

三、vue 中如何实现响应式

3.1 什么是响应式

  • 修改 data 属性之后,vue 立刻监听到
  • data 属性被代理到 vm 上

image.png

3.2 Object.defineProperty

image.png

3.3 模拟实现

image.png

image.png

四、vue 中如何解析模板

4.1 模板是什么

  • 本质:字符串
  • 有逻辑,如 v-if v-for
  • html 格式很像,但有很大区别
  • 最终还要转换为 html 来显示

模板最终必须转换成 JS 代码,因为

  • 有逻辑(v-if v-for),必须用 JS才能实现
  • 转换为 html 渲染页面,必须用 JS 才能实现
  • 因此,模板最重要转换成一个 JS 函数(render 函数)

image.png

4.2 render 函数

  • 模板中所有信息都包含在了 render 函数中
  • thisvm
  • pricethis.pricevm.price,即 data 中的 price
  • _cthis._cvm._c

image.png

image.png
image.png

4.3 render 函数与 vdom

  • vm._c 其实就相当于 snabbdom中的 h 函数
  • render 函数执行之后,返回的是 vnode

image.png

image.png

  • updateComponent中实现了 vdompatch
  • 页面首次渲染执行 updateComponent
  • data 中每次修改属性,执行updateComponent

五、vue 的整个实现流程

  • 第一步:解析模板成 render 函数
  • 第二步:响应式开始监听
  • 第三步:首次渲染,显示页面,且绑定依赖
  • 第四步:data 属性变化,触发 rerender

image.png

5.1 第一步:解析模板成 render 函数

image.png

image.png
image.png
image.png

  • 模板中的所有信息都被 render函数包含
  • 模板中用到的 data 中的属性,都变成了 JS 变量
  • 模板中的v-model v-for v-on 都变成了 JS 逻辑
  • render 函数返回 vnode

5.2 第二步:响应式开始监听

  • Object.defineProperty
  • data 的属性代理到 vm

image.png

5.3 第三步:首次渲染,显示页面,且绑定依赖

  • 初次渲染,执行 updateComponent,执行 vm._render()
  • 执行 render 函数,会访问到 vm.list vm.title
  • 会被响应式的 get 方法监听到
  • 执行 updateComponent ,会走到 vdompatch 方法
  • patchvnode渲染成 DOM ,初次渲染完成

image.png

image.png

为何要监听 get ,直接监听 set 不行吗?

  • data 中有很多属性,有些被用到,有些可能不被用到
  • 被用到的会走到 get ,不被用到的不会走到 get
  • 未走到 get 中的属性,set的时候我们也无需关心
  • 避免不必要的重复渲染

image.png

5.4 第四步:data 属性变化

image.png

image.png

  • 修改属性,被响应式的 set 监听到
  • set中执行 updateComponent
  • updateComponent 重新执行 vm._render()
  • 生成的 vnodeprevVnode ,通过 patch进行对比
  • 渲染到 html

image.png

支持一下
扫一扫,支持poetries