文章目录

• 探索学习 Vue 生命周期篇
• • 第三篇：生命周期-更新流程
  • • 生命周期-更新流程
    • 1. mounted（挂载后）
    • 2. beforeUpdate （更新前）
    • 3. Virtual DOM re-reander and patch
    • 4. updated（更新后）

探索学习 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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！