Vue 生命周期篇探索-第三篇：生命周期-更新流程

探索学习 Vue 生命周期篇

Vue 官网： https://cn.vuejs.org/v2/guide/forms.html
尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通 https://www.bilibili.com/

第三篇：生命周期-更新流程

生命周期-更新流程

• 

1. mounted（挂载后）

• when data change 当数据发生变化的时候就会执行下一步操作

2. beforeUpdate （更新前）

• beforeUpdate (此时：数据是新的，但页面旧的，即：页面尚未和数据保持同步。)
  直接上代码，观察现象

  <div id="root">
      <h1>你好,{{name}}</h1>
      <hr/>
      <h2>当前的n 值为{{n}}</h2>
      <button @click="add"> 点我n++</button>
  </div>
  <script type="text/javascript">
      Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
      new Vue({
          el: "#root",
          data: {
          name: "安锐捷",
          n: 1,
          },
          methods: {
              add(){
                  this.n++
              }
          },
          beforeCreate() {
              console.log("beforeCreate");
              console.log("beforeCreate:",this);
          },
          created() {
              console.log("created");
              console.log("created:",this);
          },
          beforeMount() {
              console.log("beforeMount");
              console.log("beforeMount:",this);
          },
          mounted() {
              console.log("mounted");
              console.log("mounted:",this);
          },
          beforeUpdate() {
              console.log("beforeUpdate");
              console.log("beforeUpdate:",this.n);
              debugger
          },
      })
  </script>
  

• F12 观察 页面渲染情况，内存情况
  
• 面试题目
  • 面试官在此处可能会问，在Vue生命周期中哪个钩子函数页面跟内存中数据会尚未保持同步呢？
  • 就是这个beforeupdate

3. Virtual DOM re-reander and patch

• Virtual DOM re-reander and patch (虚拟DOM 重新渲染 patch 新旧虚拟DOM比对)
  根据新数据，生成新的虚拟DOM，随后与旧的虚拟DOM进行比较，最终完成页面更新，即完成了Model —》View 更新

4. updated（更新后）

• 此时数据是新的，页面也是新的， 即 页面和数据保持了同步
• 上代码，加断点 直接观察

	<div id="root">
	        <h1>你好,{{name}}</h1>
	        <hr/>
	        <h2>当前的n 值为{{n}}</h2>
	        <button @click="add"> 点我n++</button>
	    </div>
	    <script type="text/javascript">
	        Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
	        new Vue({
	            el: "#root",
	            data: {
	            name: "安锐捷",
	            n: 1,
	            },
	            methods: {
	                add(){
	                    this.n++
	                }
	            },
	            beforeCreate() {
	                console.log("beforeCreate");
	                console.log("beforeCreate:",this);
	            },
	            created() {
	                console.log("created");
	                console.log("created:",this);
	            },
	            beforeMount() {
	                console.log("beforeMount");
	                console.log("beforeMount:",this);
	            },
	            mounted() {
	                console.log("mounted");
	                console.log("mounted:",this);
	            },
	            beforeUpdate() {
	                console.log("beforeUpdate");
	                console.log("beforeUpdate:",this.n);
	            },
	            updated() {
	                console.log("updated");
	                console.log("updated:",this.n);
	                debugger
	            },
	        })
	    </script>

• F12 页面效果如下
  

• 《狱中题壁》谭嗣同
• 望门投止思张俭，忍死须臾待杜根。
• 我自横刀向天笑，去留肝胆两昆仑。

创作不易，欢迎 多多点赞，收藏 各节里面总结的还有不到位的欢迎指证
邮箱：pymxb1991@163.com
微信：py_mxb