初识Vue

Vue是第三方开发的渐进式基于MVVM设计模式开发的JS框架。其主要作用是为了弥补HTML、CSS不足。

1.原生开发的缺陷

​ HTML+CSS语言并不完备，主要表现在并不像高级语言那样支持语法结构（例如：循环、变量、分支等），这就大大增加了JS的工作压力，也是页面十分繁琐、复用性差，不好维护。

2.什么是MVVM模式

​ 视图（View）：

​ 增强了HTML和CSS的功能，比如提供了变量，分支，循环等功能。

​ 模型数据（Model）：

​ 将页面上所需的变量都封装在data对象当中，集中保存，便于维护

​ 控制器（View Model）：

​ 自动实现模型数据data与视图中变量的绑定，可做到实时同步。此外，控制器封装了所需的增删改查操作，避免了重复操作。

3.Vue如何实现MVVM模式

​ new Vue()中包含了两大子系统：

响应系统：

​ 将data放入new Vue()中后，将自动会为每个变量增加访问器属性。并将变量直接隶属于Vue对象当中。同时在访问器属性中内置了通知机制，只要试图更改data中的变量，就会触发该机制。

虚拟DOM树：

​ 仅保存View中可能变化的元素，这样相较于原生的DOM树剔除了无关的结构，使其能够更加高效的遍历所需的节点。可大大提高效率。

4.指令

​ 为HTML增加功能的特殊属性，其中包含13个

​ {{变量}} v-bind： v-show

​ v-if v-else-if v-else

​ v-for=" (item, index)of 数组/数字"

​ v-on/@ v-html v-cloak

​ v-text v-once v-pre

5.使用Object.defineProperty，模拟实现Vue的绑定原理

<ul id="nav">		
	<li>分数：</li>
	<li>{{score}}</li>			
</ul>

<script>
			var data = {
				score:1000
			};
//			虚拟DOM树
			var arr=[];
			function getChildren(parent){
				var children = parent.children;
				for (var child of children){
					if(child.children.length>0){
						getChildren(child);
					}else{
						if(child.innerHTML=="{{score}}"){
							child.innerHTML= data.score;
							arr.push({
								elem : child,
								innerHTML : "{{score}}"
							});
						}
					}
				}
			}
//			页面加载时扫描一次
			getChildren(nav);
			console.log(arr)
//			响应系统
			Object.defineProperties(data,{
				_score:{
					value:data.score,
					writable:true,
					enumerable:false
				},
				score:{
					get(){
						return this._score;
					},
					set(value){
						this._score=value;
						for(var obj of arr){
							if(obj.innerHTML=="{{score}}"){
								obj.elem.innerHTML=value;
							}
						}
					},
					enumerable:true
				}
			});
			Object.seal(data);
//			测试代码
			setInterval(function(){
				data.score+=100;
			},2000)
</script>

​