Vue.js文档对创建和挂载事件的描述如下:

created

实例创建后同步调用。在这 阶段,实例已完成对选项的处理,这意味着 设置了以下内容:数据观测、计算属性、 方法,观察/事件回调。然而,安装阶段没有 已经启动,$el属性还不可用。

mounted

在实例刚挂载后调用,其中el被替换 通过新创建的vm.$el。如果根实例被挂载到 文档内元素vm。当挂载is时$el也会在文档中 调用。 在服务器端呈现期间不调用此钩子。

我理解这个理论,但我有两个关于实践的问题:

有任何情况下,创建将使用在安装? 在现实生活中,我可以使用创建的事件做什么(真实代码) 情况?


Created():由于选项的处理已经完成,您可以访问响应式数据属性,并在需要时更改它们。在这个阶段,DOM还没有被安装或添加。这里不能做任何DOM操作

mounted():在DOM被装载或渲染之后调用。在这里,你可以访问DOM元素和DOM操作,例如获取innerHTML:

console.log(element.innerHTML)

你的问题是

有任何情况下,创建将使用在安装?

Created通常用于从后端API获取数据并将其设置为数据属性。但是在SSR mounted()钩子是不存在的,你需要执行任务,如在创建的钩子中抓取数据

在现实生活(真实代码)情况下,我可以使用创建的事件做什么?

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

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

对于created()钩子,在浏览器中操作后的数据在挂载之前不会显示在DOM中。简单地说,数据需要时间来操作浏览器中看到的DOm。

挂载()钩子在DOM被挂载或呈现之后被调用,这使您能够访问DOM元素,并可以执行DOM操作。挂载钩子的最佳用途是需要在初始渲染之前或之后立即访问DOM。