这篇文章简单介绍一下数据的更新流程，过程及其简单。
主要是两个函数，beforeUpdate、updated
触发这个的原则就是：data中的数据发生了变化。b
当data中数据发生变化时，beforeUpdate函数首先响应，此时数据是最新数据，页面还没有得到响应。比如下面这样，我们在beforUpdate中打断点。
当我点击button时，button将data中的值加1，控制台率先打印这个值，此时页面还没来得及渲染。
当执行完beforeUpdate后，再执行updated，此时数据是新的，页面也是新的，如下图：
可以看到，此时页面上的值和数据是统一的，而且是最新的。
参考代码：
<!DOCTYPE html>
<html lang="en">
<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>vue测试</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="root">
<h2>{{n}}</h2>
<button @click="add"> 点我加1</button>
</div>
<script type="text/javascript">
new Vue({
el: '#root',
data: {
n: 1,
},
methods: {
add() {
this.n++
},
},
beforeCreate() {
console.log("beforeCreate")
},
created() {
console.log("created")
},
beforeMount() {
console.log("beforeMount")
},
mounted() {
console.log("mounted")
},
beforeUpdate() {
console.log("beforeUpdate")
console.log(this.n)
debugger
},
updated() {
console.log("updated")
}
})
</script>
</body>
</html>
本文链接：https://www.longkui.site/program/frontend/vuevue-js0314/5441/