Vue生命钩子函数及axios的使用

最新推荐文章于 2022-09-22 14:48:27 发布

倔强100%

最新推荐文章于 2022-09-22 14:48:27 发布

阅读量1.7k

点赞数 1

本文链接：https://blog.csdn.net/qq_40359381/article/details/106853936

版权

vue简介

Angular、React、Vue并称为前端三大框架，Angular最大的特点是把后端的一些开发模式移植到前端来实现，如MVC、依赖注入等，React得益于其创新式的VirtualDOM，Vue则借鉴了前辈angular和react的特点，是一套用于构建用户界面的渐进式JavaScript框架。

vue实例的生命周期

正如很多对象都有自己的从创建到销毁的一整套生命周期，vue也有属于自己的一套生命周期。
在这里插入图片描述

我们只需要清楚vue实例每个阶段所做的一些事情即可像spring AOP一样在对应的钩子上执行相对应的处理就可以将所需要的操作横切进去。
为了验证vue实例数据是在哪一步创建的，我做了以下测试。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>

<div id="app">
    {{"初始数据"}}
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data(){},
        beforeCreate(){alert("beforeCreate")},
        created(){alert("created")},
        beforeMount(){alert("beforeMount")},
        mounted(){alert("mounted")},
        beforeUpdate(){alert("beforeUpdate")},
        updated(){alert("updated")},
        beforeDestroy(){alert("beforeDestroy")},
        destroy(){alert("destroy")}
    })
</script>
</body>
</html>

测试结果为弹出mounted之后页面显示数据，因此可以得出mounted之后页面进行渲染，而vm对象即挂载到图中圆圈中的一个钩子函数。
在这里插入图片描述

axios的使用

axios类似于ajax请求，是进行数据交互的一种方式，由前面得知数据是在mounted后初始化的，因此可以在mounted()钩子函数中获取初始化数据，在updated以后对数据进行更新。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>

<div id="app">
    {{"初始数据"}}
    {{info}}
</div>

<script>

    let vm = new Vue({
        el: '#app',
        data(){
            return{
                info:{}
            }
        },
        beforeCreate(){alert("beforeCreate")},
        created(){alert("created")},
        beforeMount(){alert("beforeMount")},
        mounted(){
            alert("mounted")
            axios.get('data.json').then(response=>(this.info = response.data))
        },
        beforeUpdate(){alert("beforeUpdate")},
        updated(){alert("updated")},
        beforeDestroy(){alert("beforeDestroy")},
        destroy(){alert("destroy")}
    })
</script>
</body>
</html>

数据在updated以后显示，因此更加确信vm中实现的双向绑定以及数据操作等功能是挂载在beforeUpdate和updated之间的一个钩子函数。

倔强100%

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue生命钩子函数及axios的使用

vue简介Angular、React、Vue并称为前端三大框架，Angular最大的特点是把后端的一些开发模式移植到前端来实现，如MVC、依赖注入等，React得益于其创新式的VirtualDOM，Vue则借鉴了前辈angular和react的特点，是一套用于构建用户界面的渐进式JavaScript框架。vue实例的生命周期正如很多对象都有自己的从创建到销毁的一整套生命周期，vue也有属于自己的一套生命周期。我们只需要清楚vue实例每个阶段所做的一些事情即可像spring AOP一样在对应的钩子上
复制链接

扫一扫