手把手，从无到有带你用vue进行项目实战 系列三(深入剖析vue篇）

相关链接：

手把手，从无到有带你用vue进行项目实战 系列一(搭建框架篇)

手把手，从无到有带你用vue进行项目实战 系列二（cdn、gzip性能加速篇）

---

对Vue的解析主要分为简介、核心内容、组件、路由和状态管理四部分

一、简介

Vue.js主要有四个特点

• 简单小巧 ： Vue.js压缩后只有17k
• 渐进式 ： 可以一步步有阶段的使用而不必一开始使用所有东西
• 响应式 ： 保持视图和状态同步
• 组件化 ： 与react类似，一切都是组件

知识点 : Vue.js如何实现数据双向绑定？

Vue.js的响应式使用起来很简单，不需要引入太多的新概念，声明实例new Vue({data:data})后对data里面的数据进行视图上的绑定。修改data数据，视图中相应数据也会随之修改。

详析

Vue 使用基于依赖追踪的观察系统并且异步队列更新，所有的数据变化都是独立触发，除非它们之间有明确的依赖关系。 vue.js 采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

该方法允许精确添加或修改对象的属性。通过赋值来添加的普通属性会创建在属性枚举期间显示的属性（for...in 或 Object.keys 方法）， 这些值可以被改变，也可以被删除。这种方法允许这些额外的细节从默认值改变。

知识点 : 数组更新检测注意事项

由于vue检测到数组更新后会触发视图更新，因此单独列出来

变异方法（mutating method 改变原数组）
    push(), pop(), shift(), unshift(), splice(), sort(), reverse() 
非变异 (non-mutating method) 
    filter(), concat() 和 slice() 

注意：
由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
	1.	当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
	2.	当你修改数组的长度时，例如：vm.items.length = newLength
为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将触发状态更新：
// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)
为了解决第二类问题，你可以使用 splice：
example1.items.splice(newLength)

知识点 : 对象更改注意事项

还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：
var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 现在是响应式的

vm.b = 2
// `vm.b` 不是响应式的
对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。
但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性

总结：使用Vue.js可以让开发更简单，同时颠覆了传统前端开发模式，提供现代web开发中常见对功能：

• 解耦视图与数据
• 可复用的组件
• 前端路由
• 状态管理
• 虚拟DOM

二、核心内容

Vue.js具有渐