前端之Vue：生命期钩子、组件、计算属性、全局局部组件、组件通信、ref属性、事件总线、动态组件和 keep-alive、插槽

最新推荐文章于 2022-09-04 17:02:49 发布

嗷range

最新推荐文章于 2022-09-04 17:02:49 发布

阅读量1.2k

点赞数 18

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

本文链接：https://blog.csdn.net/LHQ626/article/details/118729443

版权

一、生命周期图

官网原图

在这里插入图片描述

注解的图

在这里插入图片描述

二、生命周期钩子函数

vue 的8个生命周期钩子函数

钩子函数	描述
beforeCreate	创建Vue实例之前调用
created	创建Vue实例成功后调用（可以在此处发送异步请求后端数据）
beforeMount	渲染DOM之前调用
mounted	渲染DOM之后调用
beforeUpdate	重新渲染之前调用（数据更新等操作时，控制DOM重新渲染）
updated	重新渲染完成之后调用
beforeDestroy	销毁之前调用
destroyed	销毁之后调用

create

let vm = new Vue()

mount
挂载，把div挂载到组件中
在这里插入图片描述
update

let vm = new Vue({
   
    el: '#box',
    data: {
   
        isShow: true    // 修改这个内容
    },
    methods: {
   
        handleClick() {
   
            console.log('我是根组件')
        }
    }
})

destroyed
组件销毁 - 给组件写一个定时器

setTimeout()    // 延迟3s干什么事
setInterval()    // 延迟3s干什么事

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
    <child v-if="isShow"></child>
    <br>
    <button @click="terminate">删除子组件</button>
    <button @click="reborn">显示子组件</button>
</div>
</body>
<script>
    Vue.component('child', {
     
        template: `
            <div>
                {
      {name}}
                <button @click="name='Darker1'">更新数据1</button>
                <button @click="name='Darker2'">更新数据2</button>
            </div>`,
        data() {
     
            return {
     
                name: 'Darker1',
            }
        },
        beforeCreate() {
     
            console.group('当前状态：beforeCreate')
            console.log('当前el状态：', this.$el)
            console.log('当前data状态：', this.$data)
            console.log('当前name状态：', this.name)
        },
        created() {
     
            console.group('当前状态：created')
            console.log('当前el状态：', this.$el)
            console.log('当前data状态：', this.$data)
            console.log('当前name状态：', this.name)
        },
        beforeMount() {
     
            console.group('当前状态：beforeMount')
            console.log('当前el状态：', this.$el)
            console.log('当前data状态：', this.$data)
            console.log('当前name状态：', this.name)
        },
        mounted() {
     
            console.group('当前状态：mounted')
            console.log('当前el状态：', this.$el)
            console.log('当前data状态：', this.$data)
            console.log('当前name状态：', this.name)
          //用的最多，向后端加载数据，创建定时器等
            console.log("页面已被vue实例渲染, data, methods已更新");
            console.log('mounted')
            this.t = setInterval(function () {
     
                console.log('daada')
            }, 3000)
          
        },
        beforeUpdate() {
     
            console.group('当前状态：beforeUpdate')
            console.log('当前el状态：', this.$el)
            console.log('当前data状态：', this.$data)
            console.log('当前name状态：', this.name)
        },
        updated() {
     
            console.group('当前状态：updated')
            console.log('当前el状态：', this.$el)
            console.log('当前data状态：', this.$data)
            console.log('当前name状态：', this.name)
        },
        beforeDestroy() {
     
            console.group('当前状态：beforeDestroy')
            console.log('当前el状态：', this.$el)
            console.log('当前data状态：', this.$data)
            console.log('当前name状态：', this.name)
        },
        destroyed() {
     
            console.group('当前状态：destroyed')
            console.log('当前el状态：', this.$el)
            console.log('当前data状态：', this.$data)
            console.log('当前name状态：', this.name)
          //组件销毁，清理定时器
            clearInterval(this.t)
            this.t = null
            console.log('destoryed')
        },


    })
    let vm = new Vue({
     
        el: '#box',
        data: {
     
            isShow: true
        },
        methods: {
     
            terminate() {
     
                this.isShow = false
            },
            reborn() {
     
                this.isShow = true
            }
        }
    })
</script>
</html>

三、组件

3.1 与后端交互的几种方式

1 向后端发送ajax请求

2 三种方式
    - 之前学过jq的ajax函数
        $.ajax({})
    - fetch：原生的，不需要导入js文件 （不是所有浏览器都支持，谷歌浏览器支持）
    - axios：vue中用的最多的

polyfill: https://github.com/camsong/fetch-ie8

3.1.1 ajax使用

<!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>
    <script src="./js/vue.js"></script>
</head>
<body>

<div id="app">
   <div v-for="data in data_list">
       <h3>{
  {data.name}}</h3>
       <img :src="data.poster" alt="">
       <h5>导演：{
  {data.director}}</h5>
   </div>

</div>
</body>
<script>
    var vm = new Vue

最低0.47元/天解锁文章

嗷range

关注

18
点赞
踩
84

收藏

觉得还不错? 一键收藏
13
评论
前端之Vue：生命期钩子、组件、计算属性、全局局部组件、组件通信、ref属性、事件总线、动态组件和 keep-alive、插槽

目录一、生命周期图官网原图注解的图二、生命周期钩子函数测试代码一、生命周期图官网原图注解的图二、生命周期钩子函数vue 的8个生命周期钩子函数钩子函数描述beforeCreate创建Vue实例之前调用created创建Vue实例成功后调用（可以在此处发送异步请求后端数据）beforeMount渲染DOM之前调用mounted渲染DOM之后调用beforeUpdate重新渲染之前调用（数据更新等操作时，控制DOM重新渲染）up
复制链接

扫一扫