Vue2-导言

Vue

学习Vue之前，我们先来看三个问题

导言

什么是Vue

这是官网的介绍

构建用户界面

即将数据展示在页面上，给用户看

渐进式框架

渐进即逐渐递进，简单来说就是

在简单应用中，可以只需要一个小巧的库

在复杂应用中，可以引入各种各样复杂的组件

就是一种可以从易到难开发的一种框架

谁开发的

它有什么特点

Angular.js的特点是模块化开发

React.js的特点是虚拟DOM

Vue则是集两家之长，它具有以下特点

组件化开发

提高代码复用率和维护性

每一个框就是一个组件，就是一个文件

当我需要修改哪一块的界面，我只需要到哪个文件去修改即可

声明式编程

让编码人员无需直接操作DOM，提高开发效率

需求：将下列数据显示在一个列表(<ul id="container"></ul>)中

let persons = 
[
    {
        id: '1',
        name: 'zhima'
    },
    {
        id: '2',
        name: 'lizhi'
    },
        {
        id: '3',
        name: 'kerwin'
    }
]

命令式编程

let list = document.getElementById('container')
persons.forEach(p=>{
    let li=document.createElement('li');
    li.innerHtml=`id:${p.id}-name:${name}`
    list.append(li);
})

声明式编程

<ul id="container">
	<li v-for="p in persons">
        id:{{p.id}}-name:{{p.name}}
    </li>
</ul>

虚拟DOM

优秀的DIFF算法，提高DOM的复用率

这就有点让人摸不着头脑了，DOM还有复用率？

还是刚才那个案例，如果我的数据变成了这样

let persons = 
[
    {
        id: '1',
        name: 'zhima'
    },
    {
        id: '2',
        name: 'lizhi'
    },
    {
        id: '4',
        name: 'txy'
    }
]

传统的使用JavaScript进行命令式操作的话，直接将数据转化为页面真实DOM（Real-DOM），确实和DOM的复用率没有啥关系

但是在Vue里面，在数据变成页面上的DOM节点的之前，它会在内存中生成虚拟DOM（Virtual-DOM）

然后使用DIFF算法，比较新旧虚拟DOM，如果有一样的，则直接复用之前已经生成好的虚拟DOM，从而提高了DOM的复用率。

那么通过什么来判断两个虚拟DOM是否相同呢？

这就要说说刚刚写的代码的一处错误了，下面看正确的代码

<ul id="container">
	<li v-for="p in persons" :key="p.id">
        id:{{p.id}}-name:{{p.name}}
    </li>
</ul>

我们看到，上面的代码就是加了一处地方，就是:key="p.id"，就是给每一个遍历的元素加上了唯一性标识

具体的DIFF算法，我们后面讲到虚拟DOM 的时候再说

学之前要掌握什么知识

ES6模块化开发规范
包管理器NPM
数组常用方法
axios
promise