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 测试效果

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

相关文章
|
9天前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
110 2
|
3月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
542 0
|
2月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
105 0
|
2月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎,秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」,成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构,实现设计到代码全流程自动化,效率提升300%,助力企业降本增效,引领“设计即生产”新时代。
238 1
|
5月前
|
JavaScript
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
763 4
|
3月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
4月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
540 77
|
5月前
|
缓存 JavaScript 前端开发
Vue 基础语法介绍
Vue 基础语法介绍
|
3月前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件,包括基础与高级示例。组件支持分段配置(如颜色、文本)、动画效果及超出进度提示等功能。同时提供了完整的代码实现,支持全局注册,并提出了优化建议,如主题支持、响应式设计等,帮助开发者更灵活地集成和定制进度条组件。资源链接已提供,适合前端开发者参考学习。
365 17