在Vue.js中创建和挂载事件之间的差异

Question

Vue。js文档将创建的和装载的事件描述如下：

created

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

mounted

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

在服务器端呈现期间不调用此钩子。

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

1. 是否有任何情况下创建的将用于挂载的？
2. 在真实情况下，我可以使用创建的事件做什么？

Answer 1

创建（）

在创建的钩子中，您将能够访问活动数据，并且事件处于活动状态。模板和虚拟DOM尚未装入或呈现。

mounted（）（DOM插入）

安装挂钩通常是最常用的挂钩。它们允许您在第一次渲染前后立即访问组件。但是，它们不会在服务器端渲染期间运行。如果需要在初始渲染之前或之后立即访问或修改组件的DOM，请使用。不要使用if：您需要在初始化时为组件获取一些数据。请改用created（或created activated for keep alive components），尤其是在服务器端渲染期间需要该数据时。

结论：

mounted（）：它将在创建组件之前执行。

创建（）：它将在创建渲染组件后执行。

Answer 2

创建（）：由于选项的处理已经完成，您可以访问反应性数据属性，并根据需要更改它们。在这个阶段，尚未安装或添加DOM。所以你不能在这里做任何DOM操作

mounted（）：在装载或呈现DOM后调用。在这里，您可以访问DOM元素，并且可以执行DOM操作，例如获取innerHTML：

console.log(element.innerHTML)

所以你的问题是：

1. 在任何情况下

Created通常用于从后端API获取数据并将其设置为数据属性。但是在SSR中，挂载（）挂接不存在，您只需要在创建的挂接中执行抓取数据等任务

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

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