1、采用组件化模式，提高代码复用率、且让代码更好维护

.vue文件是Vue官方全新打造的文件格式。

在Vue中，一个.vue文件，就是一个组件。

如下图：以后如果有人想使用推荐活动这个组件，直接把.vue文件拿过去，就可以使用推荐活动里面所有的代码，包括html、CSS、javaScript，这样提高了代码的复用率。其他的两类，新闻和热门同理，都能这么做，采用了封装的思想，复用了，还更好的维护了。

总结1：以后如果需要更改新闻这个功能的布局，直接来到News.vue中更改html结构即可、更改样式直接来更改对应的CSS样式即可。

总结2：更改News.vue中的文件，绝对不会影响到Activity.vue和Hot.vue两个文件。

总结3：组件化编码、组件化模式。

2、声明式编码，让编码人员无需直接操作DOM，提高开发效率

需求：

现在有一些人的数据，该数据是一个数组persons。

页面中有一个容器。

写一点代码，把数据作为一个li，塞到ul中。

效果展示：

2.1 命令式编码实现方式

命令式编码【通过JS来写】举例：

• 老师叫你往前走一步，你就走一步，这就是一个命令。
• 老师叫你再往前走一步，你又走了一步，这又是一个命令。
• 如不发出命令，你就不走了。必须说一下，才动一下，这就是命令。
• 每一步都少不了，少了任何一步，就相当于少了一次命令。 上图第2步是：拼接模板字符串

2.2 声明式编码实现方式

<ul id="list"><!--v-for就是遍历  指令玩的6，Vue才能学好-->
    <li v-for="p in persons"><!--persons是数据源，p是数据源里面的每一个数据-->
      {{p.id}}  -  {{p.name}}  -  {{p.age}}<!--从数据里面取对应的指令属性id、name、age-->
    </li>
</ul>

2.3 总结

案例：我口渴了，嗓子有点干。

（1）命令式编码：你站起来→往前走→蹲下→往右看→看见一个水杯→握起来→向我走来→张嘴→往里倒水→喝到水了。

特点：需要一步一步指挥。

（2）声明式编码：自己起来，拿起一瓶很凉的水，说：老师，你喝水吧！

特点：心有灵犀的感觉。

（3）必须Vue中这些指令【例如：v-for、v-text等】玩的很6。

3、使用虚拟DOM+优秀Diff算法，尽量复用DOM节点

案例：遍历人员列表

3.1 原生js来写

直接看上面代码是没问题，但有一天，这个数据发生变化会变得麻烦。

下图是把原来有的覆盖掉了，不方便，也会影响效率。本可以直接添加差异化的东西，这样显的很方便。

（1）如果改用Vue去实现，比较方便，中间多了一个环节叫做虚拟DOM。

（2）如果使用原生JS也是可以实现的，只是自己需要过滤数据，对比数据，原来有谁，现在有谁，需要单独操作的是谁，使用原生JavaScript也可以写，只是写起来比较麻烦。如果数据量比较大，自己使用原生JavaScript写的判断，效率就很低啦。

3.2 Vue来写

可以把虚拟DOM理解为内存里面的一个数据。

如果数据不变化，一直是死数据，张三、李四、王五，虚拟DOM对我们没有帮助。

但是数据有变化，虚拟DOM就有作用。

Diff算法会进行比较。

如上图所示，需要两步进行展示。原来数据直接一步搞定，直接渲染到页面上，使用Vue后，变的麻烦了，需要变成虚拟DOM，才能把数据展示到页面上。中间经历了虚拟DOM的环节，肯定是需要浪费时间的。

（1）如果需要渲染的数据是死数据，是不会变化的，虚拟DOM不会有什么帮助。

（2）但是，如果以后这个数据会发生变化，那么虚拟DOM就能帮助到自己啦。 如下图所示：