vue created和mouted的区别
发布于2021-05-30 07:06 阅读(1255) 评论(0) 点赞(1) 收藏(1)
created
官方
在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用
created阶段已完成了数据的初始化。比如对象的实例化，变量赋值和方法运算。此阶段DOM并未渲染，你无法获得任何DOM元素。
当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用Object.defineProperty 把这些 property 全部转为 getter/setter。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染官方
因为created阶段已完成了方法转化，此时如果为对象新增属性，Vue 不能追踪新增属性的变化。所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的
错误代码：
created() {
this.data['popShow'] = false
console.log(this.data)
}
控制台打印
并无popShow的getter/setter方法
当然你也可以用$set函数强制将其转为响应式
this.$set(this.data, 'popShow', false)
mounted
实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时vm.$el 也在文档内。
注意 mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用
vm.$nextTick：
mounted是在DOM渲染完之后执行，此时你可以对DOM元素进行操作。当你再mouted内更改数据时，vue不能保证立即进性页面渲染。但是如果你想基于更新后的 DOM 状态来做点什么，依然可以在数据变化之后立即使用 Vue.nextTick(callback)
this.$nextTick(() => {
this.$refs.formDialog.setData(formData)
})
在mounted中新增对象属性是可以被vue监听到的
mounted() {
this.data['popShow'] = false
console.log(this.data)
},
原文链接:https://blog.csdn.net/qichangleixin/article/details/117356015
所属网站分类: 技术文章 > 博客
作者：哦八戒八戒
链接：http://www.qianduanheidong.com/blog/article/115824/a65c7e6d992a50d6e107/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力