Vue2(生命周期,列表排序,计算属性和监听器)(一)

简介: Vue2(生命周期,列表排序,计算属性和监听器)

前言


上一章博客我们讲解了Vue基础

这一章我们来讲Vue生命周期,列表过滤,计算属性和监听器


一,生命周期


  • 通常也叫生命周期回调函数、生命周期函数、生命周期钩子
  • vue初始化时在不同的阶段调用的不同函数
  • 生命周期函数的this指向为vue实例,名字不能更改


1.1,生命周期函数简介


“生命周期”指实例对象从构造函数开始执行(被创建)到被GC(Garbage Collection)回收销毁的整个存在的时期

生命周期函数是为了在实例对象的各个阶段方便开发者控制而产生,在不同的时期有不同的生命周期函数,可以利用不同时期的生命周期函数去完成不同的操作


实际的开发过程中,生命周期函数的使用较为频繁,需要重点掌


1.2,Vue的初始化流程


90e1f0469e2723de119e2952fee5779d_8b8add5a51874dbea2c3ce56ce55df6d.png


  • beforeCreate阶段
  • vue中data的数据和methods的方法还不能使用
  • created阶段
  • vue中data的数据和methods的方法已可以使用
  • beforeMount阶段
  • 页面可以展示内容,但是是未编译,最终都是不能操作的DOM结构,展示时间短
  • mounted
  • 页面显示编译后的DOM
  • vue的初始化过程结束
  • 此阶段可进行:定时器、网络请求、订阅消息、绑定事件等


1.3,Vue的更新流程


418ccd250b74a2114140a715533cc11f_df37d108466c49a581ae3868e14574a7.png


  • beforeUpdate
  • 数据是新的,页面还没有更新
  • Updated
  • 数据是新的,页面同步更新


1.4, Vue的销毁流程


e6c135d5e1bd4886bd2a8a7d468a998c_f319a3754cee498a87d3544ccd9a233f.png


  • beforeDestroy
  • 此阶段可关闭定时器和取消订阅
  • 数据、方法可以访问但是不触发更新
  • destroy
  • 一切都结束了


1.5, 回顾生命周期


  • 生命周期函数
  • 创建前、创建后(beforeCreate、created)
  • 挂载前、挂载后(beforeMount、mounted)
  • 更新前、更新后(beforeUpdate、updated)
  • 销毁前、销毁后(beforeDestroy、destroyed)
  • 常用的生命周期函数
  • mounted
  • 开启定时器
  • 发送ajax请求
  • 订阅消息
  • 绑定自定义事件
  • beforeDestroy
  • 清除定时器
  • 取消订阅、事件监听
  • 解绑自定义事件
  • vue实例销毁
  • vue开发者工具的数据为空
  • 销毁后自定义事件失效
  • 不要在beforeDestroy进行数据的操作,不会再走更新流程

相关文章
|
8天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
1月前
|
JavaScript API
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
53 1
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
|
28天前
|
JavaScript
Vue 的父组件和子组件生命周期钩子执行顺序
在 Vue 中,父组件和子组件的生命周期钩子执行顺序如下:
|
1月前
|
JavaScript
|
1月前
|
JavaScript
vue3 生命周期
【10月更文挑战第14天】vue3 生命周期
|
1月前
|
监控 JavaScript 开发者
在 Vue 中,子组件为何不可以修改父组件传递的 Prop,如果修改了,Vue 是如何监控到属性的修改并给出警告的
在 Vue 中,子组件不能直接修改父组件传递的 Prop,以确保数据流的单向性和可预测性。如果子组件尝试修改 Prop,Vue 会通过响应式系统检测到这一变化,并在控制台发出警告,提示开发者避免这种操作。
|
2月前
|
缓存 JavaScript 前端开发
vue-day02计算属性,v-bind,v-if,v-for
文章介绍了Vue.js中的计算属性、class与style的绑定、条件渲染和列表渲染的使用。通过示例代码展示了如何使用计算属性简化模板逻辑、如何通过v-bind动态绑定class和style、如何使用v-if进行条件渲染以及如何使用v-for进行列表渲染。这些特性使得Vue.js在构建动态用户界面时更加灵活和强大。
vue-day02计算属性,v-bind,v-if,v-for
|
1月前
|
JavaScript 前端开发 开发者
VUE学习一:初识VUE、指令、动态绑定、计算属性
这篇文章主要介绍了Vue.js的基础知识,包括初识Vue、指令如v-for、v-on的使用、动态属性绑定(v-bind)、计算属性等概念与实践示例。
61 1
|
1月前
|
开发者
vue3生命周期钩子变化
【10月更文挑战第4天】
|
1月前
|
缓存 JavaScript 前端开发
探索Vue.js中的计算属性与侦听器
【10月更文挑战第5天】探索Vue.js中的计算属性与侦听器
22 1