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


VUE生命周期DOM对象方法、回调函数和属性详解-开发框架文库

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

Vue生命周期

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

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)中显示的属性。这些计算将被缓存,并且只在需要时更新.

例子:

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

 

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

运行程序,页面结果:

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

beforeUpdate

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

只有view上面的数据变化才会触发beforeUpdate和updated,仅属于data中的数据改变是并不能触发

updated

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

activated

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

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

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

deactivated

离开组件时执行。

beforeDestroy

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

destroyed

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

 

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

 

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

 

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

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

consol.log('beforeDestroy'); 

[Vue warn]: Error in beforeDestroy hook: "ReferenceError: consol is not defined"

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

 

测试:

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

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

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

errorCaptured

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

watch

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

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

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

 

JavaScript 全选
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
    }
}
}

 

测试:

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

methods

Vue定义方法的属性。

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

JavaScript 全选
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中数据的变化,两个参数,一个返回新值,一个返回旧值

 

参考代码

 

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

 

JavaScript 全选
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){}
}

 

内容图片-底图-高效开发.追求卓越-开发框架文库

版权声明:本文为开发框架文库发布内容,转载请附上原文出处连接
C/S框架网
评论列表

发表评论

评论内容
昵称:
关联文章

VUE生命周期DOM对象方法函数属性详解
ServiceLifetime 服务的生命周期详解
[转帖]C#如何调用非托管函数(三)-实现函数
C#.NET 定义动态对象dynamic以及属性方法
Vue中ref$refs详解 - B/S开发框架
对象
C#.NET扩展的动态对象支持动态属性方法以及Json格式与对象互转
C#构造函数(构造方法
Entity Framework(EF):DbContextConfiguration属性详解
C#构造函数,静态构造函数,私有构造函数详解
C#微信支付完成前端通知notify_url完整版源码|CSframework.com原创文章
Vue界面交互 - 按钮buttn.click函数使用
使用Vue+VSCode新建HelloWorld项目
C#方法重载(函数重载)
Vue指令大全 - 开发实践
微信支付后台服务器返回的接口通知notify_url(接口设计)-C/S框架网
WCF开发框架之ICommunicationObject 对象详解
Vue+VsCode输出HelloWorld项目及项目结构解析
IDatabase.ExecuteReader返回对象列表Func泛型函数的使用方法
EntityFrameworkCore EF ModelBuilder/OnModelCreating方法详解