文章目录
探索学习 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