day06 生命周期

不要头秃…

已于 2022-12-20 23:02:54 修改

阅读量148

点赞数

分类专栏： Vue学习文章标签： vue.js javascript 前端

于 2022-12-19 23:30:11 首次发布

本文链接：https://blog.csdn.net/weixin_57889610/article/details/128378862

版权

Vue学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

day06 vue生命周期组件实例上的属性

单词:
update:更新
mount:挂载安装
unmount:卸载
destory: 破坏 (这里用作卸载)

1.1vue2/vue3在事件传值通信区别
Vue3组件之间的事件传值

父子之间：子传父（通过事件，携带了参数）
兄弟之间：借助父组件，借助prop传值

Vue2–事件总线 $b u s (v m 对象 - - 全局) - - V u e . p ro pt y p e .$ bus=vm对象

定义全局 $b u s ，通过$ 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 es t roy () 方法可以卸载组件，但只是在 V u e 2 中， V u e 3 中已经去除$ 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,$ parent, $roo t,$ data， $a tt rs,$ nextTick()

$e l 输出的是一个 d o m 节点，$ parent是当前组件的父组件实例
$root:当前组件树的根组件实例。如果当前实例没有父组件，那么这个值就是它自己。
$d a t a :$ 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:element–当前组件的dom
$parent
父组件实例–输出
$root
根组件实例–没有父组件就是自己
$data
从 data 选项函数中返回的对象，会被组件赋为响应式。组件实例将会代理对其数据对象的属性访问。
$a tt rs 子组件加了$ attrs后，可以拿到父组件的属性了
$refs
$refs是组件实例的属性–在js中可以通过“.”调用
在html中,加在对应的标记内，ref有参考i的意思，这里可以作为标识
$nextTick()
根组件实例–没有父组件就是自己