vue基础（四）生命周期

最新推荐文章于 2022-11-16 12:17:55 发布
最新推荐文章于 2022-11-16 12:17:55 发布
阅读量190 收藏 2
点赞数 1
分类专栏： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39520640/article/details/99133525
版权

一、创建
1、beforeCreate组件创建前

2、created组件创建后
可在此方法中操作后端的数据，数据响应视图
应用：发起Ajax请求

<body>
	<div id="app">
		<App></App>
	</div>
</body>

new Vue({
	el:'#app',
	data(){
		return{}
	},
	components:{App}
});

var App={
	templatr:'<div><Test></Test></div>',
	components:{Test}
}

vat Test={
	data(){
		return{
			msg:'hello word'
		}
	 },
	 template:'<div><div>{{msg}}</div></div>',
 	 beforeCreate(){
 	 	console.log(this.msg)
 	 },
 	 created(){
 	 	console.log(this.msg)
 	 }
}

结果是：创建前：undefined
创建后：hello word
ps:创建前获取不到msg的值

二、挂载
1、beforeMount挂载数据到DOM前

2、mounted挂载后

//Test组件
beforeMount(){
	console.log(document.getElementById('app'))
},
mounted(){
	console.log(document.getElementById('app'))
}

结果是：挂载前：

<div id="app">
  	<app></app>
 </div>

挂载后：

<div id="app">
   <div>
   	<div>hello word</div>
   </div>
 </div>

三、DOM更新
1、beforeUpdate 获取原始DOM

2、updated 获取最新DOM

//Test组件
template:'<div><div>{{msg}}</div><button @click='changeText'>改变</button></div>',

methods:{
	changeText(){
		this.msg=this.msg+'哈哈哈'
	}
}

beforeUpdate(){
	 console.log(document.getElementById('app').innerHTML)
},
updated(){
	 console.log(document.getElementById('app').innerHTML)
}

结果是：DOM更新前：

 <div><div><div>hello word</div><button>改变</button></div></div>

DOM更新后：

 <div><div><div>hello word哈哈哈</div><button>改变</button></div></div>

四、销毁
1、beforeDestroy销毁前

2、destroyed销毁后

var App={
	data(){
		return{
			isShow:true
		}
	},
	template:'
		<div>
			<Test v-if='isShow'></Test>
			<button @click='isShow=!isShow'>改变生死</button>
		</div>
	'
}

beforeDestroy(){
 	console.log(‘beforeDestroy’)
},
destroyed(){
 	console.log(‘destroyed’)
}

销毁之后若再点击改变生死按钮，会重新渲染DOM

五、停用、激活
1、acltivated激活

2、deactivated停用

template:'
  <div>
  	<keep-alive>
  		<Test v-if='isShow'></Test>
  	</keep-alive>
   	<button @click='isShow=!isShow'>改变生死</button>
  </div>
 '
}

< keep-alive >缓存，防止重复渲染DOM

acltivated(){
 	 console.log(‘组件被激活了')
},
deactivated(){
 	 console.log(‘组件被停用了’)
}
锦岁
关注
专栏目录
vue4---vue的生命周期
weixin_43899694的博客
10-21 182
Vue生命周期 生命周期：事物从诞生到消亡的过程 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。 比如 created 钩子可以用来在一个实例被创建之后执行代码： new Vue({ data: { ...
Vue生命周期总结（四个阶段，八个钩子函数）
热门推荐
小宇，要努力敲代码
10-25 6万+
生命周期就是组件或者实例，从创建到被销毁（初始化化数据、编译模板、挂载DOM、渲染一更新一渲染、卸载）的一系列过程，我们称这是Vue的生命周期。
2021-05-12
qq_43459213的博客
05-12 208
Vue的生命周期 vue实例从创建到销毁的过程，就是生命周期。也就是从开始创建，初始化数据，编译模板，挂载DOM->渲染，更新->渲染，卸载等一系列过程，我们称之为Vue的生命周期。 1. beforeCreate 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用 2. created 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)属性和方法的运算， watch/event 事
vue的生命周期
Black_stonenight的博客
07-22 5141
一、vue的生命周期共分为8个阶段、4个时期 1、beforeCreate（创建前） 2、created（创建后） 3、beforeMount（载入前） 4、mounted（载入后） 5、beforeUpdate（更新前） 6、updated（更新后） 7、beforeDestroy（销毁前） 8、destroyed（销毁后） 二、vue第一次页面加载会触发四个钩子函数 分别是：beforeCreate、created、beforeMount、mounted。 三、DOM渲染在mounted（载入后）这个周
vue生命周期共有几个阶段？分别是什么？
brain_bo的博客
01-31 2万+
一共8个阶段 1、beforeCreate（创建前） 2、created（创建后） 3、beforeMount（载入前） 4、mounted（载入后） 5、beforeUpdate（更新前） 6、updated（更新后） 7、beforeDestroy（销毁前） 8、destroyed（销毁后）   vue第一次页面加载会触发哪几个钩子函数？ beforeCreate、cre...
Vue基础/生命周期/路由
ZQD的博客
09-25 653
文章目录Vue基础知识点：生命周期：过滤器路由 vue-router前端路由核心：ui-router：vue中： Vue基础知识点： 1:全局的代表Vue.的 2:实例的代表this.或者new Vue(). 3:选项代表new Vue()的参数或者export default里边的属性 生命周期： 生命周期函数就是vue实例在某个时间点会自动执行的函数 beforeCreate created...
vue：基础：生命周期
1363648943的专栏
09-05 2310
vue生命周期、勾子函数、data 传值、实例
vue基础：生命周期函数。
谷咕咕
01-21 284
vue基础：生命周期函数。 组件挂载，更新和销毁的时候触发的一系列方法。 生命周期函数也是放在methods:{}中 可以了解成，vue在不同时期调用的方法和函数。 beforeCreate(){ console.log('实例刚刚被创建1'); }, created(){ console.log('实例已经创建完成2...
Web前端框架应用：第2章 Vue开发基础-生命周期.pptx
06-06
2.5 Vue生命周期;2.5 Vue生命周期;2.5 Vue生命周期;创建vm实例;2.5 Vue生命周期;2.5 Vue生命周期;2.5 Vue生命周期;2.5 Vue生命周期;2.5 Vue生命周期;2.5 Vue生命周期;2.5 Vue生命周期;2.5 Vue生命周期;2.5 Vue生命...
vue3+ts (源码+笔记+生命周期截图)
02-14
7. ** 生命周期钩子的改变**：Vue3 中生命周期钩子发生了变化，如 `beforeCreate` 和 `created` 合并为 `onBeforeMount`，`beforeDestroy` 和 `destroyed` 合并为 `onBeforeUnmount` 等。此外，还新增了一些生命周期...
浅析Vue实例以及生命周期
10-18
在本篇文章中，我们将深入探讨Vue实例及其生命周期的概念。 首先，Vue实例是Vue.js应用的基础，它充当了Model（数据）和View（视图）之间的桥梁，实现了数据与视图的双向绑定。创建一个最简单的Vue实例如下： ```...
vue3【生命周期讲解-详】
最新发布
蜗牛~~
11-16 1903
vue3【生命周期讲解-详】
vue实例的四个生命周期（八个钩子函数）
乔的博客
04-16 1179
一、session的状态保持及弊端 当用户第一次通过浏览器，使用账号密码访问服务器时，服务器会验证用户数据，验证成功后会在服务器写入session数据（服务器端会存储用户的session数据），向客户端浏览器返回sessionid，浏览器将sessionid存储在cookie中。 当用户再次访问服务器时，会携带sessionid发送请求，服务器会拿着sessionid从数据库获取session数据...
code ELIFECYCLE npm ERR! errno 1
weixin_39520640的博客
11-27 7510
最近遇到一个项目，npm下来报错errno -40048。 网上帖子有的说npm降级到5.3.0就行，试了直接errno -5 ，也还是不行。又有人说下载新的node.js覆盖就行，这里吐槽一下新版的node（node-v14.15.1-x64），居然要win8及以上才行，我们win7居然安装不了（公司比较多的都是win7），最后装了旧的node-v12.16.2-x64。 折腾了半天还是不行，但我的同事就直接可以跑起来的，我以为我们配置不一样，但node和npm、vue版本都是一样的。最后没办法用土方
vue v-if transition不起作用
weixin_39520640的博客
10-29 4211
<transition name="动画名"></transition> ps：过渡的元素只能是以下之一： 条件渲染 (使用 v-if) 条件展示 (使用 v-show) 动态组件 组件根节点 自定义过渡动画的，记得在css中修改以下的类名： 动画名-enter 进入前效果 动画名-enter-active 进入的过渡时间和函数 动画名-enter-to 进入后效果 动画名-leave 离开前效果 动画名-le
openlayers+vue：底图切换（天地图）
weixin_39520640的博客
07-19 3596
1、创建项目 2、安装ol依赖 npm install ol 3、在index.html页面引入天地图 <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=d0cf74b31931aab68af181d23fa23d8d"></script> <templ...
vue基础（二）：组件(props、$ref、$emit、<solt>、.native）
weixin_39520640的博客
08-14 3389
1、父子组件 //父组件 <template> <div> <h1>我是父组件！</h1> <child></child> </div> </template> <script> import Child from '../components/child.vue' export...
vue报错总结
weixin_39520640的博客
09-19 3217
1、building modules 1/1 modules 0 activeevents.js:174 throw er; // Unhandled ‘error’ event 没有设置host，或者host不对。在 \config\index.js里面更改 const path = require('path') module.exports = { dev: { /...
记vue分步引导的坑 driver.js 与 vue-tour html2canvas 与 dom-to-image
weixin_39520640的博客
03-22 3196
由于项目需要加入用户指引，于是我就找了下相关的插件。一开始使用driver.js做了个demo感觉还是不错的，于是就准备使用driver.js，修改下样式就行了。 但是真正用设计图来设置时却发现了问题，由于项目是用vue编写的，根据设计图拆分了很多可复用的组件。设计图中很多需要高亮的dom节点都是在好几个组件之下的，driver.js获取不到，而且部分dom高亮时只有一个白色的框框覆盖，整了两天发现搞不定于是准备换插件。 在帖子上看到有人使用vue-tour插件，缺点是他的高亮跟没高亮一样，完全看不出来，但
vue与react生命周期对比分析
Vue 的生命周期是指一个 Vue 实例从创建到销毁的过程中的各个阶段，每个阶段都有特定的任务和可以进行的操作。Vue 的生命周期主要分为以下几个关键阶段： 1. **初始化**： - `beforeCreate`：在实例创建之前被调用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值