阅读目录

1.理解VUE---混合

在了解Vue生命周期之前，我们先来学习Vue中的混合吧；

为什么需要使用混合？

  假如当我们开发时候，a.js和b.js都有公用的代码的时候，我们可以把他们抽取出来，在a.js或b.js的需要的时候可以引用进来即可，这可以简单的理解为混合。

  混合对象可以包含任意组件选项，所有混合对象的选项将被混入该组件本身的选项。什么意思呢？可以简单的理解为该组件引入该混合对象的时候，该组件拥有该混合对象的所有属性和方法。

看下如下demo代码：

上面代码可以看到 当实例化对象本身和混合对象有相同的函数名的时候，会先调用自身的函数，如果自身的函数不存在，才会

寻找混合对象的函数名。

2.Vue实例化选项

在实例化vue时，需要传入一个选项对象，它可以包含数据(data), 模板(template), 挂载元素(el), 方法(methods), 生命周期构造选项等。

2-1 data

Vue实例的数据都保存在data对象中，Vue将会递归将data的属性转换为getter/setter, 让data数据能够响应变化。

比如如下代码：

var data = {  a: 1};var vm = new Vue({ data: data});console.log(vm);console.log(vm.a === data.a); // trueconsole.log(vm.$data === data); // true

2-2 computed

该属性可以理解为计算属性，getter 和 setter的this上下文自动的绑定vue的实例。如下代码：

var vm = new Vue({  el: '#app',  data: {    message: 'Hello'  },  computed: {    reversedMessage: function() {      return this.message.split('').reverse().join('')    }  }});console.log(vm.reversedMessage);  // olleH

切记：调用属性 只能 vm.reversedMessage, 因为不是调用方法，后面不能加小括号；且后面的function不要使用箭头函数代替，因为this一般都指向vue的实例。

2-3 methods

从字面量理解可以认为 是vue的所有方法写在该对象中，可以直接通过vue实例访问这些方法。方法中this指向vue的实例。如下代码：

var vm = new Vue({  el: '#app',  data: {    message: 'Hello'  },  methods: {    reversedMessage: function () {      return this.message.split('').reverse().join('')    }  }});console.log(vm.reversedMessage()) // -> 'olleH'

从上面的 methods 和 computed看 他们两者都可以做同样的事情，那么他们的区别是？computed是计算属性的，methods是计算方法的，最主要的区别是 computed计算属性可以对

属性进行缓存的，计算属性只有当该属性发生变化的时候才会重新计算值，只要值没有改变，它是不会重新渲染的，但是methods方法不同，每次调用该方法的时候，都会重新执行的。

2-4 watch

可以理解为 观察某个值发生变化的回调函数。值也可以是方法名，或者包含选项的对象，Vue实例将会在实例化时调用$watch(),遍历watch对象的每一个属性。

如下代码：

var vm = new Vue({  data: {    a: 11,    b: 22,    c: 33  },  watch: {    // 监控a变量变化的时候，会自动执行该函数。    a: function(newVal, oldVal) {      console.log(newVal);  // 打印 12      console.log(oldVal);  // 打印 11    }  }});vm.a = 12; // 改变a的值，会自动调用watch对象中的a函数，返回新值 和 旧值。

3.Vue实例化的生命周期

实例化生命周期 从开始创建，初始化数据，编译模板，挂载Dom->渲染， 更新->重新渲染，销毁等。

beforeCreate: function() {}  // 在实例初始化之后， 数据观测 和 event/watcher 事件配置之前被调用。created: function() {}       // 实例已经创建完成之后被调用。实例已完成如： 数据观测，属性和方法的计算，watch/event事件回调。beforeMount: function() {}   // 在挂载开始之前被调用， 该函数在服务器端渲染期间不会被调用。mounted: function() {}       // el被新创建的 vm.$el替换，并挂载到实例上去之后调用该函数，在该函数内可以获取元素。render: function() {}        // 页面被渲染时会调用该函数。该函数在mounted之前会被调用。beforeUpdate: function(){}   // 数据更新时调用，发生在虚拟Dom重新渲染之前。该函数在服务器端渲染期间不会被调用。updated: function() {}       // 由于数据更改导致虚拟DOM重新被渲染会调用。在被渲染后调用该函数。可以或许新的dom元素。该函数在服务器端渲染期间不会被调用。activated: function() {}     // keep-alive组件激活时调用 该函数在服务器端渲染期间不会被调用。deactivated: function(){}    // keep-alive 组件停用时被调用。该函数在服务器端渲染期间不会被调用。beforeDestroy: function(){}  // 实例销毁之前被调用，实例仍然完全可用 该函数在服务器端渲染期间不会被调用。destroyed: function() {}     // Vue 实例销毁后调用，调用后，Vue实例所有东西都会被解绑定，所有的事件监听器会被移除，所有的实例被销毁。

下面看看代码如下：

              
     
      
      
 {
   { number }} 
      
          
     
      

我们在浏览器控制台看到，第一次页面加载后，打印信息如下：

beforeCreate undefined

created 1

beforeMount: 1

1111

从上面可以看到，页面第一次加载后，触发了 beforeCreate，created，beforeMount等生命周期函数，当然 mouted 生命周期在加载完后dom操作也会被触发的。

beforeCreate 在实例创建之前 是获取不到值的，上面页面加载完成后，可以看出值为undefined；

当我们在控制台 console.log('mounted: ', document.getElementsByTagName('p')[0]) DOM 渲染在 mounted 中已经完成。

我们接着在input输入框 在输入一个1字，控制台打印出如下信息：

beforeUpdate 11

updated 11

可以看到当内容被更新的时候 调用了 beforeUpdate 和 updated 等生命周期函数。

当我继续在控制台中 调用如下销毁方法：vm.$destroy() 后，在控制台会打印如下信息：

销毁前.....

已销毁.....

说明这时候会自动调用了 beforeDestroy 和 destroyed 等生命周期函数。为此整个生命周期过程就是这样的。

Vue.nextTick([callback, context]): 在DOM更新循环结束之后执行的延迟回调函数，在修改数据之后立即使用这个方法，获取更新后的DOM元素。

Vue.nextTick(function () {  // DOM 更新了  console.log(1111);  // 打印出 1111})