Vue 中创建的事件和挂载的事件之间的区别.js

javascript vue.js

2022-08-30 00:11:20

Vue.js 文档对和事件的描述如下：createdmounted

created

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

mounted

在刚刚挂载实例后调用，其中 el 被新创建的 vm.$el 替换。如果将根实例挂载到文档内元素，则在调用挂载时，vm.$el 也将在文档中。

在服务器端呈现期间不调用此挂接。

我理解这个理论，但我有2个关于实践的问题：

是否有任何情况会被使用？createdmounted
在现实生活（真实代码）情况下，我可以将事件用于什么目的？created

答案 1

created()：由于选项的处理已完成，因此您可以访问反应式属性并根据需要更改它们。在此阶段，DOM 尚未挂载或添加。因此，您无法在此处执行任何 DOM 操作data

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

console.log(element.innerHTML)

所以你的问题：

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

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

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;
    });
}

答案 2

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

mounted（）钩子是在 DOM 被挂载或渲染之后调用的，它使您能够访问 DOM 元素，并且可以执行 DOM 操作。挂载钩子的最佳用途是，如果您需要在初始渲染之前或之后立即访问DOM。