VUE生命周期总结以及created和mounted比较

VUE生命周期总结以及created和mounted比较1. VUE的生命周期vue实例对象经历了创建、挂载、更新、销毁四个阶段。每个阶段都伴随着一些函数的自调用，这些函数称为钩子函数：vue一共有十一个钩子函数，常见的八个如下：beforeCreate在实例初始化之后，数据观测和事件配置之前被调用此时data 和 methods 以及页面的DOM结构都没有初始化什么都做...

小许的博客

3452人浏览 · 2020-02-04 22:04:16

小许的博客 · 2020-02-04 22:04:16 发布

VUE生命周期总结以及created和mounted比较

1. VUE的生命周期

vue实例对象经历了创建、挂载、更新、销毁四个阶段。每个阶段都伴随着一些函数的自调用，这些函数称为钩子函数：

vue一共有十一个钩子函数，常见的八个如下：

beforeCreate	在实例初始化之后，数据观测和事件配置之前被调用此时data 和 methods 以及页面的DOM结构都没有初始化什么都做不了
created	在实例创建完成后被立即调用此时data 和 methods已经可以使用但是html页面还没有渲染出来
beforeMount	在挂载开始之前被调用此时页面上还看不到真实数据只是一个模板页面而已
mounted	el的dom被新创建的vm.$el的dom替换，并挂载到实例上去之后调用该钩子。数据已经真实渲染到页面上在这个钩子函数里面我们可以使用一些第三方的插件
beforeUpdate	数据更新时调用，发生在虚拟DOM打补丁之前。页面上数据还是旧的
updated	由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。页面上数据已经替换成最新的
beforeDestroy	实例销毁之前调用
destroyed	实例销毁后调用

2.比较

写代码的时候有的时候用created有的时候用mounted，傻傻分不清楚，所以记录一下自己在网上查的总结：

1.在created的时候，视图中的html并没有渲染出来，所以此时如果直接去操作html的dom节点，一定找不到相关的元素，但是已经可以调用methods中的方法了
2.在mounted中，由于此时html已经渲染出来了，所以可以直接操作dom节点。但 mounted 不会承诺所有的子组件也都一起被挂载。如果希望等到整个视图都渲染完毕，那就需要使用到vm.$nextTick

总得来说，如果不涉及dom的直接操作，获取后端的数据既可以放在created里，也可以放在mounted里。如果涉及dom操作，则放在mounted里，否则会报错

如果涉及到请求数据的异步方法，最好的解决方案就是在methods里定义，然后在created和mounted里通过this.方法来调用。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^