关于vue的那些事儿

1. 什么是vue？

Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

2. vue的核心思想是什么？

2.1数据驱动——双向绑定
双向数据绑定是依靠底层的Object.defineProperty()实现的；
数据依靠指令系统驱动视图
2.2组件化
组件化是每个页面甚至每个功能都被封装成了一个单独的组件，彼此之间相互嵌套就实现了整个页面，维护起来也很方便。

3. vue的设计模式？

vue是MVVM设计模式，数据驱动视图。

4. Vuex

Vuex 的核心内容主要就是 State、Getters、Mutations、Actions 这四部分，也非常好理解。
State：用来保存最基本的数据，类似于vue组件中的data；
Getters：当需要对 store 中的数据进行处理，或者需要对处理后的数据进行复用，就可以使用 Getters 来处理，Getters 也可以理解为 Vue 中的计算属性 (computed)。
Mutations：在 Vue 中，data 值是可以直接被更改的。但是在 Vuex 中，不能直接对 state 进行操作，唯一的方法就是提交 mutation。mutation 可以理解为 Vue 中的 method 事件，只不过调用 mutation 需要特别的方法（commit）。
Actions：Action 类似于 mutation，不同在于：

1. Action 不直接更改状态，而是提交 mutation
2. Action 可以包含任何异步操作

5. Vue的生命周期？

关于vue的生命周期，官网中给出了这样一张图：

vue的生命周期分为八个阶段：
beforeCreate（创建前）,
created（创建后）,
beforeMount(载入前),
mounted（载入后）,
beforeUpdate（更新前）,
updated（更新后）,
beforeDestroy（销毁前）,
destroyed（销毁后）
下面是官网上的一个Demo：

<div id=app>{{a}}</div>
<script>
var myVue = new Vue({          
el: "#app",          
data: {
a: "Vue.js"        
},         
 beforeCreate: function() { 

console.log("创建前")            
console.log(this.a)            
console.log(this.$el)          
},         
 created: function() {
                console.log("创建之后");            
console.log(this.a)            
console.log(this.$el)          
},         
 beforeMount: function() {            
console.log("mount之前")            
console.log(this.a)            
console.log(this.$el)          
},          
mounted: function() {            
console.log("mount之后")            
console.log(this.a)            
console.log(this.$el)          
},          
beforeUpdate: function() {            
console.log("更新前");            
console.log(this.a)            
console.log(this.$el)          
},          
updated: function() {            
console.log("更新完成");            
console.log(this.a);            
console.log(this.$el)          
},          
beforeDestroy: function() {            
console.log("销毁前");            
console.log(this.a)            
console.log(this.$el)            
console.log(this.$el)          
},          
destroyed: function() {           
console.log("已销毁");          
console.log(this.a)          
console.log(this.$el)          
}   
  });  
</script>