VUE生命周期DOM对象方法、回调函数和属性详解

VUE生命周期DOM对象方法、回调函数和属性详解

Vue生命周期

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程。

VUE生命周期（DOM对象的方法属性）

beforeCreate

创建前，不能访问data与methods，在当前 vue实例生命周期，只会执行一次；

vue实例中的el，data，data中的message都为undefined。

created

在模板渲染成html之前调用，即通常初始化某些属性值，然后再渲染成视图；但是注意，只会触发一次。组件实例创建完成，dom还未生成，仅仅触发一次；

el还是undefined，而数据已经与data中的属性进行绑定（放在data中属性当值发生改变的同时，视图也会发生变化），在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取。

beforeMount

载入前（完成了data和el数据初始化），但是页面中的内容还是vue中的占位符，data中的message信息没有被挂在到Bom节点中，在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取

mounted

在渲染成html之后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。是挂载vue实例后的钩子函数，钩子在主页挂载时执行一次，如果没有缓存的话，再次回到主页时，此函数还会执行。

是挂载vue实例后的钩子函数，仅仅执行一次；载入后html已经渲染(ajax请求可以放在这个函数中)，把vue实例中的data里的message挂载到BOM节点中去

执行顺序：created => mounted => activated

computed

是计算属性，也就是依赖其它的属性计算所得出最后的值。

computed计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新.

例子：

    <div id="computed">
      <div id="example">
        <p>Original message: "{{ msg }}"</p>
        <p style="color:red;">Computed reversed message: "{{ reversedMessage }}"</p>
      </div>
    </div>

 computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.msg.split('').reverse().join('')
    }
  }

运行程序，页面结果：

beforeUpdate

更新前状态（view层的数据变化前，不是data中的数据改变前），重新渲染之前触发，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染

updated

数据已经更改完成，dom也重新render完成

activated

是组件被激活后的钩子函数，每次回到页面都会执行。

在使用时，会用到activated(),keep-live主要目的是可以使用缓存，避免组件重新渲染；

简单的说activated()函数就是一个页面激活后的钩子函数，一进入页面就触发；

deactivated

离开组件时执行。

beforeDestroy

vue组件销毁前的回调，常用于处理一些具有负面影响的代码，如定时器，事件监听等，beforeDestroy时实例还未销毁，仍然完全可用。

destroyed

destroyed时，此时Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

    <div id="destroyed">
      <el-button @click="doDestroyed">测试 beforeDestroy / destroyed</el-button>
    </div>

    doDestroyed () {
      console.log("开始销毁vue实例。。。")
      this.$destroy()  // 手动强制销毁vue实例
    }

  destroyed () {
    alert('调用destroyed()');
    // consol.log('beforeDestroy'); // vue对象销毁后 无法调用 console 实例
  },
  beforeDestroy () {
    alert('调用beforeDestroy()');
    // consol.log('beforeDestroy'); // vue对象销毁后 无法调用 console 实例
  }

vue对象销毁后 无法调用 console 实例：

consol.log('beforeDestroy'); 

测试：

errorCaptured

当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播

watch

是去监听一个值的变化，然后执行相对应的函数。

主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象，一般用于监控路由、input输入框的值特殊处理等等，它比较适合的场景是一个数据影响多个数据.

    <div id="watch">
      <p>计算结果：{{result}}</p>
      <el-button @click="calc" >计算</el-button>
    </div>

export default {
  name: "App",
  data () {
    return {
      score1: 0,
      score2: 0,
      result: 0,
    };
  },
  watch: {
    score1: function (val) {
      this.result = val + this.score2
    },
    score2: function (val) {
      this.result = val + this.score1
    }
  },
  methods: {
 calc () {
      this.score1 = Math.floor(Math.random() * 100) + 1
      this.score2 = Math.floor(Math.random() * 100) + 1
    }
}
}

测试：

methods

Vue定义方法的属性。

每当触发重新渲染时，方法的调用方式将总是再次执行函数。因此，函数必须是一个纯函数。它不能有副作用。输出只能依赖于传递给函数的值。

methods:{
	show: function(){
		console.log("显示内容")
	}
}

生命周期总结

beforecreate : 可以在这加个loading事件

created ：在这结束loading，还做一些初始数据的获取，实现函数自执行

mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情

beforeDestroy： 你确认删除XX吗？

destroyed ：当前组件已被删除，清空相关内容

常用的几个属性

el属性 ：用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。

data属性：用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。

template属性：用来设置模板，会替换页面元素，包括占位符。

methods属性：放置页面中的业务逻辑，js方法一般都放置在methods中

render属性：创建真正的Virtual Dom

computed属性：用来计算属性

watch属性：watch:function(new,old){}，监听data中数据的变化，两个参数，一个返回新值，一个返回旧值

参考代码

new Vue({
  el: '#app',
  methods: {
  },
  beforeCreate(){},
  created(){}
})

export default {
     name: "draw",
     data(){      // 定义变量source        
       return {
         source:new ol.source.Vector({wrapX: false}),

       }
     },
    props:{ //接收父组件传递过来的参数
      map:{
        //type:String
      },

    },

mounted(){   //页面初始化方法
    if (map==map){

    }
    var vector = new ol.layer.Vector({
      source: this.source
    });
    this.map.addLayer(vector);

  },
  watch: {   //监听值变化：map值
    map:function () {
      console.log('3333'+this.map);
      //return this.map
      console.log('444444'+this.map);

      var vector = new ol.layer.Vector({
        source: this.source
      });
      this.map.addLayer(vector);
    }
  },
  methods:{   //监听方法  click事件等，执行drawFeatures方法
       drawFeatures:function(drawType){}
}