Vue学习之--------Vue生命周期beforeCreate、created、beforeMount、mounted、beforeDestroy 。。。(图解详细过程)(2022/7/17)

简介: 这篇文章详细介绍了Vue的生命周期和各个阶段的钩子函数,包括`beforeCreate`、`created`、`beforeMount`、`mounted`、`beforeUpdate`、`updated`、`beforeDestroy`和`destroyed`。文章通过图解、方法说明、代码实例和测试效果,阐述了每个钩子函数的作用和使用场景,帮助读者深入理解Vue实例从创建到销毁的整个过程。

文章目录

  • 1、Vue生命周期
    • 1.1 概念
    • 1.2 图解
  • 2、钩子函数的用法说明
    • 2.1 beforeCreate()和created()的详细讲述
      • 2.1.1 方法说明
      • 2.1.2 代码实例
      • 2.1.3 测试效果
    • 2.2 beforeMount()和mounted()的详细讲述
      • 2.2.1方法说明
      • 2.2.2 代码实例
      • 2.2.3 测试效果
    • 2.3 beforeUpdate()和updated()的详细讲述
      • 2.3.1 方法说明
      • 2.3.2 代码实例
      • 2.3.3 测试效果
    • 2.4 beforeDestroy() 和 destroyed() 的详细讲述
      • 2.4.1 方法说明
      • 2.4.2 代码实例
      • 2.4.3 测试效果

1、Vue生命周期

1.1 概念

生命周期:

  • 1、又名:生命周期回调函数、生命周期函数、生命周期钩子。
  • 2、是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数。
  • 3、生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的。
  • 4、生命周期函数中的this指向是vm 或 组件实例对象。

常用的生命周期钩子:

  • 1、mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
  • 2、beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

关于销毁Vue实例

  • 1、销毁后借助Vue开发者工具看不到任何信息。
  • 2、销毁后自定义事件会失效,但原生DOM事件依然有效。
  • 3、一般不会在beforeDestroy操作数据,因为即便操作数据,也不会再触发更新流程了。

官网文档说明:

  • 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。也有一些其它的钩子,在实例生命周期的不同阶段被调用,如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。

1.2 图解

在这里插入图片描述

2、钩子函数的用法说明

2.1 beforeCreate()和created()的详细讲述

2.1.1 方法说明

beforeCreate() :数据代理还未开始、不能访问到data中的数据、method中的方法。

  • created(): 可以访问到data中的数据、method中的方法

2.1.2 代码实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>标题</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="App">
        <h1 v-text="n"></h1>
        <h1>当前n的值{
  
  {n}}</h1>
        <button @click="add">点我n+1</button>

    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false  //设置为 false 以阻止 vue 在启动时生成生产提示

        //创建Vue实例
        const vm = new Vue({
            el: '#App',
            data: {
                value: "Vue",
                n: 1
            },
            methods: {
                add() {
                    console.log('add')
                    this.n++
                }
            },
            beforeCreate() {
                console.log('beforeCreate')
                console.log(this)
                debugger
            },

            created() {
                console.log('created')
                console.log(this)
                debugger
            },
        })
    </script>

</body>

</html>

2.1.3 测试效果

在这里插入图片描述

在这里插入图片描述

2.2 beforeMount()和mounted()的详细讲述

2.2.1方法说明

beforeMount(): 页面呈现的是未经Vue编译的DOM结构。所有对DOM的操作,最终都不奏效。
mounted(): 页面中呈现的是经过Vue编译的DOM。对DOM的操作均有效。到此、初始化结束、一般再次进行:开启定时器、发送网络请求、订阅消息、绑定自定义事件、等初始化操作

2.2.2 代码实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>标题</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="App">
        <h1 v-text="n"></h1>
        <h1>当前n的值{
  
  {n}}</h1>
        <button @click="add">点我n+1</button>

    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false  //设置为 false 以阻止 vue 在启动时生成生产提示

        //创建Vue实例
        const vm = new Vue({
            el: '#App',
            data: {
                value: "Vue",
                n: 1
            },
            methods: {
                add() {
                    console.log('add')
                    this.n++
                }
            },
            beforeCreate() {
                console.log('beforeCreate')
                console.log(this)

            },

            created() {
                console.log('created')
                console.log(this)

            },

            beforeMount() {
                console.log('beforeMount')
                debugger
            },
            mounted() {
                console.log('mounted')
                debugger
            },
        })
    </script>

</body>

</html>

2.2.3 测试效果

在这里插入图片描述
在这里插入图片描述

2.3 beforeUpdate()和updated()的详细讲述

2.3.1 方法说明

beforeUpdate(): 数据是新的、页面中的数据还未更新。页面尚未和数据保持同步。
updated(): 数据是新的、页面也是新的。页面和数据保持同步

2.3.2 代码实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>标题</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="App">
        <h1 v-text="n"></h1>
        <h1>当前n的值{
  
  {n}}</h1>
        <button @click="add">点我n+1</button>

    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false  //设置为 false 以阻止 vue 在启动时生成生产提示

        //创建Vue实例
        const vm = new Vue({
            el: '#App',
            data: {
                value: "Vue",
                n: 1
            },
            methods: {
                add() {
                    console.log('add')
                    this.n++
                }
            },
            beforeCreate() {
                console.log('beforeCreate')
                console.log(this)
            },

            created() {
                console.log('created')
                console.log(this)
            },

            beforeMount() {
                console.log('beforeMount')
            },
            mounted() {
                console.log('mounted')
            },
            beforeUpdate() {
                console.log(this)
                console.log('beforeUpdate')
                debugger

            },
            updated() {
                console.log('updated')
                debugger

            },
        })
    </script>

</body>

</html>

2.3.3 测试效果

在这里插入图片描述
2.4 beforeDestory()和destoryed

在这里插入图片描述

2.4 beforeDestroy() 和 destroyed() 的详细讲述

2.4.1 方法说明

beforeDestroy(): data、methods、指令等等。都还处于可用状态、马上要销毁、一般在此阶段:关闭定时器、取消订阅信息、解绑自定义事件等收尾操作

2.4.2 代码实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>标题</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="App">
        <h1 v-text="n"></h1>
        <h1>当前n的值{
  
  {n}}</h1>
        <button @click="add">点我n+1</button>
        <button @click="bye">点我销毁vm</button>


    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false  //设置为 false 以阻止 vue 在启动时生成生产提示

        //创建Vue实例
        const vm = new Vue({
            el: '#App',
            data: {
                value: "Vue",
                n: 1
            },
            methods: {
                add() {
                    console.log('add')
                    this.n++
                },
                bye() {
                    console.log('bye')
                    this.$destroy()
                }
            },
            beforeCreate() {
                console.log('beforeCreate')
                console.log(this)
            },

            created() {
                console.log('created')
                console.log(this)
            },

            beforeMount() {
                console.log('beforeMount')
            },
            mounted() {
                console.log('mounted')
            },
            beforeUpdate() {
                console.log(this)
                console.log('beforeUpdate')
            },
            updated() {
                console.log('updated')
            },
            beforeDestroy() {
                console.log('beforeDestroy')
                debugger
            },
            destroyed() {
                console.log('destroyed')

            },
        })
    </script>

</body>

</html>

2.4.3 测试效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

相关文章
|
18天前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
103 1
|
29天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
2月前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
2月前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1067 0
|
2月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
55 1
vue学习第一章
|
2月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
51 1
|
2月前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
45 1
vue学习第四章
|
2月前
|
JavaScript 前端开发 算法
vue学习第7章(循环)
欢迎来到瑞雨溪的博客,一名热爱JavaScript和Vue的大一学生。本文介绍了Vue中的v-for指令,包括遍历数组和对象、使用key以及数组的响应式方法等内容,并附有综合练习实例。关注我,将持续更新更多优质文章!🎉🎉🎉
38 1
vue学习第7章(循环)
|
2月前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
46 1
vue学习第九章(v-model)