vue的生命周期

PCthedream

已于 2022-09-12 17:00:56 修改

阅读量238

点赞数

于 2022-09-12 16:45:07 首次发布

本文链接：https://blog.csdn.net/PCthedream/article/details/126819121

版权

1.什么的vue的生命周期

Vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能

2.vue的生命周期的八个钩子函数

beforeCreat() 创建前在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。在此生命周期执行的时候，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法
created（）被创建 data 和 methods都已经被初始化好了，可以调用了
beforeMount() 挂载前在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的
mounted（）已挂载 Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行
beforeupdate（）更新前页面中的显示的数据还是旧的，data中的数据是更新后的，页面还没有和最新的数据保持同步
updated（）更新页面显示的数据和data中的数据已经保持同步了，都是最新的
beforeDestroy() 销毁前 Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ，指令，过滤器 ……都是处于可用状态。还没有真正被销毁
destroyed（）被销毁这个时候上所有的 data 和 methods ，指令，过滤器 ……都是处于不可用状态。组件已经被销毁了。

3.vue生命周期的作用是什么

它的生命周期中有多个事件钩子，让我们在控制整个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>Document</title>
</head>

<body>
    <div id="root">
        <h1>你{{ma}}</h1>
    </div>
    <script src="/vue.js"></script>
    <script>
        const vue = new Vue({
            el: '#root',
            data: {
                ma: '好'
            },
            beforeCreate() {
                console.log('beforecreate');
            },
            created() {
                console.log('created');
            },
            beforeMount() {
                console.log(' beforeMount');
            },
            mounted() {
                console.log('mounted');
            },
            beforeUpdate() {
                console.log('beforeupdate');
            },
            updated() {
                console.log('updated');
            },
            beforeDestroy() {
                console.log('beforeDestroy');
            },
            destroyed() {
                console.log('destroyed');
            },

        })
    </script>
</body>

</html>

页面的渲染：

v-model双向绑定部分代码

<!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>Document</title>
</head>

<body>
    <div id="root">
        <!-- 输入框 -->
        <!-- v-model获取输入的内容 -->
        <input type="text" v-model="name">
        <!-- 换行 -->
        <br>
        <br>
        <!-- 下拉框 -->
        <!-- v-model获取value里面的值 -->
        <select v-model="yea">
            <option value="apple">苹果</option>
            <option value="orange">橘子</option>
            <option value="banana">香蕉</option>
        </select>
        <!-- 复选框 -->
        <!-- v-model在这里获取的是true和flase -->
        <input type="checkbox" v-model="cha">
        
    </div>
    <script src="/vue.js"></script>
    <script>
        new Vue({
            el: '#root',
            data: {
                name: '请输入内容',
                yea:'apple',
                cha:'true'
            }
        })
    </script>
</body>

</html>

页面的渲染：

PCthedream

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue的生命周期

vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
复制链接

扫一扫