首页 > 其他分享 >Vue的生命周期、钩子函数

Vue的生命周期、钩子函数

时间:2023-10-08 16:14:37浏览次数:39  
标签:生命周期 渲染 钩子 视图 Vue 阶段 数据

Vue的生命周期:一个Vue实例从 创建 到 销毁 的整个过程

生命周期四个阶段:创建、挂载、更新、销毁

①创建阶段:初始化工作,进行数据的响应式处理,把普通数据 变成 响应式数据(数据变,视图跟着变)

②挂载阶段:渲染模板。结合数据与模板进行渲染

③更新阶段:用户可以通过页面上的按钮等修改数据。数据修改,更新视图,视图更新完后,又可以修改数据,继续更新视图,以此循环

④销毁阶段:销毁实例

 

什么时候可以发送初始化渲染请求?在创建阶段的最后。不能早于创建阶段,得等响应式数据准备好

什么时候可以开始操作dom?至少dom得渲染出来,要在挂载阶段结束之后。

 

Vue生命周期函数:

 

created:发送初始化渲染请求

mounted:操作dom

beforeDestory:释放Vue以外的资源(清除定时器,延时器等等)

标签:生命周期,渲染,钩子,视图,Vue,阶段,数据
From: https://www.cnblogs.com/gagaya2/p/17749430.html

相关文章

  • vue~全局插件和全局方法的注册
    本文介绍如何在vue中定义插件,注册插件和使用插件插件目录/src/plugins插件入口文件/src/plugins/index.jsimportcachefrom'./cache'importmodalfrom'./modal'//安装默认插件,在main.js中引入,通过Vue.use()使用它,因为index.js里使用exportdefault导出,所有在main.js......
  • 直播平台制作,vue-全局过滤器(时间,年月日,一千加逗号处理)
    直播平台制作,vue-全局过滤器(时间,年月日,一千加逗号处理)exportconstformatYmd=(date)=>{ lettime=newDate(date)  lety=time.getFullYear() letm=time.getMonth()+1 letd=time.getDate()  return[y,m,d].map((v)=>String(v).padStart(2,'0'......
  • 去掉Vue语法检查
    注释掉createLintingRule方法里面的东西constcreateLintingRule=()=>({//test:/\.(js|vue)$/,//loader:'eslint-loader',//enforce:'pre',//include:[resolve('src'),resolve('test')],//options:{/......
  • vue3 watchEffect 的用法
    watchEffect 是Vue3中用于监听响应式数据变化并执行副作用函数的函数。它的使用方式和作用如下:基本用法:javascript插入代码复制代码import{ref,watchEffect}from'vue';constmyData=ref(0);watchEffect(()=>{console.log('myDatahaschanged:',myData.......
  • vue学习三
    <divid="app3"><buttonv-on:click="num++">+</button><span>{{num}}</span><buttonv-on:click="num--">-</button><pv-if="n......
  • 【Vue】自己编写排名组件
    一、需求分析这里我是用Echarts的柱状图,倒置下y轴x轴就实现了,然后产品说跟UI不一致我一看UI这种又给我整不会了,然后想拿Echarts改改参数搞定,同事和群友都是说自己做,不要用Echarts改 二、实现思路同事劝我用ElementUI的进度条组件来实现,进度条见:https://element.eleme.io/......
  • vue3
    vue3介绍vue3完全兼容vue2#tree-shaking是一种消除死代码的性能优化理论#TypeScript -javascript:坑---》填坑---》弱类型-typeScript:强类型语言 组合式api和配置项apivue3兼容vue2---》vue2的内容,vue3完全适用vue3不建议这么用了,建议使用组合式api,不建议使用配置......
  • vue3比vue2优势
    Vue3相对于Vue2有一些显著的优势,主要集中在性能、开发体验和一些新的特性上:性能提升:虚拟DOM的优化:Vue3使用了更高效的虚拟DOM算法,减少了不必要的DOM操作,提高了渲染性能。编译器优化:Vue3的编译器生成的代码更为紧凑和高效,加速了首次渲染和更新速度。更小的包大小:Vu......
  • 解锁 Vue 3 神奇技巧:让模板复用达到极致
    引出在vue的日常开发当中,我们可能会遇到这样的一种情况:某一部分的模版需要重复利用,但又不至于到新开1个组件的地步。比如:js复制代码<template><divv-for="iteminlist">//条件渲染<divv-if="isCase1(item.id)"class="case1Class...">......
  • vue3 新增 mitt 的使用
    在Vue3中,你可以使用 mitt 库来实现事件总线,以便在组件之间进行通信。下面是详细的介绍如何使用 mitt:安装 mitt 库: 首先,确保你已经安装了 mitt 库。你可以使用npm或yarn来安装它:插入代码复制代码npminstallmitt或插入代码复制代码yarnaddmitt......