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

Question

Vue.js文档描述了以下事件created和mounted事件:

created

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

mounted

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

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

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

1. 有什么情况created可以使用mounted吗？
2. created在真实(真实代码)情况下,我可以将该事件用于什么？

Answer 1

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获取数据并将其设置为wostex评论的数据属性.但是在SSR mounted()挂钩不存在的情况下,您需要执行诸如仅在创建的挂钩中获取数据之类的任务

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