vue的学习之路(Vue 生命周期)

简介: vue的学习之路(Vue 生命周期)

vue的学习之路(Vue 生命周期)

在学习vue生命周期之前,建议先学习


Vue学习之路(基础篇)

vue实现购物车功能

vue的学习之路(Axios 基本使用)

Vue 实例生命周期 ===> java 对象生命周期(初始化阶段 运行阶段 销毁阶段 ) 生命周期钩子 ====> 生命周期函数

Vue实例从创建到销毁过程中自动触发一些列函数 ====> Vue生命周期函数(钩子)


new Vue({   
el:"",
data:{},
computed:{},
methods:{}
//声明周期函数定义位置
beforeCreate(){
}
})

1、生命周期初始化阶段

new Vue(): 仅创建对象,内部数据暂时没有,初始化

初始化事件和生命周期 :初始化内部的默认事件,声明周期函数

beforeCreate:声明周期函数一:此时仅仅初始化了内部事件函数等,外部数据还没有

    beforeCreate(){
      console.log("beforeCreate"+this.msg);
    }


image.png

初始化注入和校验:初始化定义

created: 声明周期函数二:此时自定义的内容被全部加载完成

   created(){
      console.log("Created: "+this.msg);
    }

image.png


是否指定“el”选项?: 判断vue实例是否含有作用范围

是否指定“template”选项?: 判断vue实例是否含有组件

将el外部的HTML作为template编译*:将el指定的标签作为模板(div)

beforeMount :声明周期函数三:此时el指定的标签就是vue实例的作用范围,会被当做模板编译

  beforeMount(){   //el指定作用范围还是原始的内容
      console.log("beforeMount: "+document.getElementById("app").innerText);
    }

image.png


创建vm.$el并用其替换“el” :在内存中创建el标签对应的模板。同时渲染数据{{msg}}——》"生命周期测试",用内存中的虚拟模板替换原有页面中的内容

mounted 生命周期函数四:此时el指定

  mounted(){  //el指定的作用范围,已经被虚拟化处理 并替换之后的结果
      console.log("mounted: "+document.getElementById("app").innerText);
    }


image.png

2、生命周期运行阶段

image.png


beforeUpdate:生命周期函数五:c此时vue实例中的data数据发生了变化,但是页面还是原来的内容

  beforeUpload(){
      console.log("beforeUpdate:"+this.name);
      console.log("beforeUpdate:"+document.getElementById("n").innerText);
    }

虚拟DOM重新渲染并应用更新:将修改的数据内容落实到虚拟的标签对象中,此时页面才发生变化

update:生命周期六:此时vue实例中的数据才和页面一致

update(){
    console.log("update:"+this.msg);
    console.log("update:"+document.getElementById("app").innerText);
  }

image.png

3、生命周期销毁阶段

beforeDestroy :生命周期第7个函数,vue此时接收到销毁指令,没有实际进行销毁操作,内部数据还是完整的

接触绑定销毁子组件以及事件监听器:此时开始销毁一些组件和监听器

destroyed:生命周期八:此时vue销毁失效

  beforeDestory(){//7.生命周期第七个函数,该函数执行时,Vue中所有数据 methods componet 都没销毁
     console.log("vue实例开始销毁")
    },
    destoryed(){ //8.生命周期的第八个函数,该函数执行时,Vue实例彻底销毁
      console.log("vue实例已经销毁,双向绑定失效")
    }

image.png


4、发送axios请求在生命周期第二个函数进行发送:created


image.png

5、完整的生命周期示例图

image.pngimage.png


6、Vue生命周期总结

# Vue生命周期总结
- 1.初始化阶段
        beforeCreate(){ //1.生命周期中第一个函数,该函数在执行时Vue实例仅仅完成了自身事件的绑定和生命周期函数的初始化工作,Vue实例中还没有 Data el methods相关属性
        console.log("beforeCreate: "+this.msg);
        },
        created(){ //2.生命周期中第二个函数,该函数在执行时Vue实例已经初始化了data属性和methods中相关方法
        console.log("created: "+this.msg);
        },
        beforeMount(){//3.生命周期中第三个函数,该函数在执行时Vue将El中指定作用范围作为模板编译
        console.log("beforeMount: "+document.getElementById("sp").innerText);
        },
        mounted(){//4.生命周期中第四个函数,该函数在执行过程中,已经将数据渲染到界面中并且已经更新页面
        console.log("Mounted: "+document.getElementById("sp").innerText);
        }
- 2.运行阶段
        beforeUpdate(){//5.生命周期中第五个函数,该函数是data中数据发生变化时执行 这个事件执行时仅仅是Vue实例中data数据变化页面显示的依然是原始数据
        console.log("beforeUpdate:"+this.msg);
        console.log("beforeUpdate:"+document.getElementById("sp").innerText);
        },
        updated(){    //6.生命周期中第六个函数,该函数执行时data中数据发生变化,页面中数据也发生了变化  页面中数据已经和data中数据一致
        console.log("updated:"+this.msg);
        console.log("updated:"+document.getElementById("sp").innerText);
        },
- 3.销毁阶段
        beforeDestory(){//7.生命周期第七个函数,该函数执行时,Vue中所有数据 methods componet 都没销毁
        },
        destoryed(){ //8.生命周期的第八个函数,该函数执行时,Vue实例彻底销毁
        }

7、后续发布vue博客相关内容

🍅 Vue学习之路(基础篇)

🍅 vue的学习之路(Axios 基本使用)

🍅 vue的学习之路(Vue 生命周期)

🍅 vue的学习之路(Vue中组件(component))

🍅 vue的学习之路(Vue中路由 (Vue Router))

🍅 vue的学习之路(Vue CLI 脚手架)

🍅 vue的学习之路(VueX 状态管理)


相关文章
|
3月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
436 0
|
3月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
3月前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件,包括基础与高级示例。组件支持分段配置(如颜色、文本)、动画效果及超出进度提示等功能。同时提供了完整的代码实现,支持全局注册,并提出了优化建议,如主题支持、响应式设计等,帮助开发者更灵活地集成和定制进度条组件。资源链接已提供,适合前端开发者参考学习。
313 17
|
3月前
|
JavaScript 前端开发 UED
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用,可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置(如自定义表情列表、主题定制、动画效果和懒加载)以及完整集成示例。开发者可根据需求扩展功能,例如 GIF 搜索或自定义表情上传,提升用户体验。资源链接提供进一步学习材料。
161 1
|
3月前
|
存储 JavaScript 前端开发
如何高效实现 vue 文件批量下载及相关操作技巧
在Vue项目中,实现文件批量下载是常见需求。例如文档管理系统或图片库应用中,用户可能需要一次性下载多个文件。本文介绍了三种技术方案:1) 使用`file-saver`和`jszip`插件在前端打包文件为ZIP并下载;2) 借助后端接口完成文件压缩与传输;3) 使用`StreamSaver`解决大文件下载问题。同时,通过在线教育平台的实例详细说明了前后端的具体实现步骤,帮助开发者根据项目需求选择合适方案。
215 0
|
JavaScript
vue 的实例生命周期
vue 的实例生命周期
90 0
|
JavaScript 前端开发 开发者
vue实例、指令、生命周期
vue实例、指令、生命周期
106 1
|
JavaScript
08Vue - Vue实例(实例生命周期)
08Vue - Vue实例(实例生命周期)
68 0
08Vue - Vue实例(实例生命周期)
|
JavaScript
vue 的实例生命周期
vue 的实例生命周期
|
JavaScript
vue实例的生命周期
vue实例的生命周期
78 0