前端面试之MVVM浅析

1.2 vue 实现 todo-list

1.3 jQuery 和框架的区别

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

二、说一下对 MVVM 的理解

2.1 MVC

M - Model
V - View
C - Controller

2.2 MVVM

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

2.3 关于 ViewModel

MVVM
ViewModel

2.4 MVVM 框架的三大要素

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

三、vue 中如何实现响应式

3.1 什么是响应式

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

3.2 Object.defineProperty

3.3 模拟实现

四、vue 中如何解析模板

4.1 模板是什么

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

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

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

4.2 render 函数

  • 模板中所有信息都包含在了 render 函数中
  • this 即 vm
  • price 即 this.price 即 vm.price ,即 data 中的 price
  • _c 即 this._c 即 vm._c

4.3 render 函数与 vdom

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

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

五、vue 的整个实现流程

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

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

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

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

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

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

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

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

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

原文https://www.tuicool.com/articles/IVNVfi

展开阅读全文

没有更多推荐了,返回首页