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)”网站的内容，希望对大家有所帮助！引用本文内容时，请注明出处！谢谢合作！