vue钩子函数update一般是数据修改时执行,由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用updated钩子函数。
无论是组件本身的数据变更,还是从父组件接收到的 props 或者从vuex里面拿到的数据有变更,都会触发虚拟 DOM 重新渲染和打补丁,并在之后调用 updated。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <h2 v-color="oRed">{{msg}}</h2> <button @click="changeMsg()">修改msg</button> </div> </body> <script> //定义全局指令v-color Vue.directive("color", { //钩子函数bind--自定义指令 bind: function(el, args) { el.style.color = args.value; }, //钩子函数inserted--自定义指令 inserted: function(el) { console.log("inserted"); }, //钩子函数update--数据修改时执行 update: function(el) { console.log("修改数据时执行了update钩子函数"); }, //钩子函数componentUpdated--数据修改完执行 componentUpdated: function(el) { console.log("数据修改完执行了componentUpdated钩子函数"); }, //钩子函数unbind--只调用一次,指令与元素解绑时调用 unbind: function() { console.log("元素与指令解绑后调用unbind钩子函数"); } //销毁见下方↓ }); //实例化一个Vue对象 let vm = new Vue({ el: "#app", data: { msg: "八个", oRed: "red" }, methods: { changeMsg() { this.msg = "msg被修改了"; } } }) //销毁实例 //销毁后数据不能再修改 vm.$destroy(); </script> </html>
什么时候进updated方法?
只有事先设置好的data变量如arrData改变并且要在页面重新渲染{{ arrData }}完成之后,才会进updated方法,只改变arrData但不渲染页面是不会进的.
通过以上内容我们知道了vue updated钩子用法。感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容,希望对大家有所帮助!引用本文内容时,请注明出处!谢谢合作!