前段时间学习了关于vue中响应式数据的原理，（并作了学习笔记vue响应式原理），其实是通过Object.defineProperty控制getter和setter，并利用观察者模式完成的响应式设计。那么数组有一系列的操作方法，这些方法并不会触发数组的getter和setter方法。那么vue中针对数组的响应式设计是如何实现的呢...那么我们一起去学习下吧~

如上是vue官网的例子，你会注意到如果你选择一篇文章，切换到Archive标签，然后切回Posts， 是不会继续展示你之前选择的文章的。因为你每次切换新标签的时候，Vue都会创建一个新的currentTabComponent实例。

插槽内容 Vue实现一套内容分发的API， 这套API基于当前的web组件规范草案，将<slot>元素作为承载分发内容的出口。 {代码...} 然后在<navigation-link>的模板中可能会写为： {代码...} 当组件渲染的时候，这个<slot>元素将会被"Yourt Profile"替换。插槽可以包括任何模板代码，包括HTML: {代码...} 甚...

你可以用v-model指令在表单input，textarea以及select元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但是v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据。

监听事件 可以使用v-on指令监听DOM事件，并在触发的时候运行一些JavaScript代码。 {代码...} 事件处理方法 因为事件处理逻辑会更为复杂，所以直接把JavaScript代码写在v-on指令中是不可行的，因此v-on还可以接受一个需要调用的方法名称。 {代码...} 内联处理器中的方法 除了直接绑定到一个方法，也可以在内联JavaScript...

用v-for把一个数组对应为一个组件元素 我们用v-for指令根据一组数组的选项列表进行渲染。v-for指令需要使用item in items形式的语法： {代码...} 在v-for块中，我们拥有对父作用域属性的完全访问权限。v-for还支持一个可选的第二个参数为当前项的索引。 {代码...} 也可以用of替代in作为分隔符，因为它是最接近JavaScript...

(1)在<template>元素上使用v-if条件渲染分组因为v-if是一个指令，所以必须将它添加到一个元素上，如果想切换多个元素呢？可以使用<template>元素当做不可见的包裹元素。并在上面使用v-if。最终渲染结果将不包含<template>

操作元素的class列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以使用v-bind处理它们：只需要通过表达式计算出字符串结果即可。不过拼接字符串比较麻烦，因此在v-bind用于class和style时，vue做了专门的增强，表达式结果的类型除了字符串之外，还可以是对象和数组。

我们可以在表达式中调用方法来达到和计算属性相同的作用。但是计算属性是基于它们的依赖缓存的。只有在相关依赖改变的时候才会重新求值。这就意味着只要message没有改变，多次访问reverseMsg还是返回同样的值，而不是执行函数。

在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。结合响应系统，Vue能够智能的计算出最少需要重新渲染多少组件，并把DOM操作次数减少到最少。

当一个Vue实例被创建时，它向Vue的响应式系统中加入了其data对象中能找到的所有属性。当这个属性的值发生变化时，视图将产生"响应"，即匹配更新后的值。

1.直接<script>标签引用， Vue会被注册成为一个全局变量。2.npm注：开发版本下不要使用压缩版本，不然会失去一些错误相关的警告。