VUE之生命周期钩子 VUE之计算属性与侦听器

一,VUE之生命周期钩子
生命周期 ?
从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期!

概念图
在这里插入图片描述
钩子列表

在这里插入图片描述
Vue 组件的生命周期分为四个阶段,每个阶段有两个生命钩子
(1)创建阶段:创建之前(beforebeforeCreate),创建完毕(created)
(2)挂载阶段:挂载之前(beforeMount),挂载完毕(mounted)
(3)更新阶段:更新之前(beforeUpdate),更新完毕(updated)
(4)销毁阶段:销毁之前(beforeDestroy),销毁之后(destroyed)

<div class="app">
			<p>{{info}}</p>
		</div>
		<script>
			var app = new Vue({
				el:'.app',
				data:{
					info:"信息"
				},
				methods:{
					
				},
				beforeCreate:function(){
					console.group("----beforeCreate创建之前----");
						console.log("%c%s","color:red","el为"+this.$el); //undefined
						console.log("%c%s","color:red","data为"+this.$data); //undefined
						console.log("%c%s","color:red","info为"+this.info); //undefined
					console.groupEnd();
				},
				created:function(){
					console.group("----created创建完毕----");
						console.log("%c%s","color:red","el为"+this.$el); //undefined
						console.log("%c%s","color:red","data为"+this.$data); //[object Object]
						console.log("%c%s","color:red","info为"+this.info); //信息
					console.groupEnd();
				},
				beforeMount:function(){
					console.group("----beforeMount挂载之前----");
						console.log("%c%s","color:red","el为"+this.$el);  //[object HTMLDivElement]
						console.log(this.$el);  //<div class="app"><p>{{info}}</p></div>
						console.log("%c%s","color:red","data为"+this.$data);  //[object Object]
						console.log("%c%s","color:red","info为"+this.info); //信息
					console.groupEnd();
				},
				mounted:function(){
					console.group("----mounted挂载完毕----");
						console.log("%c%s","color:red","el为"+this.$el);  //[object HTMLDivElement]
						console.log(this.$el);  //<div class="app"><p>{{info}}</p></div>
						console.log("%c%s","color:red","data为"+this.$data);  //[object Object]
						console.log("%c%s","color:red","info为"+this.info); //信息
					console.groupEnd();
				},
				//更改app.info的内容  出现
				beforeUpdate:function(){
					console.group("----beforeUpdate数据更新之前----"); 
						console.log("%c%s","color:red","el为"+this.$el); //[object HTMLDivElement]
						console.log("%c%s","color:red","data为"+this.$data);  //[object Object]
						console.log("%c%s","color:red","info为"+this.info); //更新后的信息
					console.groupEnd();
				},
				updated:function(){
					console.group("----updated数据更新完毕----");
						console.log("%c%s","color:red","el为"+this.$el); //[object HTMLDivElement]
						console.log("%c%s","color:red","data为"+this.$data);  //[object Object]
						console.log("%c%s","color:red","info为"+this.info); //更新后的信息
					console.groupEnd();
				},
				//用app.$destroy() 出现
				beforeDestroy:function(){
					console.group("----beforeDestroy销毁之前----");
						console.log("%c%s","color:red","el为"+this.$el);    //[object HTMLDivElement]
						console.log("%c%s","color:red","data为"+this.$data);  //[object Object]
						console.log("%c%s","color:red","info为"+this.info); //信息
					console.groupEnd();
				},
				destroyed:function(){
					console.group("----destroyed销毁完毕----");
						console.log("%c%s","color:red","el为"+this.$el);   //[object HTMLDivElement]
						console.log("%c%s","color:red","data为"+this.$data);  //[object Object]
						console.log("%c%s","color:red","info为"+this.info); //信息
					console.groupEnd();
				}
				
			})
		</script>

在实例化Vue的时候,有两种方式挂载数据

<!--挂载根实例 方法1:最常用的-->
		<div class="app">
			<p>{{info}}</p>
		</div>
		<script>
			var app = new Vue({
				el:'.app',
				data:{
					info:"挂载根实例 的第一种方法"
				}
			})
		</script>


	<!--挂载根实例 方法2:$mount-->
		<div class="app">
			<p>{{info}}</p>
		</div>
		<script>
			var app = new Vue({
				data:{
					info:"挂载根实例 的第二种方法"
				}
			})
			app.$mount(".app");
		</script>

DOM销毁–页面消失;Vue销毁–销毁绑定
生命周期钩子 = 生命周期函数 = 生命周期事件

二、VUE之计算属性与侦听器
计算属性缘由:模板里面不建议进行复杂逻辑操作,为了代码的整洁,放到computed计算属性。

所有的计算属性都以 函数的形式写在vue实例内的computed选项内,最终return返回计算后的结果。
在这里插入图片描述

步骤:3部曲
1.调用
2.computed选项
3.方法返回值

计算属性还可以依赖多个Vue实例的数据,只要其中任一数据变化,计算属性就会重新执行,视图也会更新。
在这里插入图片描述

计算属性包含getter和setter,上面实例都是计算属性默认用法,只是利用getter读取。
此外也可以用setter函数,当手动修改计算属性的值就像修改普通数据时,便会触发setter函数

计算属性技巧:
①计算属性可以依赖其他计算属性;
②计算属性不仅可以依赖当前vue实例的数据,还可以依赖其他实例数据
在这里插入图片描述

computed vs methods(计算属性缓存VS方法):
效果上两个是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。

可以说使用 computed 性能会更好,但是如果不希望缓存,可以使用 methods 属性。

侦听器(watch)代码是命令式且重复的。
在这里插入图片描述

小节:
(1)使用计算属性还是methods取决于是否需要缓存,当遍历大数组和做大量计算时,应当使用计算属性,除非你不希望得到缓存。
(2)因为侦听器watch相对繁琐,大多情况下推荐用计算属性computed选项处理即可。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue 3 中,生命周期钩子函数的命名和使用方式有所变化。下面是一些常用的生命周期钩子函数及其对应的 Vue 3 写法: - `beforeCreate` -> 使用 `setup()` 函数来初始化数据和设置侦听器,此时实例还未被创建。 - `created` -> 在 `setup()` 函数中进行更多的初始化工作,此时实例已被创建。 - `beforeMount` -> 使用 `onBeforeMount` 函数来注册在挂载之前要执行的逻辑。 - `mounted` -> 使用 `onMounted` 函数来注册在挂载之后要执行的逻辑。 - `beforeUpdate` -> 使用 `onBeforeUpdate` 函数来注册在更新之前要执行的逻辑。 - `updated` -> 使用 `onUpdated` 函数来注册在更新之后要执行的逻辑。 - `beforeUnmount` -> 使用 `onBeforeUnmount` 函数来注册在卸载之前要执行的逻辑。 - `unmounted` -> 使用 `onUnmounted` 函数来注册在卸载之后要执行的逻辑。 Vue 3 中还引入了一些新的生命周期钩子函数: - `beforeUnmount` -> 使用 `onBeforeUnmount` 函数来注册在卸载之前要执行的逻辑。 - `unmounted` -> 使用 `onUnmounted` 函数来注册在卸载之后要执行的逻辑。 - `errorCaptured` -> 使用 `onErrorCaptured` 函数来注册在捕获错误时要执行的逻辑。 需要注意的是,Vue 3 中的生命周期钩子函数不再作为实例方法,而是作为普通函数进行注册。例如: ```javascript import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onErrorCaptured } from 'vue'; // 在 setup() 函数中注册生命周期钩子 setup() { onBeforeMount(() => { // 在挂载之前执行的逻辑 }); onMounted(() => { // 在挂载之后执行的逻辑 }); onBeforeUpdate(() => { // 在更新之前执行的逻辑 }); onUpdated(() => { // 在更新之后执行的逻辑 }); onBeforeUnmount(() => { // 在卸载之前执行的逻辑 }); onUnmounted(() => { // 在卸载之后执行的逻辑 }); onErrorCaptured((error) => { // 错误捕获逻辑 }); } ``` 通过使用这些生命周期钩子函数,你可以在 Vue 3 中控制组件的初始化、挂载、更新、卸载等不同阶段的逻辑。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值