03 Vue 生命期钩子

188次阅读
没有评论

共计 2033 个字符,预计需要花费 6 分钟才能阅读完成。

一.Vue 生命周期图示

下图展示了实例的生命周期。你不需要立马弄明白所有的东西,不过随着你的不断学习和使用,它的参考价值会越来越高。

03 Vue 生命期钩子

二. 生命周期钩子函数作用

  • 每个 Vue 对象在创建时都要经过一系列的初始化过程

  • 在这个过程中 Vue.js 会自动运行一些叫做生命周期的的钩子函数

  • 我们可以使用这些函数, 在对象创建的不同阶段加上我们需要的代码, 实现特定的功能

三. 八种生命周期钩子函数

钩子函数 说明
beforeCreate 创建 Vue 实例之前调用
created 创建 Vue 实例成功后调用(可以在此处发送异步请求后端数据)
beforeMount 渲染 DOM 之前调用
mounted(使用最多) 渲染 DOM 之后调用
beforeUpdate 重新渲染之前调用(数据更新等操作时,控制 DOM 重新渲染)
updated 重新渲染完成之后调用
beforeDestroy 销毁之前调用
destroyed 销毁之后调用
  • create 示例
var vm = new Vue()  // 创建一个 vue 实例
  • mount 示例
<!-- 指的是将标签挂载到组件中 -->
<div id='box'></div>

<script>
    var vm = new Vue({
        el: '#box',
        data: {},})
</script>
  • update 示例
<!-- 指的是修改标签内某个属性或变量的值 -->
<div id='box'>
    <p v-show="isShow">Hello Vue!</p>
</div>

<script>
    var vm = new Vue({
        el: '#box',
        data: {isShow: true,  // 修改这个内容},
    })
</script>

四. 测试代码

  • 代码测试
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3" style="margin-top: 20px">
            <div id="app">
                You can cry,But you can not lose! --{{name}}
            </div>
        </div>
    </div>
</div>

</body>

<script>

    var vm = new Vue({
        el: '#app',
        data: {name: 'shawn'},
        methods: {},

        beforeCreate() {console.log('当前状态: 创建 Vue 对象之前,beforeCreate')
        },

        created() {console.log('当前状态:Vue 示例已经创建好了,created')
        },

        beforeMount() {console.log('当前状态: 挂在 div 之前,beforeMount')

        },

        // 用的最多,向后端加载数据,创建定时器等
        mounted() {console.log('当前状态:div 已经被挂在到组件内,mounted')

            // 挂载,三秒后执行一个任务
            // setTimeout(()=> {//     console.log('lqz is nb')
            // },3000)
            // 每 2 秒执行一个任务
            this.t = setInterval(function () {console.log('我正在每两秒执行一次')
            }, 2000)
        },

        beforeUpdate() {console.log('当前状态: 数据更新,DOM 重新渲染之前,beforeUpdate')
        },

        updated() {console.log('当前状态:DOM 渲染完成了,updated')
        },

        beforeDestroy() {console.log('当前状态: 销毁之前,beforeDestroy')
        },

        destroyed() {console.log('当前状态: 销毁之后 ( 看不到)destroyed')
            clearInterval(this.t)
            this.t = null
            console.log('destoryed')
        },
    })
</script>
</html>
  • 展示

03 Vue 生命期钩子

正文完
 
shawn
版权声明:本站原创文章,由 shawn 2023-06-16发表,共计2033字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)