当前位置: 首页 > news >正文

Vue----生命周期函数

vm对象的生命周期函数(钩子函数,生命钩子)

相当于是一种特殊事件,当vm实例在整个运行的过程中,会在不同的时期去执行特定的函数,这样的函数就是vue的生命周期函数

 

beforeCreate created beforeMount mounted destory/x这些钩子都只执行一次

beforeUpdate updated第一次构建不会调用,以后每次data被更新了就会调用

beforeDestroy destroyed 销毁的方式有两种:用户关闭和代码this.$destroy()//销毁vm实例

 

为什么要用生命周期函数?

0.把整个运行期间的业务区分的很明显

1.能够更好的帮助我们把产品的业务逻辑实现了

2.更有利于我们维护产品 和 修改需求

3.能够让我们写出更高质量的产品的代码​ ​ ​

 

 网络请求应该在什么钩子中,为什么?​

 可以放在data生成以后更新数据之前 的所有钩子中

具体的更具业务需求来 常见的放在created或者mounted中​

因为网络请求下来的数据 常常会存在data容器中

 

 

created:

因为有时候我们希望异步的网络请求和vm的挂载同时进行 体现出CPU多核的优势

mounted:

因为有时候我们希望本地的UI骨架已经加载完毕以后再去请求数据刷新UI​ ​

 

你用销毁钩子做过什么?

常常去把一些运行着的代码停下来本地或者网络请求来记录用户的配置信息或者偏好设置

 

       beforeCreate(){

                // vm创建之前运行 无法访问vm的数据源和方法

                // this.change()===>无效

                // berforeCreate()函数作用====>进行网络请求

                // 网络请求的数据怎样使用?

                // 数据预加载,但是无法操作页面

            },

             create(){

                // 对数据源和方法进行了劫持,但是还是无法操作页面

                // 可以做网络请求并且可以操作数据源 但是无法操作页面

             },

             beforeMount(){

                // data等vm对象的工具构建完毕 正在挂载到DOM中

                // 页面渲染出来之前

             },

             mounted(){

                // 已经挂载上去了,页面已经渲染出来,可以操作页面

                // 这里也可以做网络请求,页面加载了之后的所有业务,都可以在这里

                //这个函数执行标志着 vm和dom成功关联==>随意操作vm来间接的操作dom

             },

             beforeDestroy(){

                // 销毁实例之前

                //常常去把一些运行着的代码停下来

                //本地或者网络请求来记录用户的配置信息或者偏好设置

             },

             destroyed(){

                //钩子调用后 才销毁  做最后的挽救

                //从技术的角度来说  可以在这个方法打开其他程序,然后销毁这个程序

             },

             beforeUpdate(){

                // 刷新页面之前,数据已经更新了

             },

             updated(){

                // 更新的是data,这时候还没有刷新UI,它会找一个合适的时机去刷新UI

                // 刷新 页面

             }

 

总结:

 

页面第一次加载运行了那些钩子?

  beforeCreate()  create() beforeMoun() mounted()

那些函数中可以做网络请求?

  beforeCreate()  create()  mounted() beforeDestroy()

那些函数中可以刷新页面?(可以设置数据源)

  create() beforeMoun() mounted()  beforeDestroy()

 beforeUpdate()==>这个不能设置数据源,因为函数是在数据更新过后调用的,如果修改数据源就会再次调用函数。

 

 beforeUpdate() Update()====>都不能在里面修改数据

 

 

 

 

面试题:

什么时生命周期函数?

Vue组件对象在创建和销毁过程中,在某一中条件下成立的时刻,

系统会去调用的Vue中设定的函数 这些函数都叫做:生命周期函数

Vue的生命周期函数有哪些?

普遍的答法:有8个创建前后,挂在前后,更新前后,销毁前后

标准答法:组件有8个(创建前后,挂在前后,更新前后,销毁前后),

路由组件有3个,全局有2个,独享有1个,动态组件有2个,等等

 

为什莫设计生命周期函数?

答:更好的设计程序,让代码更有逻辑

面首次加载过程中,会依次触发那些钩子?

答:  beforeCreate()  create() beforeMoun() mounted()

this.$el是什莫?他在哪些钩子里面才能访问?

答:他代表了当前组件的真实DOM,要在mounted之后才有

Vue实例的data属性,在那些钩子中能访问?

答:create() beforeCreate() mounted() berforeUpdate() updated() beforeDestroy()

 

为什莫不要在更新钩子中做页面请求?

答:会导致死循环 react有一个shoudComponentUpdate可以自己控制 但是Vue没有

你用beforCreate做过什么业务?

答:这个钩子中可以做网络请求,但是vm没有构建完毕,此时数据方法等等的劫持还没有完成,不能操作this,

因此可以做预加载。

 

vm和dom之间的关系?

答:1.vm是js模拟出来的跟dom结构很像的一种对象结构VNode。它通过底层的render函数

渲染到页面上,让页面DOM跟虚拟VNode关联映射。

2.如果VM的数据源发生变化,会让内存中生成新的NVode 新的NVode会和旧的VNode作比较然后更新,

这个过程就是DIFF算法

 

 

相关文章:

  • 瑞吉外卖 —— 10、Redis
  • 信息安全技术实验:网络嗅探与欺骗
  • 【SQL刷题】DAY15----SQL联结表专项练习
  • Python基础学习
  • 2021了,真的不要再说 Node.js 是一门编程语言了
  • shell 编程之变量总结
  • [Mybatis-Plus笔记] MybatisPlus-03-QueryWrapper条件构造器
  • STM32F1定时器-PWM输出
  • CNN天气识别
  • 基于SpringBoot+Vue的校园招聘管理系统(Java毕业设计)
  • java File类基本概念基本构造方法使用
  • 基于Java微服务方案的商品秒杀系统
  • 谷粒商城 高级篇(一) --------- ElasticSearch 的简介与安装
  • mybatis的sql标签
  • 面试题-参加生日宴会的最多人数
  • __proto__ 和 prototype的关系
  • ECMAScript 6 学习之路 ( 四 ) String 字符串扩展
  • JSONP原理
  • k8s 面向应用开发者的基础命令
  • leetcode388. Longest Absolute File Path
  • linux学习笔记
  • PHP 的 SAPI 是个什么东西
  • React-flux杂记
  • select2 取值 遍历 设置默认值
  • 阿里云前端周刊 - 第 26 期
  • 初识MongoDB分片
  • 官方新出的 Kotlin 扩展库 KTX,到底帮你干了什么?
  • 机器学习 vs. 深度学习
  • 基于OpenResty的Lua Web框架lor0.0.2预览版发布
  • 前端性能优化——回流与重绘
  • 如何利用MongoDB打造TOP榜小程序
  • 入口文件开始,分析Vue源码实现
  • 京东物流联手山西图灵打造智能供应链,让阅读更有趣 ...
  • 说说我为什么看好Spring Cloud Alibaba
  • 直播平台建设千万不要忘记流媒体服务器的存在 ...
  • 智能情侣枕Pillow Talk,倾听彼此的心跳
  • ​什么是bug?bug的源头在哪里?
  • # C++之functional库用法整理
  • #《AI中文版》V3 第 1 章 概述
  • #Spring-boot高级
  • #图像处理
  • (solr系列:一)使用tomcat部署solr服务
  • (阿里云万网)-域名注册购买实名流程
  • (动手学习深度学习)第13章 计算机视觉---图像增广与微调
  • (每日持续更新)jdk api之FileReader基础、应用、实战
  • (篇九)MySQL常用内置函数
  • .bat文件调用java类的main方法
  • .htaccess配置重写url引擎
  • .net framework 4.0中如何 输出 form 的name属性。
  • .NET 命令行参数包含应用程序路径吗?
  • .net开发引用程序集提示没有强名称的解决办法
  • /bin/rm: 参数列表过长"的解决办法
  • :如何用SQL脚本保存存储过程返回的结果集
  • @Bean, @Component, @Configuration简析
  • @kafkalistener消费不到消息_消息队列对战之RabbitMq 大战 kafka