生命周期, created,mounted, methods , computed , watched, 通俗易懂

生命周期:

beforecreate : 一般使用场景是在加 loading事件 的时候
created :处于loading结束后,还做一些初始化,实现函数自执行(data数据已经初始化,但是DOM结构渲染完成,组件没有加载)
beforemount:处于组件创建完成,但未开始执行操作
mounted :处于发起后端请求,获取数据,配合路由钩子执行操作(DOM渲染完成,组件挂载完成 )
beforeupdate、updated:处于数据更新的前后
beforeDestroy:当前组件还在的时候,想删除组件
destroyed :当前组件已被销毁,清空相关内容
created 与 mounted 的区别

created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。
mounted 与 methods 的区别

mounted 是生命周期方法之一,会在对应生命周期时执行。

methods 是Vue实例对象上绑定的方法,供当前Vue组件作用域内使用,未调用不会执行,只执行逻辑,返回值可有可无。

computed 与 watched 的区别

computed 是计算属性,也可以理解为一个方法。其中计算的结果如果不发生改变就不会触发,且必须返回一个值并在DOM中绑定的才能取得值。他可以自动获取数据的改变。

watched 属性是手动定义的所需监听的值,不同的数据可以在其中多次定义监听值,这时会消耗一定性能,他并不能像computed那样自动改变。
————————————————
版权声明:本文为CSDN博主「Zz笑对一切」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_22227087/article/details/87256833

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Vue生命周期中的created和mounted分别表示组件创建和挂载到DOM上的时刻。 created生命周期在组件实例创建之后立即调用,此时组件的数据和方法已经初始化完成,但是DOM元素还没有被创建和渲染。 mounted生命周期在组件挂载到DOM上之后调用,此时组件的DOM元素已经被创建和渲染,可以进行DOM操作和数据绑定等操作。 ### 回答2: Vue是一种流行的JavaScript框架,它提供了一些生命周期钩子函数来帮助开发人员管理Vue实例的行为。其中两个最常用的生命周期钩子函数是created和mounted,下面将详细介绍它们的作用。 1. created生命周期 created生命周期是Vue实例创建时触发的一个生命周期钩子函数。在这个生命周期函数中,开发者可以在Vue实例还没有完全创建之前一些准备工作,比如初始化数据、添加事件监听器、初始化方法等。当Vue实例被创建时,created钩子函数将会被调用。 在created生命周期函数中,我们可以访问到Vue实例的数据和方法,但此时DOM并没有被渲染,因此在这个生命周期函数中修改DOM是无效的。也就是说,created的目的是在Vue实例创建时执行一些非视图相关的初始化。 2. mounted生命周期 mounted生命周期是Vue实例挂载到DOM时触发的一个生命周期钩子函数。在这个生命周期函数中,我们可以访问到Vue实例的所有属性和方法,同时DOM元素也已经被完全渲染好了。因此,我们可以在这里对Vue实例的属性和DOM元素进行修改,同时也可以在这里进行一些异步操作,比如请求数据等等。 在mounted生命周期函数中,我们也可以访问到Vue实例的计算属性和监听器,而且Vue的DOM更新也已经完成,可以进行各种DOM操作。因此,mounted的目的是在Vue实例完成挂载后执行一些初始化和API调用的操作。 总结: Vue的created和mounted两个生命周期函数都是非常重要的,它们的作用不同,有不同的执行时机,但都是与初始化相关的操作。created主要用于初始化Vue实例的一些数据和方法,而mounted主要用于处理Vue实例在挂载到DOM后的一些操作和API调用。理解好它们的执行顺序和作用,可以使开发人员更好地利用Vue框架进行开发工作。 ### 回答3: Vue是一种流行的JavaScript框架,具有许多生命周期钩子函数,其中最重要的是created和mounted。这两个生命周期钩子函数在Vue应用程序中发挥着重要作用,我们需要了解它们的作用和使用方式。 作为Vue实例的创建阶段的第一个生命周期钩子函数,created函数是在实例被创建之后立即调用的。这个钩子函数可以用来完成一些初始化工作,例如装载数据、监听事件等等。此时,一个Vue实例已经被创建出来了,但是它还没有和DOM进行绑定,因此,我们无法访问和修改DOM元素。此外,在created函数中,我们可以访问到Vue实例的各种属性和方法。 mounted生命周期函数是在Vue实例被挂载到DOM元素上之后立即调用的。在这个钩子函数中,我们可以访问到相应的DOM元素,对其进行修改和访问。在mounted函数中操作DOM元素更加方便,因为此时DOM元素已经准备好了,我们可以进行各种初始化工作,例如加载插件、获取数据、设置定时器、修改DOM元素等等。在mounted函数中,我们需要注意,它只会执行一次,因此,我们需要谨慎地书写代码。 总之,created和mounted是Vue生命周期中很重要的两个阶段,他们有着不同的作用和用法。created生命周期函数发生在实例被创建后,这里可以进行数据的初始化等一些操作;mounted则是发生在实例被挂载到DOM元素上之后,这里可以对DOM进行操作和访问。我们可以根据应用的实际需求,灵活使用这两个生命周期钩子函数,更好地控制Vue的运行过程。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值