Vue.js中已创建和已安装事件之间的区别


181

Vue.js文档描述了createdmounted事件,如下所示:

created

创建实例后同步调用。在此阶段,实例已完成对选项的处理,这意味着已设置以下内容:数据观察,计算的属性,方法,监视/事件回调。但是,安装阶段尚未开始,并且$ el属性尚不可用。

mounted

在实例刚刚挂载后用新创建的vm。$ el替换el时调用。如果将根实例安装到文档中元素,则在调用安装时,vm。$ el也将是文档中。

在服务器端渲染期间不会调用此挂钩。

我了解理论,但我有2个关于实践的问题

  1. 在任何情况下created都可以使用mounted吗?
  2. created在真实(真实代码)情况下,该事件可用于什么?

13
created会在更早的时候调用,因此触发从API后端获取数据等操作就很有意义。
Egor Stambakio

4
可以确认,Fullstack Vue书中的示例全部用于created()为api调用调度动作。
chovy

Answers:


255

created():由于选项的处理已完成,您可以访问反应性data属性,并根据需要更改它们。在此阶段,尚未安装或添加DOM。所以你不能在这里做任何DOM操作

mounted():在DOM挂载或呈现后调用。在这里,您可以访问DOM元素,并且可以执行DOM操作,例如,获取innerHTML:

console.log(element.innerHTML)

所以你的问题:

  1. Is there any case where created would be used over mounted?

Created通常用于从后端API提取数据并将其设置为数据属性。但是在mounted()不存在SSR 挂钩的情况下,您需要执行诸如仅在创建的挂钩中获取数据之类的任务

  1. What can I use the created event for, in real-life (real-code) situation?

用于从外部API获取要呈现的任何初始必需数据(例如JSON)并将其分配给任何反应性数据属性

data:{
    myJson : null,
    errors: null
},
created(){
    //pseudo code
    database.get().then((res) => {
        this.myJson = res.data;
    }).catch((err) => {
        this.errors = err;
    });
}

6
在进行创建的api调用时,是否需要等待所有异步操作完成才能进入下一个生命周期阶段?
Ominus

10
@Ominus否,它不会等待,运行此fiddle- jsfiddle.net/1k26sqrx/]并查看控制台日志
Vamsi Krishna

1
我注意到,当使用mount()而不是created()时。Vue测试电抗变量集是否确实以电抗变量存在。如果不是,则引发错误。” created()中不是这种情况“在实例上未定义属性或方法“ foo”,而是在渲染期间引用了该属性或方法。请确保此属性是反应性的。”
Rob Juurlink '19
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.