• vue updated用法

        由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。

        只有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生命周期

实例生命周期详解

• beforeCreate（创建前）

        在实例初始化之后，即new Vue()之后，执行的第一钩子函数，触发钩子函数之后，Vue会开始对data中的数据进行响应化以及内部事件的初始化等操作。此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等对象内的方法和数据。

• created（创建后）

        在实例创建完成之后，即Vue对data中的数据进行响应化以及内部事件的初始化等操作之后。此时，实例已经完成以下配置：

        1、Observe Data（对data中的数据进行响应化）

        2、Init Events（内部事件初始化）

        3、watch/event事件回调

        此时，你可以调用methods对象内的方法，改变data对象中的数据，发送Ajax请求......并且这些修改可以被Vue更新并体现在页面上。

• beforeMount（挂载前）

        在实例被挂载到指定的DOM之前被调用，此时，虚拟DOM树已经生成完毕，也可以理解为render()方法首次调用之后。

• mounted（挂载后）
  

        在实例被挂载到指定的DOM之后被调用，也就是实例根据上一步生成的虚拟DOM，生成对应HTML内容，并且插入到指定的el之后。

• beforeUpdate（更新前）

        在数据更新之前被调用，此钩子函数发生在虚拟DOM重新渲染和页面对应的DOM替换之前，可以在此处更进一步地改变状态，并且不会导致重复渲染。

• updated（更新后）

        在数据更新之后被调用，此钩子函数发生在虚拟DOM重新渲染和页面对应的DOM替换之后，此时，实例内的数据已经得到更新，页面上的DOM元素也相应地替换完毕。

        注意：大多数情况下，应该避免在此期间改变实例的状态（数据），因为这可能导致beforeUpdate和updated生命周期无限循环，进而造成代码阻塞页面卡死。（此钩子函数在服务端渲染期间不被调用）

• beforeDestroy（销毁前）

        在实例销毁之前调用，此时实例内的所有的属性都还存在，可用性类似mounted钩子函数，可以进行对应生命周期的所有操作。

通常在此钩子函数内会做这样一些操作：

        1、清除组件中的定时器

        2、清除附加给DOM元素的各种持久的事件监听

        3、destroyed（销毁后）

        4、在实例销毁之后调用，此时，实例内部的所有特性都会被移除，所有的子实例也会被销毁。

        注意：页面上的DOM元素任然存在。（此钩子函数在服务端渲染期间不被调用）

        通过以上内容我们知道了vue updated通常用来干啥？感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容，希望对大家有所帮助！引用本文内容时，请注明出处！谢谢合作！