程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

vue created和mouted的区别

发布于2021-05-30 07:06     阅读(1110)     评论(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)
}

控制台打印
![在这里插入图片描述](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)
},

原文链接:https://blog.csdn.net/qichangleixin/article/details/117356015




所属网站分类: 技术文章 > 博客

作者:哦八戒八戒

链接:http://www.qianduanheidong.com/blog/article/115824/a65c7e6d992a50d6e107/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

1 0
收藏该文
已收藏

评论内容:(最多支持255个字符)