Vue 手记 day-4

只要心中有光

于 2021-09-29 09:06:21 发布

阅读量64

点赞数

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/i_bilibili/article/details/120521684

版权

本文探讨了Vue组件从创建到销毁的生命周期，包括挂载、更新和销毁四个阶段的关键方法。强调数据变化与页面更新的异步性质，并通过实例说明了$nextTick在更新DOM时的作用。同时，介绍了如何通过ref属性访问子组件的方法。

摘要由CSDN通过智能技术生成

Vue 生命周期是从创建到销毁的过程

生命周期
在这里插入图片描述

创建挂载更新销毁四大阶段八个方法
在这里插入图片描述
数据变化,页面更新的动作是异步的

<子组件 ref=‘Demo’></子组件>

this.$refs.Demo.方法

1.在组件标签身上,ref=‘别名’
2.在恰当的时机,使用this.$refs.别名 - 对应组件对象获取在原地

点击时 先加载count++ -> data数据改变 (异步) ->
由于this.$nextTick使console.log(this.$refs.countP.innerHTML)成为了异步,所以按排队顺序为 先加载count++ -> data数据改变 (异步) -> 生成新的虚拟DOM和旧的虚拟DOM结构对比 -> 更新真实DOM 
this.$nextTick(()=>{
console.log(this.$refs.countP.innerHTML)
})
----------------------------------------

this.count++

this.$nextTick(()=>{
console.log(this.$refs.countP.innerHTML)
})