VUE基础知识（二）

什么是命令式编程和声明式编程

说明：

命令式编程： 简单来说，就是业务逻辑编程，第一步做什么，第二步做什么，如果少一步，就会少执行，这个就是命令式编程。

举个例子：

当你需要显示如下数据时：

• 中国
• 美国
• 俄国

这个时候，在界面上如何操作哪？大概的过程如下，（注意伪代码）

获取数据
然后拼接字符串 
<ul><li>中国</li><li>美国</li><li>俄国</li>
</ul
然后获取DOM，然后将上边的字符串输出到这个位置。

那么声明式编程，大概如下：

<ul v-for p in arrays>
<li> {{p.name }}</li>
</ul>

大概就是这个样子，看出来了吗，大概就是说，表达你要做的事就可以了，至于怎么做，都由VUE自动完成，你不用管。

所以说，声明式编程，是VUE的实现方法，非常关键，但是需要注意的是，就是这个只跟学习VUE的指令有关系。

什么事虚拟DOM

说明：

所谓的虚拟DOM，就是原来我们在给DOM添加数据的时候，是直接找到DOM，然后更改属性，但是，这有一个问题，就是当数据改变以后，DOM面临大量的重建问题，DOM每次都是先销毁，然后再创建，这样的过程就会导致，DOM的性能很低。那么怎么办？VUE借鉴了react的思想，引入了虚拟DOM的概念，在数据更新DOM之前，先维护一个虚拟DOM，这样通过DIFF比较算法，实现DOM是否真的需要更新，然后再更新DOM的方式，提升了DOM操作的性能。

三个实例属性

vm.$data

获取data中的所有数据

vm.$options

用于当前Vue实例的初始化选项 可以获取自定义选项

new Vue({
  customOption: 'foo',
  created: function () {
    console.log(this.$options.customOption) // => 'foo'
  }
})

vm.$refs

• 通过给元素设定ref属性在Vue实例中获取这个元素
• 页面元素 ref=“jack”
• Vue实例获取 this.$refs.jack

返回的是一个DOM对象

• 如果ref重名后面的会把前面的覆盖