vuejs生命周期函数(什么是vue的生命周期)

用Vue框架,熟悉它的生命周期可以让开发更好的进行。首先先看看官网的图,详细的给出了vue的生命周期:它可以总共分为8个阶段:beforeCreate(创建前),created(创建后),beforeMount(载入前),mounted(载入后),beforeUpdate(更新前),updated(更新后),beforeDestroy(销毁前),de

大家好,又见面了,我是你们的朋友全栈君。

用Vue框架,熟悉它的生命周期可以让开发更好的进行。

首先先看看官网的图,详细的给出了vue的生命周期:

vuejs生命周期函数(什么是vue的生命周期)

它可以总共分为8个阶段:

beforeCreate(创建前),

created(创建后),

beforeMount(载入前),

mounted(载入后),

beforeUpdate(更新前),

updated(更新后),

beforeDestroy(销毁前),

destroyed(销毁后)

然后用一个实例的demo 来演示一下具体的效果:

<div id="app">{
  
  {a}}</div>

<script>
var myVue = new Vue({
  el: '#app',
  data: {
    a: 'Vue.js'
  },
  beforeCreate: function() {
    console.log('创建前')
    console.log(this.a)
    console.log(this.$el)
  },
  created: function() {
    console.log('创建之后')
    console.log(this.a)
    console.log(this.$el)
  },
  beforeMount: function() {
    console.log('mount之前')
    console.log(this.a)
    console.log(this.$el)
  },
  mounted: function() {
    console.log('mount之后')
    console.log(this.a)
    console.log(this.$el)
  },
  beforeUpdate: function() {
    console.log('更新前')
    console.log(this.a)
    console.log(this.$el)
  },
  updated: function() {
    console.log('更新完成')
    console.log(this.a)
    console.log(this.$el)
  },
  beforeDestroy: function() {
    console.log('销毁前')
    console.log(this.a)
    console.log(this.$el)
    console.log(this.$el)
  },
  destroyed: function() {
    console.log('已销毁')
    console.log(this.a)
    console.log(this.$el)
  }
})
</script>

运行后,查看控制台,

得到这个:

vuejs生命周期函数(什么是vue的生命周期)
vuejs生命周期函数(什么是vue的生命周期)

然后再methods 里面添加一个change方法:

<div id=app>{
  
  {a}}
<button v-on:click="change">change</button>
</div>


methods:{
    change(){
        this.a = 'change vue'
    }
}

点击按钮之后出现的是:

vuejs生命周期函数(什么是vue的生命周期)

这就是vue的生命周期,很简单吧。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/128444.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Windows 网络通信套接字技术

    Windows 网络通信套接字技术一、TCP/IP介绍1、TCP/IP体系结构TCP/IP协议实际上就是在物理网上的一组完整的网络协议。其中TCP是提供传输 层服务,而IP则是提供网络层服务。TCP/IP协议包括如下协议,其结构如图所示。IP: 网间协议(Internet Protocol) 负责主机间数据的路由和网络上数据的存储。 同时为ICMP,TCP,UDP提供分组发送服务。用户进程通常不需要涉及这一层。ARP: …

  • 迭代器Python_Python进阶

    迭代器Python_Python进阶迭代器迭代是访问集合元素的一种方式。迭代器是一个可以记住遍历的位置的对象。迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束。迭代器只能往前不会后退。可迭代对象我们已经知道可以对l

  • matlab心形曲线代码_matlab心形

    matlab心形曲线代码_matlab心形(1)有网格线clearx=-2:0.01:2;y=sqrt(2*sqrt(x.^2)-x.^2);z=asin(abs(x)-1)-pi./2;plot(x,y);gridon;holdon;plot(x,z);axisequal;效果图(2)无网格线t=0:0.1:2*pi;x=16*sin(t).^3;y=13*cos(t)-5*cos(2*t)-2*co…

    2022年10月17日
  • 基于Proxy思想的Android插件框架

    基于Proxy思想的Android插件框架

  • swift可选值总结

    swift可选值总结

  • 联合概率,边际概率,条件概率的区别_非条件概率和边际概率

    联合概率,边际概率,条件概率的区别_非条件概率和边际概率一时忘了联合概率、边际概率、条件概率是怎么回事,回头看看。某离散分布:联合概率、边际概率、条件概率的关系:其中,Pr(X=x,Y=y)为“XY的联合概率”;Pr(X=x)为“X的边际概率”;Pr(X=x|Y=y)为“X基于Y的条件概率”;Pr(Y=y)为“Y的边际概率”;从上式子中可以看到:Pr(X=x,Y=y)=Pr(X=x|Y=y)*Pr(Y=y)

    2022年10月18日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号