首页
登录 | 注册

面试题之: 什么是MVVM?

  • 2月26日添加到anki

考察点:

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

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

答:

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

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

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

mvvm:数据层,视图层,vm层

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

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

defineProperty

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

  1. 什么是模板?
  2. render函数?
  3. 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
		]
	}
}
  1. 模板中的所有信息都包含在render的函数中
  2. this就是vm
    todo的render图片
    面试题之: 什么是MVVM?

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

面试题之: 什么是MVVM?

render 和patch

面试题之: 什么是MVVM?

总结:

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

面试题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中

相关文章

  • 阿里开发者招聘节 | 面试题02-04:给定一个二叉搜索树(BST),找到树中第K小的节点
    为帮助开发者们提升面试技能.有机会入职阿里,云栖社区特别制作了这个专辑--阿里巴巴资深技术专家们结合多年的工作.面试经验总结提炼而成的面试真题这一次将陆续放出(面试题官方参考答案将在专辑结束后统一汇总分享,点此进入答题并围观他人答案).并通 ...
  • 阿里开发者招聘节 | 面试题01:如何实现一个高效的单向链表逆序输出?
    面试,如同玩一场饥饿游戏:既要对环境了然于胸,又要对自身心知肚明.发现一个好工作不容易,但成功应聘又会面临一系列的挑战. 为帮助开发者们提升面试技能.有机会入职阿里,云栖社区特别制作了这个专辑--阿里巴巴资深技术专家们结合多年的工作.面试经 ...
  • 什么是GIL?GIL对多线程的影响 GIL全称Global Interpreter Lock(全局解释器锁).GIL和Python语言没有任何关系,只是因为历史原因导致在官方推荐的解释器Cpython中遗留的问题.(多线程)每个线程在执行的 ...
  • 一份还热乎的蚂蚁金服面经(已拿Offer)!附答案!!
    本文来自我的知识星球的球友投稿,他在最近的校招中拿到了蚂蚁金服的实习生Offer,整体思路和面试题目由作者--泽林提供,部分答案由Hollis整理自知识星球<Hollis和他的朋友们>中「直面Java」板块. 经历了漫长一个月的 ...

2020 jeepshoe.net webmaster#jeepshoe.net
13 q. 0.274 s.
京ICP备10005923号