Vue

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

声明式渲染

Vue.js的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统：

<div id='app'>{{ msg }}</div>

  1. var app = new Vuew({
  2.     el: '#app',
  3.     data:{
  4.         msg:'Hello Vue!'
  5.     }
  6. })

Vue实例的生命周期

每个Vue实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测（data observer）、编译模板、挂载实例到DOM，然后在数据变化时更新DOM。下图展示的就是一个vue实例对象的生命周期。
VueJS的生命周期 - 图1

Vue在生命周期中的状态有：

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • beforeDestroy
  • destroyed

Vue在实例化的过程中，会调用这些生命周期的钩子，提供了执行自定义逻辑的机会。在这些vue钩子中，vue实例执行了以下操作：

  1. var vm = new Vue({
  2.     el: "#container",
  3.     data: {
  4.         test : 'hello world'
  5.     },
  6.     beforeCreate: function(){
  7.         console.log(this);
  8.         showData('创建vue实例前',this);
  9.     },
  10.     created: function(){
  11.         showData('创建vue实例后',this);
  12.     },
  13.     beforeMount:function(){
  14.         showData('挂载到dom前',this);
  15.     },
  16.     mounted: function(){
  17.         showData('挂载到dom后',this);
  18.     },
  19.     beforeUpdate:function(){
  20.         showData('数据变化更新前',this);
  21.     },
  22.     updated:function(){
  23.         showData('数据变化更新后',this);
  24.     },
  25.     beforeDestroy:function(){
  26.         vm.test ="3333";
  27.         showData('vue实例销毁前',this);
  28.     },
  29.     destroyed:function(){
  30.         showData('vue实例销毁后',this);
  31.     }
  33. });
  35. function realDom(){
  36.     console.log('真实dom结构：' + document.getElementById('container').innerHTML);
  37. }
  38. function showData(process,obj){
  39.     console.log(process);
  40.      console.log('data 数据：' + obj.test)
  41.      console.log('挂载的对象：')
  42.      console.log(obj.$el)
  43.      realDom();
  44.      console.log('------------------')
  45.      console.log('------------------')
  46. }

vue对象初始化过程中，会执行到beforeCreate，create吗，beforeMount，mounted这几个钩子的内容
beforeCreate：数据还没有监听，还没有绑到vue对象实例，同时也没有挂载对象
created：数据已经绑定到对象实例，但是还没有挂载对象
beforeMount：模板已经编译好了，根据数据和模板已经生成了对应的元素对象，将数据对象关联到了对象的$el属性，$el属性是一个HTMLElement对象，也就是这个阶段，vue实例通过原生的createElement等方法来创建这个HTML片段，准备注入我们vue实例指明的el属性对应的挂载点
mounted：将$el的内容挂载到了el，相当于我们在jQuery执行了$(el).html($el),生成页面上真正的demo，上面我们就会发现demo的元素和我们的$el元素是一致的。在此之后，我们就能够用方法来获取到el元素下的dom对象，并进行各种操作

当我们的data发生改变时，会调用beforeUpdate和Updated方法

beforeUpdate：数据更新到dom之前，我们可以看到$el对象已经修改，但是我们页面上dom的数据还没有发生改变
updated：dom结构会通过虚拟dom的原则，找到需要更新页面dom结构的最小路径，将改变更新到dom上面，完成更新

实例的销毁

beforeDestroy：实例的销毁，vue实例还是存在的，只是解绑了事件的监听还有watch对象数据与view的绑定，即数据驱动