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

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

created

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

.

.

.
mounted

在实例刚刚挂载后调用,其中el被替换 通过新创建的vm.$el。如果根实例被挂载到 文档内元素vm。当挂载is时$el也会在文档中 调用。< / p >

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

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

  1. 有没有任何情况下,created将被用于mounted?
  2. 在现实生活中,我可以使用created事件来做什么(real-code) 情况?李< / >
159384 次浏览

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获取数据并将其设置为数据属性。但是在SSR mounted()钩子是不存在的,你需要执行任务,如在创建的钩子中抓取数据

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

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

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