JavaScript高级面试题（6）

1.本章主要内容

jQuery和使用框架的区别
对MVVM的理解和实现
是否解读过vue的源码
vue中如何实现响应式
vue中如何解析模板
vue的整个实现流程

2.从jQuery到框架

jQuery和Vue实现todo-list理解两者不同

jQuery和Vue不同：
1.数据和视图的分离，解耦（开放封闭原则）
2.以数据驱动视图，只关心数据变化，DOM操作被封装

3.如何理解MVVM

MVC模式（两种）：
M-Model数据
V-View视图、界面
C-Controller控制器、逻辑处理

MVVM：
Model-模型、数据
View-视图、模板（视图和模板是分离的）
ViewModel-连接Model和View

ViewModel中间的桥梁做作用，View通过DOM事件绑定控制数据对象Model，数据对象Model通过数据绑定改变View视图。

4.Vue三要素

Vue实现三要素：

1.响应式（数据劫持+订阅发布）
vue如何监听到data的每个属性变化？

2.模板引擎（模板解析成虚拟DOM节点）
vue的模板如何被解析，指令如何处理？

3.渲染（DOM操作）
Vue的模板如何被渲染成HTML？以及渲染过程？以及data变化之后，重新渲染过程

下面我们分别讲解这三要素

5.Vue：响应式

Vue中如何实现响应式：
什么是响应式？
Object.defineProperty
模拟

1.什么是响应式？

修改data属性之后，vue立刻监听到
data属性被代理到vm上（例如控制台vm.name = ‘lisi’）

2.defineProperty

问题：

上面说的监听到是比如我页面中使用obj对象数据，我进行获取和赋值属性的时候，页面怎么能直接监听到？

Object.defineProperty（原理是重写get，set方法）:

var obj = {}
var name = 'zhangsan'
Object.defineProperty(obj,"name",{
	get:function(){
		console.log('get')
		return name
	},
	set:function(newVal){
		console.log('set')
		name = newVal
	}
});

console.log(obk.name)	//可以监听到
obj.name = 'lisi'		//可以监听到

相对于字面量声明对象，Objec.defineProperty将函数的设置和获取都变成了函数。

3.模拟响应式

模拟两点：
1.Objec.defineProperty的定义和监听
2.data里的属性怎么代理到vm

var vm = {}
var data = {
	price:100,
	name:'zhangsan'
}

var key
for(key in data){
	//命中闭包。新建一个函数，保证key的独立的作用域
	(function(key){
		Object.defineProperty(vm,key,{ //把key（peice、name）定义到vm上
			get:function(){
				console.log('get',data[key]	//类似页面的使用，输出结果可以证明可以监听到
				return data[key]
			},
			set:function(newVal){
				console.log('set',newVal)；		//类似页面的使用，输出结果可以证明监听到
				data[key] = newVal
			}
		})
	})(key)
}