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

created

实例创建后同步调用.在这个时候 阶段,实例已完成对选项的处理,这意味着 已设置以下内容:数据观测、计算(computed)属性、 方法、监视/事件回调.但是,安装阶段还没有 已经启动,$el属性还不可用.

mounted

在实例刚刚安装到替换el的位置后调用

在服务器端呈现期间不会调用此挂钩.

我理解这个理论,但我有2 questions个关于实践:

  1. 在任何情况下,created会超过mounted
  2. 在现实生活中,我可以使用created事件做什么(真实代码) 情况如何?

推荐答案

created():由于选项的处理完成,您可以访问reactive 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),并将其分配给任何react 性数据属性

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

Javascript相关问答推荐

如何将剧作家请求对象转换为字符串,因为它只提供promise ?

我的JS代码将按照哪个序列被解释

未使用Outlet渲染子组件

Toast函数找不到其dis

使用ReactJS对Ant Design表中的空值进行排序

想要检测字符串中的所有单词

在卡信息之间切换

在时间轴完整日历中显示日期标题

reaction useEffect KeyDown for each 条目配音输出

在分区内迭代分区

每次子路由重定向都会调用父加载器函数

将状态向下传递给映射的子元素

Angular 17—每当一个布尔变量变为真时触发循环轮询,只要它保持为真

如何从html元素创建树 struct ?

Ember.js 5.4更新会话存储时如何更新组件变量

如果Arrow函数返回函数,而不是为useEffect返回NULL,则会出现错误

使用Nuxt Apollo在Piniastore 中获取产品细节

回溯替代方式

在Vercel中部署Next.js项目时获取`ReferenceError:未定义文档`

如何在独立的Angular 应用程序中添加Lucide-Angel?