Vue mounted和created和 activated

我们从图中看两个节点：
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
其实两者比较好理解，通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么mounted就是不二之选。下面看一个例子（用组件）。

created => mounted =>activated

created()：在创建vue对象时，当html渲染之前就触发；但是注意，全局vue.js不强制刷新或者重启时只创建一次，也就是说，created()只会触发一次

mounted(): 是挂载vue实例后的钩子函数，钩子在主页挂载时执行一次，如果没有缓存的话，再次回到主页时，mounted还会执行，从而导致ajax反复获取数据。一般用于插件的初始化。比如GOJS初始化
mounted的时候是不保证组件已在document中。也就是说组件还没有被激活，所以activated可以理解为在mounted之后执行。在定义变量和执行函数的时候需要注意放置的钩子函数位置。

activated(): 是组件被激活后的钩子函数，钩子则不受缓存的影响，每次重新回到主页都会执行。
在使用keep-alive标签中有效，每次进入都会执行钩子中的函数

Vue mounted和created和 activated相关推荐

vue.js中created()与activated()
在vue实际项目中,很多时候会在mounted或者created请求数据接口然后渲染到页面上,但是这两个生命周期都是只会在第一次进入页面后执行,再次进入该页面时,由于vue-router的机制,会缓存 ...
Vue生命周期中mounted、created、methods、computed、watched等的区别
1.Vue生命周期中mounted和created的区别 https://blog.csdn.net/xdnloveme/article/details/78035065. 2.[Vue] 生命周期, ...
vue进入页面执行的钩子函数_解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题...
项目需求:图片加载时,当鼠标滚动至当前图片进行加载并加上上滑特效,实现这个效果需要对文档文档滚动位置和图片的当前位置进行比较.但是mounted 钩子函数执行时img图片并未加载出来也就是占位为空,导 ...
Vue项目中created生命周期重复执行，未缓存下来
Vue项目中.vue文件的created函数进行路由切换时,执行了多次. 路由切换跳转时,发现一个页面的接口和页面展示每次进入都重新请求以及渲染,没有缓存下来,对比了一下的其它页面,并没有这个问题,所 ...
Vue 生命周期中 mounted( ) 和 created( ) 的区别
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 一.什么是生命周期? 用通俗的语言来说,就是Vue中实例或者组件从创建到消灭中间经过的一系列过程.虽 ...
Vue中mounted和created的区别
生命周期钩子组件状态最佳实践 beforeCreate 实例初始化之后,this指向创建的实例,不能访问到data.computed.watch.methods上的方法和数据常用于初始化非响应式 ...
vue中的created和mounted函数不生效（created和mounted不管用）？
原因(这里只提供解决思路,不提供方法): 1.keep-alive缓存问题导致(当使用keep-alive的时候,页面第一次进入时,钩子函数的触发顺序created -> mounted -&g ...
Vue生命周期中mounted和created的区别
一.什么是生命周期? 用通俗的语言来说,就是Vue中实例或者组件从创建到消灭中间经过的一系列过程.虽然不太严谨,但是也基本上可以理解. 通过一系列实践,现在把所有遇到的问题整理一遍,今天记录一下cre ...
vue的mounted和created方法的执行
Vue的created 和 mouted的执行顺序今天在数据可视化的项目中,用了echarts和vue来进行展示.按照我的理解,先执行created中调用后台数据的接口,然后再进行echarts的展 ...
Vue中created()与activated()区别
created():在创建vue对象时,当html渲染之前就触发:但是注意,全局vue.js不强制刷新或者重启时只创建一次,也就是说,created()只会触发一次: activated():在vue ...

Vue mounted和created和 activated

Vue mounted和created和 activated相关推荐

最新文章

热门文章