vue created和mounted的区别
created官方在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),property和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el property 目前尚不可用created阶段已完成了数据的初始化。比如对象的实例化,变量赋值和方法运算。此阶段DOM并未渲染,你无法获得任何DOM元素。当你把一个普通的 JavaS
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)
},
更多推荐
所有评论(0)