Vue3 Day5-Vue3的生命周期

最新推荐文章于 2024-10-18 17:51:23 发布
最新推荐文章于 2024-10-18 17:51:23 发布
阅读量161 收藏 5
点赞数 5
文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76534754/article/details/142257868
版权

5.1 Vue3的生命周期

vue2                 vue3
beforeCreate        setup()
created             setup()
beforeMount         onBeforeMount
mounted             onMounted
beforeUpdate        onBeforeUpdate
updated             onUpdated
beforeDestroy       onBeforeUnmount
destroyed           onUnmounted
activated            onActivated
deactivated          onDeactivated
非语法糖生命周期写法

父组件 App.vue

<template>
    <div>
        <button @click="type='tab1'">显示tab1</button>
        <button @click="type='tab2'">显示tab2</button>
        <!-- 动态组件 -->
        <keep-alive>
            <component :is="type"></component>
        </keep-alive>
        <!-- 子组件 -->
        <HelloWorld v-if="show"></HelloWorld>
        <button @click="isShow">显示吗</button>
    </div>
</template>
​
<script>
    import tab1 from './components/tab1.vue'
    import tab2 from './components/tab2.vue'
    import HelloWorld from './components/HelloWorld.vue'
​
    import {
        ref
    } from 'vue'
​
    export default {
        components: {
            tab1,
            tab2,
            HelloWorld
        },
        beforeCreate() {
            console.log('beforeCreate');
        },
        created() {
            console.log('created');
        },
        beforeMount() {
            console.log('beforeMount');
        },
        mounted() {
            console.log('mounted');
        },
        beforeUpdate() {
            console.log('beforeUpdate');
        },
        updated() {
            console.log('updated');
        },
        activated() {
            console.log('activated');
        },
        deactivated() {
            console.log('deactivated');
        },
        beforeUnmount() {
            console.log('beforeUnmount');
        },
        unmounted() {
            console.log('unmounted');
        },
        setup() {
            let type = ref('tab1')
            // 子组件：探讨父子组件生命周期执行顺序
            let show = ref(true)
            let isShow = () => {
                show.value = !show.value
            }
            return {
                type,
                show,
                isShow
            }
        }
    }
</script>
​
<style scoped>
​
</style>

子组件

HelloWorld.vue

<template>
    <div>子组件</div>
</template>
​
<!-- setup取代了export default -->
<script>
    import {
        ref,
        reactive
    } from 'vue'
​
    export default {
        beforeCreate() {
            console.log('子beforeCreate');
        },
        created() {
            console.log('子created')
        },
        beforeMount() {
            console.log('子beforeMount');
        },
        mounted() {
            console.log('子mounted')
        },
        beforeUpdate() {
            console.log('子beforeUpdate');
        },
        updated() {
            console.log('子updated');
        },
        activated() {
            console.log('子activated');
        },
        deactivated() {
            console.log('子deactivated');
        },
        beforeUnmount() {
            console.log('子组件beforeUnmount');
        },
        unmounted() {
            console.log('子组件unmounted');
        }
    }
</script>
​
<style scoped>
    div {
        color: #aa0000;
    }
</style>

tab1.vue

<template>
    <div>我是tab1</div>
</template>
​
<!-- setup取代了export default -->
<script>
​
</script>
​
<style scoped>
    div {
        color: #f60;
    }
</style>

tab2.vue

<template>
    <div>我是tab2</div>
</template>
​
<!-- setup取代了export default -->
<script>
​
</script>
​
<style scoped>
    div {
        color: #f60;
    }
</style>
语法糖生命周期写法

父组件 App.vue

<template>
    <div>
        <button @click="tab11">显示tab1</button>
        <button @click="tab22">显示tab2</button>
        <!-- 动态组件 -->
        <keep-alive>
            <component :is="type"></component>
        </keep-alive>
        <!-- 子组件 -->
        <HelloWorld v-if="show"></HelloWorld>
        <button @click="isShow">显示吗</button>
    </div>
</template>
​
<script setup>
    import tab1 from './components/tab1.vue'
    import tab2 from './components/tab2.vue'
​
    import HelloWorld from './components/HelloWorld.vue'
​
    import {
        ref,
        onBeforeMount,
        onMounted,
        onBeforeUpdate,
        onUpdated,
        onBeforeUnmount,
        onUnmounted
    } from 'vue'
​
    // vue3 注册动态组件用defineOptions()
    defineOptions({
        components: {
            tab1,
            tab2
        }
    })
    onBeforeMount(() => {
        console.log('onBeforeMount');
    })
    onMounted(() => {
        console.log('onMounted');
    })
    onBeforeUpdate(() => {
        console.log('onBeforeUpdate');
    })
    onUpdated(() => {
        console.log('onUpdated');
    })
    onBeforeUnmount(() => {
        console.log('onBeforeUnmount');
    })
    onUnmounted(() => {
        console.log('onUnmounted');
    })
​
    let type = ref('tab1')
    let tab11 = () => {
        type.value = 'tab1'
    }
    let tab22 = () => {
        type.value = 'tab2'
    }
    // 子组件：探讨父子组件生命周期执行顺序
    let show = ref(true)
    let isShow = () => {
        show.value = !show.value
    }
    // vue3 父子组件生命周期执行顺序
    // 父setup-父beforeCreated-父created-父beforeMounted-子beforeCreate-子Create-子beforeMount-父activated-子mounted-父mounted
    //在setup语法糖情况下 没有beforeCreate 和created这两个生命周期 
</script>
​
<style scoped>
​
</style>

子组件

HelloWorld.vue

<template>
    <div>子组件</div>
</template>
​
<!-- setup取代了export default -->
<script setup>
    import {
        onBeforeMount,
        onMounted,
        onBeforeUpdate,
        onUpdated,
        onBeforeUnmount,
        onUnmounted
    } from 'vue'
​
    onBeforeMount(() => {
        console.log('子onBeforeMount');
    })
    onMounted(() => {
        console.log('子onMounted');
    })
    onBeforeUpdate(() => {
        console.log('子onBeforeUpdate');
    })
    onUpdated(() => {
        console.log('子onUpdated');
    })
    onBeforeUnmount(() => {
        console.log('子onBeforeUnmount');
    })
    onUnmounted(() => {
        console.log('子onUnmounted');
    })
</script>
​
<style scoped>
    div {
        color: #aa0000;
    }
</style>

tab1.vue

<template>
    <div>我是tab1</div>
</template>
​
<!-- setup取代了export default -->
<script setup>
    import {
        onActivated,
        onDeactivated
    } from 'vue'
​
    onActivated(() => {
        console.log('tab1-onActivated');
    })
    onDeactivated(() => {
        console.log('tab1-onDeactivated');
    })
</script>
​
<style scoped>
    div {
        color: #f60;
    }
</style>

tab2.vue

<template>
    <div>我是tab2</div>
</template>
​
<!-- setup取代了export default -->
<script setup>
    import {
        onActivated,
        onDeactivated
    } from 'vue'
​
    onActivated(() => {
        console.log('tab2-onActivated');
    })
    onDeactivated(() => {
        console.log('tab2-onDeactivated');
    })
</script>
​
<style scoped>
    div {
        color: #f60;
    }
</style>

5.2 hooks函数

App.vue

<template>
    <div>
        <h1>屏幕尺寸</h1>
        <div>宽度：{{width}}</div>
        <div>高度：{{height}}</div>
    </div>
</template>
​
<script setup>
    import {
        ref,
        onMounted
    } from 'vue'
    import useWindowResize from './hooks/useWindowResize.js'
    let {
        width,
        height
    } = useWindowResize()
    onMounted(() => {
        document.title = 'hooks函数'
    })
</script>
​
<style scoped>
​
</style>

hooks->useWindowResize.js

js文件名字必须以 use开头

import {
    ref,
    onMounted
} from 'vue'
​
// 封装的hooks的js文件名必须以 ‘use’开头
function useWindowResize() {
    let width = ref(0)
    let height = ref(0)
    let onResize = () => {
        width.value = window.innerWidth
        height.value = window.innerHeight
    }
​
    onMounted(() => {
        // 方法onResize 挂载时不用加括号
        window.addEventListener('resize', onResize)
        onResize()
    })
​
    return {
        width,
        height
    }
}
export default useWindowResize

5.3 toRef()的使用

非语法糖

<template>
    <div>
        <h2>{{name}}</h2>
        <h2>{{age}}</h2>
        <button @click="change">改变吧</button>
    </div>
</template>
​
<script>
    import {
        reactive,
        toRef
    } from 'vue'
    export default {
        setup() {
            let person = reactive({
                name: 'king',
                num1: {
                    num2: {
                        age: 12
                    }
                }
            })
            // toRef可以基于响应式对象上的一个属性，创建一个对应的 ref，这样创建的 ref 与其源属性保持同步：改变源属性的值将更新 ref 的值，反之亦然。
            let name = toRef(person, 'name')
            let age = toRef(person.num1.num2, 'age')
​
            let change = () => {
                name.value += '@'
                age.value++
            }
            return {
                person,
                name,
                age,
                change
            }
        }
    }
</script>
​
<style scoped>
​
</style>

语法糖

<template>
    <div>
        <h2>{{name}}</h2>
        <h2>{{age}}</h2>
        <button @click="change">改变吧</button>
    </div>
</template>
​
<script setup>
    import {
        reactive,
        toRef
    } from 'vue'
​
    let person = reactive({
        name: 'king',
        num1: {
            num2: {
                age: 12
            }
        }
    })
    // toRef可以基于响应式对象上的一个属性，创建一个对应的 ref，这样创建的 ref 与其源属性保持同步：改变源属性的值将更新 ref 的值，反之亦然。
    let name = toRef(person, 'name')
    let age = toRef(person.num1.num2, 'age')
​
    let change = () => {
        name.value += '@'
        age.value++
    }
</script>
​
<style scoped>
​
</style>

5.4 toRefs()的使用

<template>
    <div>
        <h2>{{name}}</h2>
        <h2>{{age}}</h2>
        <h2>{{school}}</h2>
        <button @click="change">改变吧</button>
    </div>
</template>
​
<script setup>
    import {
        ref,
        reactive,
        toRef,
        toRefs
    } from 'vue'
​
    let person = reactive({
        name: 'king',
        school: '观音大士学府',
        num1: {
            num2: {
                age: 12
            }
        }
    })
    // toRefs只能解构一层，多层级需要在toRefs中包裹多层例如：let {sex} = toRefs(person.job.j1)
    let {
        name,
        school
    } = toRefs(person)
    let {
        age
    } = toRefs(person.num1.num2)
​
    let change = () => {
        name.value += '@'
        age.value++
    }
​
    // 错误做法：
    // 这里不能用ref来取代toRef 因为ref定义的数据已经和原数据不是一个数据了，即非同源
    // let name = ref(person.name)
    // console.log(name); //king
</script>
​
<style scoped>
​
</style>

5.5 shallowReactive与shallowRef

<template>
    <div>
        <!-- <h2>{{name}}</h2> -->
        <h2>{{person.age}}</h2>
        <h2>{{person.work.job.num}}</h2>
        <button @click="change">改变吧</button>
    </div>
</template>
​
<script setup>
    import {
        shallowRef,
        shallowReactive
    } from 'vue'
​
    // shallowRef:只处理基本数据类型的响应式, 不进行对象的响应式处理
    // let name = shallowRef('king')
    // let person = shallowRef({
    //  age: 12,
    //  work: {
    //      job: {
    //          num: 1
    //      }
    //  }
    // })
    // let change = () => {
    //  name.value += '@'
    //  // 如果shallowRef非要处理对象的，可以使用以下方法
    //  person.value = {
    //      age: 16
    //  }
    // }
​
    // shallowReactive:只处理对象最外层属性的响应式（浅响应式）
    let person = shallowReactive({
        age: 12,
        work: {
            job: {
                num: 1
            }
        }
    })
    let change = () => {
        // 产生响应式
        // person.age++
​
        // 不产生响应式
        person.work.job.num++
        console.log(person.work.job.num);
    }
</script>
​
<style scoped>
​
</style>

5.6 readonly与shallowReadonly

<template>
    <div>
        <h2>{{person.age}}</h2>
        <h2>{{person.work.job.num}}</h2>
        <button @click="change">改变吧</button>
    </div>
</template>
​
<script setup>
    import {
        shallowRef,
        shallowReactive,
        readonly,
        shallowReadonly
    } from 'vue'
​
​
    // shallowReadonly：让一个响应式数据变为只读的（浅只读）
    // let person = shallowReadonly({
    //  age: 12,
    //  work: {
    //      job: {
    //          num: 1
    //      }
    //  }
    // })
    // let change = () => {
    //  person.age++ //只读
    // }
​
​
    // readonly: 让一个响应式数据变为只读的（深只读）
    let person = shallowReadonly({
        age: 12,
        work: {
            job: {
                num: 1
            }
        }
    })
    let change = () => {
        person.work.job.num++ //只读
        console.log(111);
    }
</script>
​
<style scoped>
​
</style>

2301_76534754
关注
Vue3学习-day2-生命周期
qq_56878873的博客
03-02 366
/一般不会写数据改变，因为会导致死循环。// dom更新之前。vue3的生命周期
vue3学习day03-vue3的生命周期、父子通信、模版引用、defineExpose
2301_76648183的博客
08-06 311
beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyedBeforeCreate/created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmountedsetup、onBeforeMount、onmounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted点击按钮
vue生命周期-axios使用-5day
liang1132872802的博客
06-18 458
人的-生命周期 一组件从 创建 到 销毁 的整个过程就是生命周期 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NGyN0KUC-1624009870469)(images/image-20210111193143574.png)] Vue_生命周期 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QxJx0QJB-1624009870473)(images/image-20210511152835915.png)] 1.1_钩子函数 目标
Vue速成day02-Vue生命周期解读
_web_Z的博客
11-10 226
首先大家需要知道什么叫做生命周期，生命周期指的是:Vue实例化创建到销毁的整个过程 了解Vue生命周期首先看一下Vue官方给的生命周期的图吧！ 单词不会建议大家下载一个有道词典，重点查一下那些红框内的单词！ 看完这张图，是不是感觉若有所思，分析一下： 首先图片最清晰的就是红框里的单词，这8个状态正式Vue内部从创建到销毁的整个过程， 如果你刚接触Vue肯定会有一个疑问！！！ <div id="app"> {{name}} </div> let app = new Vue
vue学习day05-watch侦听器（监视器）、Vue生命周期和生命周期的四个阶段、、工程化开发和脚手架Vue cli
2301_76648183的博客
07-10 1251
如果已经安装或者安装了nvm，又或者初次安装，但是出现（vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的 名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一 次。所在位置 行:1 字符: 1 + vue create vue-demo1 + ~~~ + Category）Vue cli是Vue官方提供的一个全局命令工具，可以帮助我们快速创建一个标准化基础架子。（或者安装了nvm的），可以尝试一下这个方法。Vue生命周期过程中，会。（没产生，先刷新一下）
Vue的生命周期--【day 2】
pakerder的博客
06-15 127
Vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。简单说vue的生命周期就是，从创建vue对象到销毁vue对象的过程。vue生命周期可以分为八个阶段，分别是：beforeCreate（创建前）、created（创建后）、beforeMount(载入前)、mounted（载入后）、beforeUpdate（更新前）、updated（更新后）、beforeDestroy（销毁前
【Vue.js 3.0】Day-08 Vue3 & Vue2 生命周期
day day up
12-28 267
Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：beforeDestroy改名为 beforeUnmount、destroyed改名为 unmounted。
vue项目架构搭建-3
weixin_45311714的博客
09-12 780
在前面两篇文章中已经把基础工作环境构建完成，也已经把后台核心的登录和权限问题完成了，现在手摸手，一起进入实操。去年十月份开始用 vue 做管理后台的时候毫不犹豫的就选择了 element-ui，那时候 vue2.0 刚发布也没多久，市面上也没有很多其它的 vue2.0 的 ui 框架可供选择。虽然 也有很多的不足，前期的bug也不少，但我还是选择了它，简单说一下我选择的原因吧：说了这么多优点，作为一个资深用户还是有些要抱怨的~和react老大哥 Ant Design 相比还是有一定的差距的，不管是组件的丰
Day 06 Vue--生命周期
A1L__的博客
12-18 245
Day 06 Vue–生命周期 一、Vue实例的生命周期 从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，就是Vue实例的生命周期。 二、生命周期钩子 生命周期钩子：就是生命周期事件的别名。生命周期钩子又叫生命周期函数 也叫生命周期事件。 创建期间的生命周期函数： 三 钩子函数 beforeCreate created beforeMount mounted beforeUpdate update beforeDestroy destroyed 3.1 beforeCrea
vue2-day3.zip
08-10
"day3"的教程可能会详细解释每个生命周期钩子的作用，例如`beforeCreate`、`created`、`beforeMount`、`mounted`等，以及何时在这些钩子中执行初始化操作或响应式更新。 此外，Vue还提供了一些高级特性，如计算属性...
vue2-day5.zip
08-10
6. **生命周期钩子**：Vue组件有自己的生命周期，每个阶段都有对应的钩子函数，如beforeCreate、created、beforeMount、mounted等，开发者可以在这些钩子中执行初始化或清理工作。 7. **路由管理**：在大型应用中，...
vue-demo-search-master Vue模板
08-28
5. **生命周期钩子**：Vue组件有自己的生命周期，包括`created`、`mounted`、`updated`等钩子函数，开发者可以在这些钩子中执行初始化、数据获取、DOM操作等任务。例如，搜索组件可能在`mounted`阶段初始化数据，`...
Vue Day3小兔鲜组件
08-05
Vue组件是一个可重用的Vue实例，它有自己的模板、数据、方法和生命周期。通过组合这些组件，我们可以构建出复杂的大型应用。组件的创建通常分为两种方式：全局注册和局部注册。全局注册的组件在整个应用中都可以使用...
ECMAScript标准解析及其发展历史与技术演进
qq_20245171的博客
10-15 765
ECMAScript（简称ES）是由ECMA国际（欧洲计算机制造商协会）制定的一种脚本语言规范。它是JavaScript、JScript等语言的基础，并为现代Web开发提供了强大的支持。ECMAScript标准不仅定义了语言的语法和语义，还涵盖了数据类型、对象模型和执行环境等内容，极大推动了JavaScript语言的发展。本文将全面介绍ECMAScript标准的起源、各个版本的演变、关键特性以及未来趋势，深入探讨其对Web开发及编程语言设计的影响。
深入解析：React中的信号组件与细粒度更新
Fisher的专栏
10-15 775
介绍了前端大火的signal原理，引入AutoStore为React提供了信号组件，帮助实现细粒度更新
基于Java微信小程序的水果销售系统详细设计和实现(源码+lw+部署文档+讲解等)
源码好优多
10-16 879
请联系我获取更详细的演示视频。
React入门 9：React Router
pingguocu3的博客
10-13 589
路由routing）就是通过互联的网络把信息从源地址传输到目的地址的活动。以上是中文维基百科对路由的解释。通俗的来讲，把一个地方的信息传输到他想去的目的地的过程，就叫路由。
Js面向对象
sdgfafg_25的博客
10-16 1077
程序就是对现实世界的抽象,一个事物抽象到程序中后就变成了对象,在程序的世界中，一切皆对象面向对象的编程指，程序中的所有操作都是通过对象来完成做任何事情之前都需要先找到它的对象，然后通过对象来完成各种操作一个事物通常由两部分组成：数据和功能一个对象由两部分组成：属性和方法事物的数据到了对象中，体现为属性事物的功能到了对象中，体现为方法。
2024 Bootstrap 秘籍：基础详解、实战案例与优化技巧
最新发布
weimengen的博客
10-18 637
本文介绍了使用 Bootstrap 构建网站的技巧。涵盖了 Bootstrap 的基础知识，包括响应式设计原理、HTML 结构、CSS 类作用和 JavaScript 插件。详细阐述了安装与使用方法、布局规划、组件选择及自定义样式等方面，并为每个知识点提供了丰富案例。掌握这些技巧，开发者能构建出高质量、美观且响应式的网站。
Vue项目实战：vue-datepicker组件使用详解
假设你想要创建一个可以选择特定时间段的日期选择器，可以在`data`中定义`startTime`和`endtime`，然后在`mounted`或`created`生命周期钩子中初始化它们。你还可以定义一个`limit`来设定日期范围，例如只允许选择...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值