Vue2 第四天学习(Vue的生命周期)

Posted 2020-09-16

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue2 第四天学习(Vue的生命周期)相关的知识，希望对你有一定的参考价值。

阅读目录

1.理解VUE---混合
2.Vue实例化选项
3.Vue实例化的生命周期

1.理解VUE---混合

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

为什么需要使用混合？
假如当我们开发时候，a.js和b.js都有公用的代码的时候，我们可以把他们抽取出来，在a.js或b.js的需要的时候可以引用进来即可，这可以简单的理解为混合。
混合对象可以包含任意组件选项，所有混合对象的选项将被混入该组件本身的选项。什么意思呢？可以简单的理解为该组件引入该混合对象的时候，该组件拥有该混合对象的所有属性和方法。
看下如下demo代码：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
  </head>
  <body>
    <div id=‘app‘> 
    </div> 
  </body>
  <script src="./vue.js"></script>
  <script type="text/javascript">
    // 定义一个混合对象
    var myMixin = {
      template: ‘<div>hello world</div>‘,
      methods: {
        hello: function() {
          console.log(‘hello‘);
        },
        say: function() {
          console.log(‘I am longen‘);
        }
      }
    };
    // 定义一个组件 使用上面的混合对象
    var Component = Vue.extend({
      mixins: [myMixin],
      methods: {
        list: function() {
          console.log(‘lists‘);
        },
        say: function() {
          console.log(‘I am kongzhi‘);
        }
      }
    });
    // 实例化
    var Vm = new Component({
      el: ‘#app‘
    });
    Vm.hello(); // 打印出 hello
    Vm.list();  // 打印 lists
    Vm.say();   // 打印 I am kongzhi
  </script>
</html>

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

回到顶部

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); // true
console.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实例所有东西都会被解绑定，所有的事件监听器会被移除，所有的实例被销毁。

下面看看代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
  </head>
  <body>
    <div id=‘app‘>
      <p> {{ number }} </p>
      <input type=‘text‘ v-model=‘number‘ />
    </div>
  </body>
  <script src="./vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      el: ‘#app‘,
      data: {
        number: 1
      },
      beforeCreate: function() {
        console.log(‘beforeCreate‘, this.number);
      },
      created: function() {
        console.log(‘created‘, this.number);
      },
      beforeMount: function() {
        console.log(‘beforeMount:‘, this.number)
      },
      mouted: function() {
        console.log(‘mouted‘, this.number);
      },
      beforeUpdate: function() {
        console.log(‘beforeUpdate‘, this.number);
      },
      updated: function() {
        console.log(‘updated‘, this.number);
      },
      beforeDestroy: function() {
        console.log(‘销毁前.....‘);
      },
      destroyed: function() {
        console.log(‘已销毁.....‘);
      }
    });
    Vue.nextTick(function () {
      // DOM 更新了
      console.log(1111);  // 打印出 1111
    })
  </script>
</html>

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

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
})

以上是关于Vue2 第四天学习(Vue的生命周期)的主要内容，如果未能解决你的问题，请参考以下文章

vue2.0-vue实例的生命周期

Vue2.x源码学习笔记-从一个小例子查看vm实例生命周期

vue2.0学习笔记之生命周期

谷粒商城学习日记（21）——Vue生命周期

前端MVC Vue2学习总结——Vue的实例生命周期与Vue脚手架（vue-cli）

Vue2.x基础笔记学习