Vue基础（Vue的生命周期方法）

最新推荐文章于 2024-06-19 11:11:55 发布

weixin_45368324

最新推荐文章于 2024-06-19 11:11:55 发布

阅读量309

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_45368324/article/details/105893931

版权

Vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

• 从new Vue的创建到销毁的过程是生命周期

• 生命周期： Vue是一个构造函数，当执行这个函数时，相当于初始化vue实例；
在创建实例过程中，需要设置数据监听，编译模板，将实例挂载到DOM上，
数据更新能够让DOM也更新，在这个初始化，又会在不同阶段默认调用一些函数执行，
这些函数就是生命周期的钩子函数；

• 生命周期钩子函数，能够让咱们在初始化实例时，添加自己的代码；

• 生命周期的钩子函数中的this，会默认指向vue的实例

• beforeCreate
• 在这个钩子函数中，不能获取data中的数据
• 这个函数不能操作DOM
• 在这个钩子函数执行之前初始化事件以及生命周期

• created
• created ：这是一个钩子函数；当new Vue时，没有渲染真实的DOM之前，会执行这个钩子函数created;请求到数据立即对data中的数据赋值，那么当编译DOM结构时，采用最新的数据编译；减少DOM的渲染；一般情况下；请求数据都是在created中执行获取数据，（钩子函数中的this都指向vue的实例）
• 不能操作DOM
• 可以获取data的数据
• 可以发送请求

• beforeMount
• 执行这个钩子函数之前判断是否有el,template，编译vue

• mounted
• 挂载：把VUE实例生成的虚拟的DOM转成真实的DOM，放在了页面中，这就是挂载；
• 编译出的DOM把原有的DOM替换完毕；
• 可以获取最终的DOM元素

• beforeUpdate
• 当数据更新时，会调用beforeUpdate 和updated钩子函数；上面四个不再运行
• 更新数据之前执行

• updated
• 数据更新，虚拟的DOM更新，然后更新真实的DOM；最后触发这个函数

• beforeDestroy
• 销毁之前执行

• destroyed
• 销毁子组件，销毁观察者，事件监听者
• 元素的事件还在，但是更改数据不会再让视图进行更新了；

• activated
• 当缓存组件有被显示出来时，会触发这个钩子函数

• deactivated
• 当缓存的组件隐藏时，会触发这个钩子函数；

• errorCaptured
• 当子孙组件出错时，会调用这个钩子函数
• 此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。
此钩子可以返回 false 以阻止该错误继续向上传播。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>

<body>
    <!-- 
        beforeCreate created
        beforeMount mounted
        beforeUpdate updated
        beforeDestroy destroyed
     -->
    <div id="app">
        {{a}}
    </div>
    <div id="app1">
        {{a}}
    </div>
    <!--template vue提供的用来包裹元素的自定义标签-->
    <template id="temp1">
        <!-- 只能有一个根元素 -->
        <!-- <div></div> -->
        <div>
            <h1>{{a}}</h1>
        </div>
    </template>
    <script>
        let vm = new Vue({
            el: '#app',
            // template 只能有一个根元素包裹
            // template:'<div><h1>hello world! {{a}}</h1></div>',
            template: '#temp1',
            data: {
                a: '生命周期'
            },
            beforeCreate() {
                // 几乎不用
                //数据初始化之前在这里获取不到data中的数据
                console.log(this.a);
                debugger;
            },
            created() {
                // 数据初始化完成 可以获取和操作data中的数据
                // 一般ajax数据请求在这里实现
                console.log(this.a);
                debugger;
            },
            beforeMount() {
                // 挂载之前 判断渲染模板正确与否
                debugger
            },
            mounted() {
                // 挂载完成 视图就渲染了
                debugger
            },
            beforeUpdate() {
                // 数据更新之前
                debugger
            },
            updated() {
                // 数据更新完成 一般使用watch代替
                debugger
            },
            beforeDestroy() {
                // 销毁之前
                debugger
            },
            destroyed() {
                // 销毁完成
                debugger
            },
        });
        // 只有没有el的时候才会看 $mount
        vm.$mount('#app1')

        // vm.$destroy() 手动销毁实例
        //销毁 不会销毁之前的内容 渲染好的页面也保留下来 但是后面实例就不再起作用了
        vm.$destroy();

        console.log(vm);

        vm.a = 123;
    </script>
</body>

</html>

weixin_45368324

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础（Vue的生命周期方法）

• 从new Vue的创建到销毁的过程是生命周期• 生命周期： Vue是一个构造函数，当执行这个函数时，相当于初始化vue实例；在创建实例过程中，需要设置数据监听，编译模板，将实例挂载到DOM上，数据更新能够让DOM也更新，在这个初始化，又会在不同阶段默认调用一些函数执行，这些函数就是生命周期的钩子函数；• 生命周期钩子函数，能够让咱们在初始化实例时，添加自己的代码；• 生命周期的钩子...
复制链接

扫一扫