vue 生命周期 updated的使用

只有data里的变量改变并且要在页面重新渲染完成之后,才会进updated生命周期,只改变data里的值但是没有再页面上渲染该值的话并不会触发updated方法。

举例:

 <div style="width:80px; height:40px;position:absolute;background:yellow;top:0;left:0;z-index:10;">{{demoNum}}</div>

 data() {

    return {

      demoNum:100

    };

  },

  created () {

     setTimeout(()=>{this.demoNum=500},3000)

  },

  updated () {

     console.log("进入updated方法")

  },

此时延时三秒后会打印

Vue中updated和watch的区别

watch:

1.仅仅是数据发生改变的时候会侦听到

2.只是会检测到你写在watch里的那些属性,没写的就不会触发

updated:

1.执行到它的时候时候是数据发生变化且界面更新完毕

3.所有的数据发生变化都会调用

4.每次触发的代码都是同一个

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容