前端VUE3.0,DAY30，生命周期挂载的流程

最新推荐文章于 2023-04-26 09:08:31 发布
最新推荐文章于 2023-04-26 09:08:31 发布
阅读量432 收藏
点赞数 3
分类专栏： 前端 文章标签： vue.js javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48681463/article/details/120089809
版权

VUE3.0,DAY30

生命周期挂载流程

打开vue官网，点击教程、，vue实例找到生命周期图示。可以观看生命周期
在这里插入图片描述
在这里插入图片描述
由图看，vue首先进行的是一个init，初始化事件和生命周期。但数据代理还未开始，即还未出现vm._data。经过解释补充的第一小段图如下所示。
在这里插入图片描述
在执行init后调用了一个beforeCreat函数，这是第一个生命周期函数。通过代码展示该函数是否被使用。通过代码中的打印console.log输出，在网页中发现，一打开网页，什么也不点击的时候，控制台console就输出了beforeCreat函数。说明了调用。代码中使用了debugger进行加入断点调试。发现调用第一个生命周期函数后，打开控制台vue的详细内容，发现没有出现下划线data，即vm._data。验证了上图中蓝色框内此时无法通过vm访问到data中的数据，methods中的方法这一论断。

<!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>分析生命周期</title>
    <!--引入vue-->
    <script type="text/javascript" src="../vue.js">
        Vue.config.productionTip = false
    </script>
    <!--上边的vue.config选项关闭了启动时生成生产提示-->
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <!--插值语法，两组花括号，中间加入data中的变量名，则变量的内容就显示在此处-->
        <h1>当前的n值是:{{n}}</h1>
        <button @click="add">点我n+1</button>
    </div>

    <!--下边的vue.config选项关闭了启动时生成生产提示-->
    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el: '#root',
            data() {
                return {
                    n: 1
                }
            },
            methods: {
                add() {
                    this.n++
                }
            },
            beforeCreate() {
                console.log('beforeCrate');
                console.log('this')
                debugger//加一个断点，一般用来调试代码，即代码只执行到这。
            },
        })
    </script>
</body>

</html>


第二个周期函数created，经过如下代码，进行调试，最后在网页的控制台观察输出。此时居然观察到了add、数值n、有了下划线data，即_Data。

<!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>分析生命周期</title>
    <!--引入vue-->
    <script type="text/javascript" src="../vue.js">
        Vue.config.productionTip = false
    </script>
    <!--上边的vue.config选项关闭了启动时生成生产提示-->
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <!--插值语法，两组花括号，中间加入data中的变量名，则变量的内容就显示在此处-->
        <h1>当前的n值是:{{n}}</h1>
        <button @click="add">点我n+1</button>
    </div>

    <!--下边的vue.config选项关闭了启动时生成生产提示-->
    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el: '#root',
            data() {
                return {
                    n: 1
                }
            },
            methods: {
                add() {
                    this.n++
                }
            },
            beforeCreate() {
                console.log('beforeCrate');
            },
            created() {
                console.log('created');
                console.log(this);
                debugger
            },
        })
    </script>
</body>

</html>

在这里插入图片描述
继续往下，这里说Vue里边是否传（写）了el这个选项。传了的话是否有template选项。
在这里插入图片描述

继续往下，没传template（与methods，data同级别的，即在代码中缩进程度相同），进入了编译外部HTML文件，作为template。这里的template就变成了上述代码中div标签以及div标签里的内容。

在这里插入图片描述
此阶段就是开始解析模板了，例如写的add啊、@click啊、计算属性啊等等。并且出现了虚拟DOM。
在这里插入图片描述
继续往下，进入了beforeMount环节
在这里插入图片描述
继续往下，把刚才的虚拟DOM，放到页面上，并且还备份了一份在vm.$el身上。
在这里插入图片描述
继续往下，进入了mounted第四个生命周期函数，挂载完毕
在这里插入图片描述
至此初始化流程结束。

生命周期挂载流程的分支介绍

当没有el时，我们通过把代码中的el注释掉，在网页控制台console打印观看输出，程序只执行到了created就卡住不动了。
在这里插入图片描述

<!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>分析生命周期</title>
    <!--引入vue-->
    <script type="text/javascript" src="../vue.js">
        Vue.config.productionTip = false
    </script>
    <!--上边的vue.config选项关闭了启动时生成生产提示-->
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <!--插值语法，两组花括号，中间加入data中的变量名，则变量的内容就显示在此处-->
        <h1>当前的n值是:{{n}}</h1>
        <button @click="add">点我n+1</button>
    </div>

    <!--下边的vue.config选项关闭了启动时生成生产提示-->
    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            // el: '#root',
            data() {
                return {
                    n: 1
                }
            },
            methods: {
                add() {
                    this.n++
                }
            },
            beforeCreate() {
                console.log('beforeCrate');
            },
            created() {
                console.log('created');
            },
            beforeMount() {
                console.log('beforeMount');

            },
            mounted() {
                console.log('mounted');
            },
        })
    </script>
</body>

</html>

在这里插入图片描述
当没有el，又去调用vm.$mount(el)时，修改代码如下，并在控制台输入下图所示的内容vm.mount（‘#root’）时，beforemount和mounted都走下去出现了。

<!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>分析生命周期</title>
    <!--引入vue-->
    <script type="text/javascript" src="../vue.js">
        Vue.config.productionTip = false
    </script>
    <!--上边的vue.config选项关闭了启动时生成生产提示-->
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <!--插值语法，两组花括号，中间加入data中的变量名，则变量的内容就显示在此处-->
        <h1>当前的n值是:{{n}}</h1>
        <button @click="add">点我n+1</button>
    </div>

    <!--下边的vue.config选项关闭了启动时生成生产提示-->
    <script type="text/javascript">
        Vue.config.productionTip = false
        const vm = new Vue({
            // el: '#root',
            data() {
                return {
                    n: 1
                }
            },
            methods: {
                add() {
                    this.n++
                }
            },
            beforeCreate() {
                console.log('beforeCrate');
            },
            created() {
                console.log('created');
            },
            beforeMount() {
                console.log('beforeMount');

            },
            mounted() {
                console.log('mounted');
            },
        })
    </script>
</body>

</html>

在这里插入图片描述
上述代码是没写template的，如果写了template应该是什么样的呢，如下代码所示，把body中的div里的内容，转移出来，到vue中。但是在网页中确报错了。

<!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>分析生命周期</title>
    <!--引入vue-->
    <script type="text/javascript" src="../vue.js">
        Vue.config.productionTip = false
    </script>
    <!--上边的vue.config选项关闭了启动时生成生产提示-->
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">

    </div>

    <!--下边的vue.config选项关闭了启动时生成生产提示-->
    <script type="text/javascript">
        Vue.config.productionTip = false
        const vm = new Vue({
            el: '#root',
            //这里要用ES6.0里边的写法不换行才不会代码提示报错
            template: '<h1>当前的n值是:{{n}}</h1><button @click="add" > 点我n + 1</button >',
        data() {
            return {
                n: 1
            }
        },
        methods: {
            add() {
                this.n++
            }
        },
        beforeCreate() {
            console.log('beforeCrate');
        },
        created() {
            console.log('created');
        },
        beforeMount() {
            console.log('beforeMount');

        },
        mounted() {
            console.log('mounted');
        },
        })
    </script>
</body>

</html>

在这里插入图片描述
上图报错的原因是，我们代码template中有两个根节点，h2一个，button一个。经过修改如下，就正常了。

<!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>分析生命周期</title>
    <!--引入vue-->
    <script type="text/javascript" src="../vue.js">
        Vue.config.productionTip = false
    </script>
    <!--上边的vue.config选项关闭了启动时生成生产提示-->
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">

    </div>

    <!--下边的vue.config选项关闭了启动时生成生产提示-->
    <script type="text/javascript">
        Vue.config.productionTip = false
        const vm = new Vue({
            el: '#root',
            //这里要用ES6.0里边的写法不换行才不会代码提示报错
            template: `
                <div>
                    <h1> 当前的n值是:{{ n }}</h1>
                    <button @click="add" > 点我n + 1</button >
                </div>
                    `,
            data() {
                return {
                    n: 1
                }
            },
            methods: {
                add() {
                    this.n++
                }
            },
            beforeCreate() {
                console.log('beforeCrate');
            },
            created() {
                console.log('created');
            },
            beforeMount() {
                console.log('beforeMount');

            },
            mounted() {
                console.log('mounted');
            },
        })
    </script>
</body>

</html>

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

疯子的梦想＠
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
docker+nginx部署前端项目（挂载文件），通过域名直接访问
z741280229的博客
06-02 4157
预先安装好docker，这里使用的虚拟机进行实验，linux版本为centos7 拉取nginx镜像 使用docker pull nginx命令直接拉取最新nginx版本，通过 docker search nginx 命令可查看nginx版本号。根据需要选择拉取相应版本 [root@localhost ~]# docker pull nginx 查看是否拉取成功 [root@localhost ~]# docker images 如下图： 根据nginx镜像创建nginx容器并挂载主机目录
P49_生命周期——挂载流程
m0_75101438的博客
02-06 79
见上图：函数名称是beforeDestroy（）和Destroy（），在销毁vue以后（destroy()函数执行后），其参与的页面渲染成果并不会消失。并且在开发者工具中的vue栏中，找不到相关的vue。因此在这个函数里面输出this（也就是vue本身），无法找到vue的配置项目（也就是data里面的东西）。还有下图的生命周期的销毁流程。updata两对，destroy两对，最常用的mount和beforeDestroy。第二个生命周期：Creat：此时则可以找到vue的配置项目。看是否有el的配置项。
vue生命周期、vue请求、动画
凯凯凯凯凯凯凯凯
09-21 820
vue生命周期、vue请求、动画
【前端面试】Vue 你的接口请求一般放在哪个生命周期中？
Milk~每天分享一点点，技术进步一点点
09-30 9815
Vue你的接口请求一般放在哪个生命周期中？ 可以在钩子函数 created、beforeMount、mounted 中进行调用，因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。 但是推荐在 created 钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求有以下优点： 能更快获取到服务端数据，减少页面loading 时间； ssr不支持 beforeMount 、mounted 钩子函数，所以放在 created 中有助于一致性； ...
【连载】浅析React生命周期之一：挂载阶段
weixin_34376562的博客
02-08 216
学习React有一个很重要的概念需要弄清楚，那就是React组件的生命周期，以及它跟 setState 所引起的 React生命周期钩子的调起情况。React 生命周期分为挂载阶段、更新阶段和卸载阶段。下面我将使用 create-react-app 做一个简单的分析，React版本是16.8.1。 一、挂载阶段 1.1 组件初次挂载，依序执行以下方法。除了 render，其他3个函数只会执行一次。...
vue-component_day04_03.zip
07-02
当组件被挂载到DOM中时，Vue会执行组件的`created`生命周期钩子，接着是`beforeMount`，然后是`mounted`。在`mounted`钩子中，你可以确保组件已经渲染到DOM，并可以进行DOM操作，如获取元素的引用或者执行需要DOM...
Vue笔记.rar
06-10
此外，Vue实例也有自己的生命周期，包括创建、挂载、更新和销毁等阶段，理解这些阶段对于优化性能和处理复杂场景至关重要。 Day 02可能深入讲解了Vue的组件系统。Vue组件是可重用的代码块，它们可以像乐高积木一样...
基于vue的选择月日组件--源码
07-07
8. **生命周期钩子**：Vue组件有一些生命周期钩子函数，如`created`、`mounted`、`updated`等，它们在组件的不同阶段被调用。在日历组件中，`created`可能用于初始化组件状态，`mounted`可能用于挂载DOM元素后执行...
vue 计时器组件的实现代码
08-29
脚本中定义了组件的数据、计算属性、方法和生命周期钩子函数。 数据 该组件定义了以下数据： * `isStart`: 一个布尔值，表示计时器是否启动。 * `globalTimer`: 一个对象，用于存储 setInterval 对象的值。 * `...
Vue.js创建Calendar日历效果
10-21
总之，创建一个Vue.js日历组件需要理解数据绑定、事件处理、条件渲染和生命周期方法等核心概念。通过结合HTML模板和JavaScript逻辑，我们可以构建出响应用户操作的动态日历效果。在实际项目中，可能还需要考虑日期...
Vue3.0的生命周期
qq_39715380的博客
04-26 418
Vue3.0 学习与使用
前端框架之Vue(①.挂载点el与数据data)
初音的_dd疯
10-29 306
1.首先引入 vue.js 2.为div 创建id名 或 class类名 ,给自定义单词加双中括号{{ 自定义的单词}} 3.再写一对 script 标签,在里面写 var app=new Vue({ }) 4.el:"app",是挂载点,可以挂载 id名 ,class类名 ,标签名;data 后面跟需要改变的数据值 5.上代码 <div id="app"> {{ message }} </div> <!-- 开发环境版本，包含了有帮助的命令行警告 -...
生命周期（挂载、更新、销毁）
moonbaby
04-10 1134
一.引入生命周期 1.当对象的key和值相同时，可简写{opacity:opacity}简写为{opacity} 2.vm可以直接拿到data中的属性，vm._data和data一样
Vue3生命周期及当Vue3与Vue2生命周期混用时的执行顺序
qq_37635012的博客
10-09 2635
Vue3生命周期及当Vue3与Vue2生命周期混用时的执行顺序
前端面试官系列vue 01 面试官：Vue实例挂载的过程
qq_34167295的博客
04-11 229
面试官系列分析
【黄啊码】vue挂载节点的写法(mount或render)
黄啊码
10-07 737
//vue2.x写法 new Vue({ router, render: h => h(App) }).$mount("#app"); //或者 new Vue({ el: '#app', router, render: h => h(App) }); //也可以先得到Virtual DOM，再挂载 var component = new MyComponent().$mount() document.getElementById('app').appe.
69.(前端)角色列表布局与展示——创建子组件挂载子路由
m0_63953077的博客
10-25 156
创建子组件挂载子路由
手把手教你挂载
qq_41488595的博客
03-23 3263
文章目录挂载是什么，我们为什么要挂载一步步演示挂载演示环境一些知识点挂载步骤Parted命令挂载 挂载是什么，我们为什么要挂载 在我看来，Linux下的硬盘挂载，相当于是windows的分配盘符。 Linux下一切皆文件，所以，硬件在Linux下也是文件。一般的设备目录为/dev 在Windows下不分配盘符，你的硬盘无法使用。同理，Linux下你需要把硬盘挂载到挂载点上才能使用 挂载点就是我们为...
前端JS和APP交互
xuan的博客
12-18 3925
在APP中嵌入H5时，往往需要进行交互，此时就需要用到JS交互。 一、从前端调用APP的方法 （1）与Android交互 window.Android开发人员定义的对象名.Android开发人员定义的方法名(); 例如： window.android.open(); （2）与IOS交互 window.webkit.messageHandlers.ios开发人员定义的方法名.post...
vue3.0生命周期
最新发布
08-19
在 Vue 3.0 中，生命周期钩子函数有所改变。下面是 Vue 3.0 中的新生命周期函数： - `setup`: 这是一个新的组合API，用来替代 Vue 2.x 中的 `beforeCreate` 和 `created` 钩子函数。在 `setup` 函数中，你可以通过...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值