前端面试之MVVM浅析

栏目: JavaScript · 发布时间: 6年前

前端面试之MVVM浅析

前端面试之MVVM浅析

1.2 vue 实现 todo-list

前端面试之MVVM浅析

1.3 jQuery 和框架的区别

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

二、说一下对 MVVM 的理解

2.1 MVC

M - Model
V - View
C - Controller

前端面试之MVVM浅析 前端面试之MVVM浅析

2.2 MVVM

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

前端面试之MVVM浅析

2.3 关于 ViewModel

MVVM
ViewModel

前端面试之MVVM浅析

前端面试之MVVM浅析

2.4 MVVM 框架的三大要素

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

三、vue 中如何实现响应式

3.1 什么是响应式

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

前端面试之MVVM浅析

3.2 Object.defineProperty

前端面试之MVVM浅析

3.3 模拟实现

前端面试之MVVM浅析

前端面试之MVVM浅析

四、vue 中如何解析模板

4.1 模板是什么

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

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

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

前端面试之MVVM浅析

4.2 render 函数

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

前端面试之MVVM浅析

前端面试之MVVM浅析 前端面试之MVVM浅析

4.3 render 函数与 vdom

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

前端面试之MVVM浅析

前端面试之MVVM浅析

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

五、vue 的整个实现流程

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

前端面试之MVVM浅析

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

前端面试之MVVM浅析

前端面试之MVVM浅析 前端面试之MVVM浅析 前端面试之MVVM浅析

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

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

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

前端面试之MVVM浅析

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

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

前端面试之MVVM浅析

前端面试之MVVM浅析

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

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

前端面试之MVVM浅析


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

轻营销

轻营销

唐文 / 机械工业出版社 / 2015-6 / 35元

《轻营销》,中国第一本全面讲述如何在互联网新时代用小预算做大营销的书籍,以求把中小微企业从那些以大预算为基础而难以落地的营销理论和案例中解脱出来。用“轻”但真正起作用的方法,帮助传统企业抓住互联网新一波浪潮的机遇,转型升级。 “怒打价格战、拼命砸广告、渠道金字塔”是过去中国企业做营销的基本功课,背后的逻辑是花钱。今天这三招已经不太管用了,广告费用的多少不再是决定性因素。取而代之的是直面客户的......一起来看看 《轻营销》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具