Vue.js介绍

1.什么是Vue.js

依照官网介绍：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

原理：

在我的理解，vue实际上是一种响应式的框架，什么是响应？就是你在做出一个动作，一个操作的时候，目标会根据你的操作给予相应的回应，这就是我理解的相应，而vue就很好的做到了这点，当我们对数据模型进行修改的时候，Vue会根据我们的修改自动渲染视图，进行视图更新，而不需要手动渲染，当让前提是我们要对视图与数据进行绑定。
当我们将一个javascript对象传入vue时，vue会遍历这个对象的所有属性，并使用Object.defineProperty进行get/set拦截，

官方原理图解：

Data对象中的数据由get/set方法进行拦截，而Watcher则是依赖于Data的监听器监听Data对象的变化，当其中的数据更新时会通知（Notify）Wactcher监听器，而监听器就会触发组件渲染，这里有一个Virtual Dom Tree，这也是Vue特色的一点和React，监听器触发组件渲染，先创建一个虚拟dom树，这个虚拟dom树会匹配我们真实的dom节点，并且一一对应进行数据更新。

缺点

由于wacher是依赖于get/set方法来监听和修改的，所以vue无法检测Data对象属性的增加和移除

var vm = new Vue({
  data:{
    a:1
  }
})

// `vm.a` 是响应式的

vm.b = 2
// `vm.b` 是非响应式的

所以你要的每个数据必须要在data中定义出来才能进行响应式处理！不让就会报错xx.undefined错误，当然了 你也可以全局方法this.$set（this.Object,‘属性名’，‘属性值’）

this.$set(this.someObject,'b',2)

多个值时：

this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

对于数组，Vue不能直接通过 “ = ”来根据索引修改数组中的某一项，也不能通过此修改数组长度

vm.items[indexOfItem] = newValue
vm.items.length = newLength
//这两种方式都不是响应式的！
例如

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

当然了我们也有解决方法：

// Vue.set 全局方法
Vue.set(vm.items, indexOfItem, newValue)
//或者直接使用数组中内置方法splice
items.splice(indexOfItem, length, newValue)
//indexOfItem表示索引开始的值，length表示从开始位置要进行操作的长度，newValue表示要替换进去的值 这个方法以后会在详细讲数组内置方法时细说

//赋予数组新的长度
items.splice(newLength)

Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。Vue鼓励我们尽量不要进行dom节点的操作，所以我们尽量避免。这里作简要介绍dom节点的操作

<div id="example">{{message}}</div>

<script>
var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
  vm.$el.textContent === 'new message' // true
})
<script>

一点愚见