Vue - 生命周期钩子理解 (8个常规钩子 + 2个额外钩子)

最新推荐文章于 2024-04-10 18:01:45 发布

小王几pl

最新推荐文章于 2024-04-10 18:01:45 发布

阅读量761

点赞数 2

分类专栏： vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/weixin_50336155/article/details/111177203

版权

本文详细探讨Vue的生命周期，分为页面渲染前和页面渲染后两个阶段，包括8个常规钩子的使用，并指出在vue的钩子函数中，使用箭头函数会改变`this`的指向，而使用`function`则保持指向vue实例。同时提到了被标签缓存的组件会触发额外的生命周期钩子。

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

Vue 生命周期钩子(8 + 2)

vue的生命周期钩子总共有八个我把他分成两部分

页面渲染前

<body>
    <!-- HTML结构 -->
    <div id="app" ref="appRef">
        {
   {
    msg }}
        <button @click="msg='我爱你们'">点我修改msg</button>
    </div>
</body>
<script>
 var app = new Vue({
   
 	//el:挂载点
	el: '#app',
	//data: 要渲染的数据
	data: {
   
		msg: '我是小王几!',
	},
// vue实例在创建
 beforeCreate(){
   
 	console.log('beforeCreate: ' + 1