代码改变世界

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

2017-05-06 01:53 龙恩0707 阅读(...) 评论(...) 编辑 收藏

阅读目录

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