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)
}

控制台打印
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210528121002573.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpY2hhbmdsZWl4aW4=,size_16,color_FFFFFF,t_70

并无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)
},
Logo

前往低代码交流专区

更多推荐