day06 生命周期
day06 vue生命周期 组件实例上的属性
单词:
update:更新
mount:挂载 安装
unmount:卸载
destory: 破坏 (这里用作卸载)
1.1vue2/vue3在事件传值通信区别
Vue3组件之间的事件传值
- 父子之间：子传父（通过事件，携带了参数）
- 兄弟之间：借助父组件，借助prop传值
Vue2–事件总线 b u s ( v m 对象 − − 全局 ) − − V u e . p r o p t y p e . bus(vm对象--全局)-- Vue.proptype. bus(vm对象−−全局)−−Vue.proptype.bus=vm对象
- 定义全局 b u s ，通过 bus，通过 bus，通过bus.on(‘事件名’,事件内容)
- 组件派发事件（$emit）,数据被全局拿到，实现共享
- 不再限制组件关系
- $bus.on是绑定事件 $bus.emit()派发事件 $bus.off()是解绑事件
面试题：Vue3中如何实现类似Vue2中的事件总线通讯：通过引入mitt库实现
//Vue2创建对象
new Vue({选项API;
}).$mount("#app");//Vue3创建对象
createApp({选项API或组合式API;
}).mount("#app");
1.2 生命周期
生命周期：就是一个从开始到结束的过程，对应哪个时间点做什么事情
例：生活中，一棵树的春天（-发芽，长新叶-）
一棵树的夏天（-新叶已经长齐，枝繁叶茂-）
一棵树的秋天（-叶子变黄–硕果累累-）
一棵树的冬天（-叶子飘落，万般皆寂静-）
提炼：不同时期做不同的事情，周而复始
1.2.1 Vue2中的生命周期函数
Vue2生命周期函数（也称为生命周期钩子）：
4个阶段（创建，挂载，更新，卸载），8个函数—在不同的阶段，会自动调用
- 创建，创建阶段一般向后台发请求准备数据–是否在挂载之前
- 挂载，将内容挂载到对应的元素上显示。**注意：**父组件先创建，再执行beforeMount,子组件开始创建和挂载，父组件再挂载完成(mounted)
- 更新，data中的数据更新时触发，v-if若导致元素消失(不会触发destroy)
- 卸载。表示组件移除。vm. d e s t r o y ( ) 方法可以卸载组件，但只是在 V u e 2 中， V u e 3 中已经去除 destroy()方法可以卸载组件，但只是在Vue2中，Vue3中已经去除 destroy()方法可以卸载组件，但只是在Vue2中，Vue3中已经去除destroy()方法
1.2.2 Vue3中的生命周期函数
在选项式API中，Vue3中和Vue2比较，换了2个单词:
- Vue2中destroy换成了unmount(卸载)，含义一样
在组合式API中，Vue3中的setup()函数实际上表示了创建阶段
1.3 组件实例上的属性$refs
组件实例上的方法和属性，都是"$"开头
- $refs是组件实例上的属性，是一个对象，里面包含了当前组件中有ref属性的所有dom元素
- $refs的使用—在js中输出的，在视图层添加ref属性作为元素的标识
1.4 组件实例上的属性 e l , el, el,parent, r o o t , root, root,data， a t t r s , attrs, attrs,nextTick()
- e l 输出的是一个 d o m 节点， el输出的是一个dom节点， el输出的是一个dom节点，parent是当前组件的父组件实例
- $root:当前组件树的根组件实例。如果当前实例没有父组件，那么这个值就是它自己。
- d a t a : data: data:data中是组件实例返回的数据，这个数据被Proxy包裹
- $attrs(attr:attribute属性)，
场景：父给子通过prop传值，子通过props接收，若有多层，逐级传递麻烦，就有了属性透传的必要性
<!-- v-bind="$attrs"表示将父级属性透传 -->
<Child v-bind="$attrs"></Child>
- $nextTick()是组件实例上的方法
Vue是声明式的，先说要怎么做，声明好之后再操作DOM: 注意DOM的更新是异步的。
$nextTick()是等DOM加载完成更新后，获取相关的值（最新的DOM值）
1.5 teleport
teleport 是传送的意思，是一个标记，标记内是要传送的内容
<!-- to属性表示要传送到哪里，to="body"表示传送给body元素，注意teleport标记在调试工具中是不显示的 -->
<teleport to='body'><div>这里是传送的内容 </div>
</teleport>
Vue2生命周期
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue2生命周期</title>
</head>
<body><div id="app"><!-- 使用组件在这里写 -->{{data}}<!-- 定义按钮--改变data --><button @click="changeData">更新data</button><!-- 测试某个元素的v-show是否引起生命周期函数的触发 --><!-- <div id="content" v-show="flag">{{data}}</div> --><!-- 测试某个元素的v-if是否引起生命周期函数的触发 --><div id="content" v-if="flag">{{data}}</div><hr><!-- 子组件 --><Com01></Com01></div><!-- 组件的视图层的定义 --><template id="com1" ><!-- 这个div在vue2中必须要加，vue3中可以不加 --><div v-if="flag1"><p >组件1</p><button @click="show">显示状态的切换</button></div></template><script src="./lib/vue.global.js"></script><script>// 组件的数据层的定义const Com01 = {template:'#com1',data(){return{flag1:true}},methods:{show(){this.flag1=false;}},beforeCreate() {console.log("子组件创建之前");},created() {console.log("子组件创建之后");},beforeMount() {console.log("子组件挂载之前");},mounted() {console.log("子组件挂载后");},beforeUpdate() {console.log("子组件数据更新前");},updated() {console.log("子组件数据更新后");},beforeDestroy() {console.log("子组件卸载前");},destroyed() {console.log("子组件已经卸载");}};const {createApp} = Vue;const app =createApp({data(){return {data:'hello--生命周期',flag:true}},methods: {// 改变数据changeData(){this.data="你好，2217";this.flag=false;}},components:{//局部注册Com01},beforeCreate() {console.log("父组件创建之前");},created() {console.log("父组件创建之后");},beforeMount() {console.log("父组件挂载之前");},mounted() {console.log("父组件挂载后");},beforeUpdate() {console.log("父组件数据更新前");},updated() {console.log("父组件数据更新后");},beforeDestroy() {console.log("父组件组件卸载前");},destroyed() {console.log("父组件组件已经卸载");},})app.mount("#app");</script>
</body>
</html>
Vue3 生命周期
vue2和vue3的生命周期就是卸载前后不一样
vue2是 卸载前:beforeDestory 卸载后destoryed
vue3是 卸载前:beforeUnmount 卸载后unmounted
beforeUnmount() {console.log("父组件组件卸载前");},unmounted() {console.log("父组件组件已经卸载");}
1.生命周期函数有哪些（Vue2和Vue3生命周期钩子的不同）
就是在卸载前后的钩子不同
vue2是 卸载前:beforeDestory 卸载后destoryed
vue3是 卸载前:beforeUnmount 卸载后unmounted
2.父子组件的加载过程
父组件创建之前
父组件创建之后
父组件挂载之前
子组件创建之前
子组件创建之后
子组件挂载之前
子组件挂载后
父组件挂载后
3.Vue2事件总线说明
beforeCreate(){console.log('父组件创建之前');},created(){console.log('父组件创建之后');},beforeMount(){console.log('父组件挂载之前');},mounted(){console.log('父组件挂载之后');},beforeUpdate(){console.log('父组件数据更新前');},updated(){console.log('父组件数据更新后');},beforeUnmount(){console.log('父组件组件卸载前');},unmounted(){console.log('父组件组件已经卸载');}4.Proxy的使用复习
proxy代理是解决开发环境中的跨域问题，正式环境的跨域需要使用nginx反向代理或者是后端解决
有三个
[[Handler]]:Object
[[Target]] :Object
[[IsRevoked]]:false
5.组件的内置属性和方法
e l 输出 el 输出 el输出el–el:element–当前组件的dom
$parent
父组件实例–输出
$root
根组件实例–没有父组件就是自己
$data
从 data 选项函数中返回的对象，会被组件赋为响应式。组件实例将会代理对其数据对象的属性访问。
a t t r s 子组件加了 attrs 子组件加了 attrs子组件加了attrs后，可以拿到父组件的属性了
$refs
$refs是组件实例的属性–在js中可以通过“.”调用
在html中,加在对应的标记内，ref有参考i的意思，这里可以作为标识
$nextTick()
根组件实例–没有父组件就是自己
day06 生命周期相关推荐
- LTV 即用户生命周期价值
20220321 https://mp.weixin.qq.com/s/kPoojfRCbvCCV4zpnCimmQ 指标计算详细介绍 数据分析|如何做好用户生命周期价值分析 LTV https:// ...
- Harmony生命周期
Harmony生命周期 系统管理或用户操作等行为,均会引起Page实例在其生命周期的不同状态之间进行转换.Ability类提供的回调机制能够让Page及时感知外界变化,从而正确地应对状态变化(比如释放 ...
- Activity在有Dialog时按Home键的生命周期
当一个Activity弹出Dialog对话框时,程序的生命周期依然是onCreate() - onStart() - onResume(),在弹出Dialog的时候并没有onPause()和onSto ...
- 横竖屏切换时Activity的生命周期
1.不设置Activity的android:configChanges时,切屏会重新调用各个生命周期,切横屏执行一次,切竖屏执行两次. 2.设置Activity的android:configChang ...
- Android中Service生命周期、启动、绑定、混合使用
一.Activity和Service如何绑定: 1.Service和Activity之间的连接可以用ServiceConnection来实现.实现一个ServiceConnection对象实例,重写o ...
- Cocos生命周期回调
Cocos Creator 为组件脚本提供了生命周期的回调函数.用户只要定义特定的回调函数,Creator 就会在特定的时期自动执行相关脚本,用户不需要手工调用它们. 目前提供给用户的生命周期回调函数 ...
- Fragment 使用 replace 的方式实现切换 以及切换的时候Fragment 生命周期
这个主要代码在activity里面 如下 public class ReplaceActivity extends AppCompatActivity implements View.OnClickL ...
- Fragment 使用 show 和 hide 的方式实现切换 以及切换的时候Fragment 生命周期
实现的效果如下图 主要的代码在activity 这里贴出来了 public class ShowActvity extends AppCompatActivity implements View.On ...
- ViewPager与Fragment结合使用，以及切换的时候Fragment 的生命周期
下面要做的效果图下图 首先我们创建一个适配器如下 public class FraPagerAdapter extends FragmentPagerAdapter {private List< ...
最新文章
- Flink1.4.0连接Kafka0.10.2时遇到的问题
- Ubuntu常见问题配置
- 第四天2017/03/31（下午1：结构体、数组）
- SQL Server 统计信息更新时采样百分比对数据预估准确性的影响
- linux远程调用的脚本在ssh时报错,linux：ssh远程调用tomcat脚本时候出错
- 韭菜翻盘致富！加拿大学者发布比特币的价格预测模型
- Linux内核：进程上下文切换
- 初学者python笔记（内置函数_1）
- Linux入门——开机启动过程浅析
- DOS命令tree的用法
- Mac下载m3u8视频
- 开源视频服务器软件MJPG-streamer研究
- 重磅长文！先进院李骁健等人：在体神经界面技术的发展-从小到大规模记录
- iconfont下载的本地文件的ttf、woff、woff2转换成base64位后引入iconfont.css使用
- python获取arduino数据可视化_Arduino数据可视化在实验教学中的应用
- 什么叫工业4.0，这篇接地气的文章终于讲懂了
- 求n的阶乘及1~n的阶乘之和
- 内网安装视频会议软件有几个步骤？
- 凝思虚拟机与主机ping不通
- 在SpringBoot中使用【阿里云OSS对象存储】存取图片