vue created和mounted的区别

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