18. VUE created 方法作用

本文深入解析Vue实例的生命周期,重点介绍created和mounted两个关键阶段的作用与区别。通过实例演示,阐述了在不同生命周期钩子中执行特定任务的重要性,如数据初始化和DOM操作。

一般可以在created函数中调用ajax获取页面初始化所需的数据。

实例的生命周期:

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如,实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ,然后在数据变化时更新 DOM 。在这个过程中,实例也会调用一些 生命周期钩子 ,这就给我们提供了执行自定义逻辑的机会。例如,created 这个钩子在实例被创建之后被调用:

var vm = new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
})
// -> "a is: 1"

我们从图中看两个节点:

created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。

mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。

其实两者比较好理解,通常created使用的次数多,而mounted通常是在一些插件的使用或者组件的使用中进行操作,比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步,而如果你写入组件中,你会发现在created中无法对chart进行一些初始化配置,一定要等这个html渲染完后才可以进行,那么mounted就是不二之选。下面看一个例子(用组件)。

 

参考:https://www.jb51.net/article/137438.htm

转载于:https://www.cnblogs.com/shix0909/p/11218210.html

在 Uniapp 里,app.vue 要调用 index.vue 方法,可通过以下几种途径实现: ### 事件总线(Event Bus) 借助事件总线,能在组件间传递消息。首先,要创建一个事件总线实例,接着在 index.vue 里监听事件,在 app.vue 中触发事件。 ```javascript // event-bus.js import Vue from 'vue'; export const eventBus = new Vue(); // index.vue import { eventBus } from './event-bus.js'; export default { methods: { indexMethod() { console.log('index.vue 方法被调用'); } }, created() { eventBus.$on('callIndexMethod', this.indexMethod); }, beforeDestroy() { eventBus.$off('callIndexMethod', this.indexMethod); } } // app.vue import { eventBus } from './event-bus.js'; export default { methods: { callIndexMethod() { eventBus.$emit('callIndexMethod'); } }, onShow() { this.callIndexMethod(); } } ``` ### Vuex 状态管理 要是项目用了 Vuex,可在 Vuex 的 actions 里定义方法,然后在 index.vue 和 app.vue 中调用这些方法。 ```javascript // store/index.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ actions: { callIndexMethod({ commit }) { // 在这里执行 index.vue 中的方法逻辑 console.log('index.vue 方法被调用'); } } }); // index.vue import { mapActions } from 'vuex'; export default { methods: { ...mapActions(['callIndexMethod']) } } // app.vue import { mapActions } from 'vuex'; export default { methods: { ...mapActions(['callIndexMethod']) }, onShow() { this.callIndexMethod(); } } ``` ### 全局事件 在 app.vue 里定义全局事件,再在 index.vue 中监听此事件。 ```javascript // app.vue export default { methods: { callIndexMethod() { uni.$emit('callIndexMethod'); } }, onShow() { this.callIndexMethod(); } } // index.vue export default { methods: { indexMethod() { console.log('index.vue 方法被调用'); } }, created() { uni.$on('callIndexMethod', this.indexMethod); }, beforeDestroy() { uni.$off('callIndexMethod', this.indexMethod); } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值