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

目录

考察点:

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

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

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

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

模板

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

v-for怎么实现的？

vm._c 和render 返回什么？

render 和patch

扫描二维码关注公众号，回复： 12907344 查看本文章

总结：

面试题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图片

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

render 和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