emmmmm，，之前因为开项目来不及仔细读一遍，只能是用到什么找什么，然而深感对vue了解的无力(ŎдŎ；)。。还有一个周开新项目，恩，认真看一哈！(￣▽￣)
【本文并没有讲解全部API，因为太多了。。总结了部分我觉得重要的点加以分析】
传送门：Vue.js中文API

Vue参考MVVM模式，使用vm (ViewModel 的简称)来表示Vue实例

vue是一个虚拟DOM的，以数据驱动为核心的前端框架。数据驱动也可以称为响应式系统，当属性的值发生变化时，视图都会“及时响应”，并更新相应的新值。

实例生命周期钩子函数

每个 Vue 实例在被创建之前，都要经过一系列的初始化过程，例如，Vue 实例需要设置数据观察(set up data observation)、编译模板(compile the template)、在 DOM 挂载实例(mount the instance to the DOM)，以及在数据变化时更新 DOM(update the DOM when data change)。在这个过程中，Vue 实例还会调用执行一些生命周期钩子函数，这样用户能够在特定阶段添加自己的代码。

Vue生命周期

（图可能不是很清晰，小伙伴们可以参考原图）

对于数据的操作，比如props、data、computed的初始化都是在beforeCreate与created之间完成的，所以不了解的时候很可能会出现在别的钩子操作数据而产生奇奇怪怪的问题。
有一点要注意，一般情况下vue组件总是会走完全部的生命周期的，即使你在created或者其他早期的生命周期钩子中使用了路由跳转或者location.herf重定向。
一些因生命周期问题而导致无法使页面刷新的问题有如下解决方案：
①this.nextTick（{ }）具体使用方法请移步传送门
②vuex
③setTimeout(code,millisec) 【可以强制推迟页面加载xx毫秒，强烈不推荐，暂缓之计，具体病因还是要具体解决】
生命周期钩子是一个很强大的功能，可以很好地处理挂载以及异步加载相关的事件，在特定阶段执行特定的代码，比如某几张图的出现顺序、比如axios请求数据来异步刷新等。
注意，任何生命周期钩子中 this 上下文都会指向调用它的 Vue 实例。

关于生命周期具体理解推荐一篇文章来自segmentfault

3. 关于computed和watcher，留个flag，汇总一下再写

4. 修饰符(modifier)是以 . 表示的特殊后缀，表明应当以某种特殊方式绑定指令。

关于修饰符，请移步我的一篇搬运文章☞ Vue修饰符详解

5. 渲染

1. 根据条件进行渲染：v-if与v-show

v-if与v-show可以对内容进行灵活的选择性加载，是使用比较多的指令。
其二者的区别是，v-if是“真实”的条件渲染，因为它会确保条件块(conditional block)在切换的过程中，完整地销毁(destroy)和重新创建(re-create)条件块内的事件监听器和子组件。且v-if是惰性的(lazy)，如果在初始渲染时条件为 false，它不会执行任何操作。直到在条件第一次变为 true 时，才开始渲染条件块。
相比之下，v-show 要简单得多 - 不管初始条件如何，元素始终渲染，并且只是基于 CSS 的切换。
通常来说，v-if 在切换时有更高的性能开销，而 v-show 在初始渲染时有更高的性能开销。因此，如果需要频繁切换，推荐使用 v-show，如果条件在运行时改变的可能性较少，推荐使用 v-if。

v-if的渲染控制

2. 列表渲染：v-for

在 v-for 代码块中，我们可以完全地访问父级作用域下的属性。v-for 还支持可选的第二个参数，作为当前项的索引：


  
    {{ parentMessage }} - {{ index }} - {{ item.message }}

var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

结果：

也可以使用 v-for 来遍历对象的属性，接着提供第二个参数，作为对象的键名(key)，然后第三个参数作为索引(index)：


  {{ index }}. {{ key }}: {{ value }}

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})

结果：

注意，在遍历一个对象时，是按照 Object.keys() 得出 key 的枚举顺序来遍历，无法保证在所有 JavaScript 引擎实现中完全一致。

关于key，下列是API的原文


  

推荐在使用 v-for 时，尽可能提供一个 key，除非迭代的 DOM 内容足够简单，
或者你是故意依赖于默认行为来获得性能提升。
由于这是 Vue 识别节点的通用机制，因此 key 并不是仅限于与 v-for 关联，
我们将在之后的指南中看到，key 还可以其他场景使用。

因为没有用到过所以不是很理解，给个flag后续了解。

带有v-if的v-for
当它们都处于同一节点时，v-for 的优先级高于 v-if。这意味着，v-if 将分别在循环中的每次迭代上运行。当你只想将某些项渲染为节点时，这会非常有用，如下：


  {{ todo }}

关于v-once
用法：
在API中给出的建议是性能优化，事实也确实如此，不过需要注意的是，用v-once指令修饰的html内容在加载的时候会且只会加载一次

划重点！！！！

3. 数组变化检测(Array Change Detection)

Vue 将观察数组(observed array)的变化数组方法(mutation method)包裹起来，以便在调用这些方法时，也能够触发视图更新。这些包裹的方法如下：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

由于 JavaScript 的限制，Vue 无法检测到以下数组变动：

当你使用索引直接设置一项时，例如 vm.items[indexOfItem] = newValue

当你修改数组长度时，例如 vm.items.length = newLength

所以，使用Vue.set(example1.items, indexOfItem, newValue)来解决第一个问题，
使用example1.items.splice(indexOfItem, 1, newValue)来解决第一和第二个问题。
这两种方法可以通过响应式系统触发状态更新。

4. 对象变化检测(Array Change Detection)

受现代 Javascript 的限制， Vue 无法检测到对象属性的添加或删除：
var vm = new Vue({
 data: {
  a: 1
 }
})
// `vm.a` 是响应的

vm.b = 2
// `vm.b` 不是响应的
Vue 不允许在已经创建的实例上，动态地添加新的根级响应式属性(root-level reactive property)。然而，可以使用 Vue.set(object, key, value) 方法，将响应式属性添加到嵌套的对象上。例如：
var vm = new Vue({
 data: {
   userProfile: {
     name: 'Anika'
   }
 }})
可以向嵌套的 userProfile 对象，添加一个新的 age 属性：
Vue.set(vm.userProfile, 'age', 27)
还可以使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名：
vm.$set(this.userProfile, 'age', 27)

这是刚接触Vue的时候踩到过的一个大坑，现在想起来还头皮发麻

∑(ﾟДﾟノ)ノ

6. DOM 模板解析

当时用DOM模板时，会受到一些来源于HTML的限制，比如，这种写法是报错的：

...

解决方案：

is属性请自行百度。

敲黑板

在使用以下字符串模板之一的场景中，这些限制将不再适用：

其他的予以保留 flaggggg

正在开新项目，闲下来继续更新

Vue.js中文API阅读笔记及自己踩过的坑