（转）面试题之: 什么是MVVM？

绝地灬酷狼 2021-12-23 15:15 353阅读 0赞

**目录**

考察点:

面试题1: 说下使用jquery和Vue的区别？

面试题2: 说一下对MVVM的理解

面试题3: vue如何实现响应式

面试题4: vue如何解析模板

模板

v-model双向绑定是怎么实现的？

v-for怎么实现的？

vm.\_c 和render 返回什么？

render 和patch

总结：

面试题5: vue的实现流程

第一步：解析模板成render函数

第二步： 响应式开始监听

第三步： 首次渲染，显示页面，绑定依赖

第四步：data变化，触发rerender

--------------------

# 考察点: #

如何理解MVVM?  
如何实现MVVM?  
你是否读过VUE源码?

## 面试题1: 说下使用jquery和Vue的区别？ ##

答：

数据和视图的分离  
dom 和 js没有分离，真正的内容会混合在js中由js创建  
不符合开放封闭原则。对扩展开放，对修改封闭  
以数据驱动视图  
jquery直接修改视图  
vue只需要修改数据，框架自动修改视图，Dom操作被封装

##    面试题2: 说一下对MVVM的理解 ##

mvc: 数据层，视图层，控制层

mvvm：数据层，视图层，vm层

vm是数据层和视图层的桥梁，数据与视图分离

## 面试题3: vue如何实现响应式 ##

defineProperty

## 面试题4: vue如何解析模板 ##

什么是模板？  
render函数？  
render函数与vdom？

###    **模板** ###

*  本质上说就是一段字符串
 *  有逻辑。v-for，v-if……
 *  和html很像，但有很大区别，html是静态的
 *  最终转化成html显示
 *  模板最终要转换成js代码
 *  有逻辑必须需要js才能实现（js图灵完备）
 *  js才能实现html的渲染
 *  重要的js函数render

with

with(obj) {
        alert(name)     //obj.name
        alert(age)     //obj.age
    }

注意 : 日常开发不要使用with函数

render
    <div id="app">
    <p>{
       {price}}</p>
    </div>

//render
    with(this) {
        return _c{
            //vm._c
            'div',
            {
                attrs: {"id": "app"}
            },
            [
                _c['p',[_v(_s(price))]]
                //vm.price
                //vm._v  创建文本节点
                //vm._c  创建dom标签
                //vm._s  toString
            ]
        }
    }

模板中的所有信息都包含在render的函数中  
this就是vm  
todo的render图片

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgxNDM1Ng_size_16_color_FFFFFF_t_70][]

### **v-model双向绑定是怎么实现的？** ###

答: 当vue的模板文件被解析成js的时候，它的本质是有一个get，一个set的。比如说input和list的双向绑定，当on input事件触发的时候，就会改变vm.title. 而title改变的时候，获取到title赋值给input的value

### **v-for怎么实现的？** ###

答: \_l()函数核心就是一个for循环。变成一个数组，做ul的子元素。

### **vm.\_c 和render 返回什么？** ###

vm.\_c 实际上就类似snabbdom的h函数。虚拟dom

![vm.\_åhå½æ°][vm._h]

### **render 和patch** ###

![patch][]

### 总结： ###

1.  模板就是字符串。有逻辑和变量
2.  模板必须转换成js代码
3.  render函数是什么样子？复习
4.  render函数返回的事vnode
5.  updateComponent
6.

## 面试题5: vue的实现流程 ##

三要素: 双向绑定、模板解析、渲染

### 第一步：解析模板成render函数 ###

1.  with的引用
2.  模板中所有的信息都要被render函数包含
3.  模板中用到的data属性都变成js变量
4.  v-modle、v-for……变成js
5.  返回vnode

### 第二步： 响应式开始监听 ###

1.  通过object.defineProperty监听到data中属性的get和set方法
2.  将data中的属性代理带vm上

### 第三步： 首次渲染，显示页面，绑定依赖 ###

1.  首次渲染使用uodateComponent()函数
2.  vm.patch（$el, vnode）
3.  patch将vnode转换成dom，完成首次渲染

### 第四步：data变化，触发rerender ###

1.  命中set的监听
2.  set 中执行updateComponent
3.  uodate重新执行render()
4.  vdom和preVdom比较
5.  渲染到dom中

原文：[https://blog.csdn.net/weixin\_40814356/article/details/84358582][https_blog.csdn.net_weixin_40814356_article_details_84358582]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgxNDM1Ng_size_16_color_FFFFFF_t_70]: /images/20211223/1e8e86fd2b984648bfd8b62dfab4842a.png
[vm._h]: /images/20211223/209eaab0ac6147c3a128c3a4edc80644.png
[patch]: /images/20211223/9789c99c88224f86b4625504710b70fc.png
[https_blog.csdn.net_weixin_40814356_article_details_84358582]: https://blog.csdn.net/weixin_40814356/article/details/84358582