Vue生命周期beforeUpdate()和updated()

1、beforeUpdate()是针对视图层的，只有页面中渲染的数据发生改变或者渲染，才会触发这个生命周期函数

<template>
  <div>
    
  </div>
</template>
export default {
        data() {
            return {
                msg: 0,
            };
        },
        mounted(){
            this.msg = 1; //msg数据改变了
        },
        beforeUpdate(){
            console.log(this.msg); //没有触发
        }
    }

<template>
  <div>
    {{msg}}
  </div>
</template>
export default {
        data() {
            return {
                msg: 0,
            };
        },
        mounted(){
            this.msg = 100; //msg数据改变了
        },
        beforeUpdate(){
            console.log(this.msg); //100
            this.msg = 200  //在beforeUpdate()中改变数据
            console.log(this.msg); //200  数据改变 但不会触发本身
        }
    }

2、updated()中修改数据是会触发beforeUpdate()的

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <h1>This is an about page</h1>
    <h1>This is an about page</h1>
      <h2>-----------------------</h2>
      {{msg}}
  </div>
</template>
<script>
    export default {
        data() {
            return {
                msg: 0,
            };
        },
        mounted(){
            this.msg = 100;
        },
        beforeUpdate(){
            console.log(this.msg); // 第一次100  第二次300
        },
        updated(){
            console.log(this.msg);//第一次100  第二次300
            this.msg = 300;
            console.log(this.msg);//第一次300  第二次300
        }
    }
</script>