• 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图片
    在这里插入图片描述

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函数

render 和patch

patch

总结:

  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中
Logo

前往低代码交流专区

更多推荐