郑州金水区建设局网站做网站设计提成赚钱吗

郑州金水区建设局网站,做网站设计提成赚钱吗,四川房产信息网官网,用angular做的网站目录一、Vue的生命周期阶段二、生命周期钩子函数1、创建阶段1、beforeCreate2、created #xff08;常用#xff09;2、挂载阶段1、beforeMount2、 mounted3、更新阶段1、beforeUpdate2、updated4、销毁阶段1、beforeDestroy2、destroyed一、Vue的生命周期阶段 vue生命周期分…目录一、Vue的生命周期阶段二、生命周期钩子函数1、创建阶段1、beforeCreate2、created 常用2、挂载阶段1、beforeMount2、 mounted3、更新阶段1、beforeUpdate2、updated4、销毁阶段1、beforeDestroy2、destroyed一、Vue的生命周期阶段vue生命周期分为四个阶段第一阶段创建阶段beforeCreatecreated第二阶段挂载阶段beforeMountrendermounted第三阶段更新阶段beforeUpdateupdated第四阶段销毁阶段beforeDestroydestroyed二、生命周期钩子函数1、创建阶段1、beforeCreate在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用。作用核心初始化Vue实例的响应式系统beforeCreate(){// 此时Vue实例的响应式系统还未建立}作用初始化事件系统和生命周期数据观测 (data observation) 还未开始计算属性 (computed) 和方法 (methods) 还未定义应用场景exportdefault{beforeCreate(){// ⭐ 场景1记录性能时间点this.$options.startTimeperformance.now();// ⭐ 场景2初始化非响应式数据this.staticConfig{version:1.0.0,apiBaseUrl:process.env.API_URL};// ⭐ 场景3预加载资源如图片、字体constpreloadImages[/images/loading.gif,/images/error.png];preloadImages.forEach(src{constimgnewImage();img.srcsrc;});// ❌ 不能做的事情// console.log(this.message); // undefined// this.fetchData(); // undefined}}2、created 常用在实例创建完成后被立即同步调用。在这一步中实例已完成对选项的处理意味着以下内容已被配置完毕数据侦听、计算属性、方法、事件/侦听器的回调函数。然而挂载阶段还没开始且 $el property 目前尚不可用。解释在这个阶段可以访问到数据了但是页面当中真实dom节点还是没有渲染出来在这个钩子函数里面可以进行相关初始化事件的绑定、发送请求操作。created(){// 此时响应式系统已建立完成}作用数据观测已完成属性和方法已配置计算属性已计算但DOM还未生成$el属性不可用应用场景exportdefault{data(){return{user:null,settings:{},productList:[]};},created(){// 场景1发起异步数据请求最常用this.fetchInitialData();// 场景2从本地存储读取数据this.loadFromLocalStorage();// 场景3初始化组件状态this.initComponentState();// 场景4设置事件总线监听this.setupEventBusListeners();// 场景5初始化第三方服务配置this.initThirdPartyServices();},methods:{asyncfetchInitialData(){try{// 并行请求多个接口const[userRes,settingsRes,productsRes]awaitPromise.all([axios.get(/api/user/profile),axios.get(/api/user/settings),axios.get(/api/products)]);this.useruserRes.data;this.settingssettingsRes.data;this.productListproductsRes.data;}catch(error){this.handleError(error);}},loadFromLocalStorage(){// 从本地存储恢复状态constsavedCartlocalStorage.getItem(shoppingCart);if(savedCart){this.cartItemsJSON.parse(savedCart);}// 读取用户偏好constthemelocalStorage.getItem(theme)||light;this.currentThemetheme;},initComponentState(){// 根据URL参数初始化constquerythis.$route.query;if(query.category){this.activeCategoryquery.category;}// 设置默认值this.pagination{page:1,pageSize:20,total:0};},setupEventBusListeners(){// 监听全局事件this.$eventBus.$on(user-logged-in,this.handleUserLogin);this.$eventBus.$on(notification,this.showNotification);},initThirdPartyServices(){// 初始化分析工具if(window.analytics){window.analytics.identify(this.userId);}// 初始化错误监控if(window.Sentry){window.Sentry.configureScope(scope{scope.setUser({id:this.userId});});}}}}核心要点可以访问所有响应式数据适合数据初始化工作不能操作DOM请求数据的最佳时机减少白屏时间2、挂载阶段1、beforeMount作用核心将模板编译并挂载到真实DOM在挂载开始之前被调用相关的 render 函数首次被调用。解释代表dom马上就要被渲染出来了但是却还没有真正的渲染出来这个钩子函数与created钩子函数用法基本一致可以进行相关初始化事件的绑定、发送ajax操作。2、 mounted挂载阶段的最后一个钩子函数,数据挂载完毕真实dom元素也已经渲染完成了,这个钩子函数内部可以做一些实例化相关的操作mounted(){// DOM已挂载完成可以操作DOM}作用虚拟DOM已挂载到真实DOM$el属性可用组件已完全渲染应用场景exportdefault{mounted(){// 场景1操作DOM元素最常见this.initDOMOperations();// 场景2初始化第三方库需要DOMthis.initThirdPartyLibraries();// 场景3添加事件监听器this.bindEventListeners();// 场景4执行依赖DOM的异步操作this.performDOMDependentAsyncTasks();// 场景5测量DOM元素尺寸this.measureDOMElements();},methods:{initDOMOperations(){// 1. 聚焦输入框if(this.$refs.searchInput){this.$refs.searchInput.focus();this.$refs.searchInput.select();}// 2. 设置滚动位置constsavedScrollsessionStorage.getItem(scrollPosition);if(savedScrollthis.$refs.scrollContainer){this.$refs.scrollContainer.scrollTopparseInt(savedScroll);}// 3. 动态修改样式this.$el.classList.add(loaded);this.$refs.header.style.backgroundColorthis.themeColor;},initThirdPartyLibraries(){// 1. 初始化图表库ECharts/Chart.jsif(this.$refs.chart){this.chartInstanceecharts.init(this.$refs.chart);this.chartInstance.setOption(this.chartOptions);}// 2. 初始化地图百度地图/高德地图if(this.$refs.mapContainer){this.mapnewAMap.Map(this.$refs.mapContainer,{zoom:12,center:[116.397428,39.90923]});}// 3. 初始化富文本编辑器if(this.$refs.editor){this.editornewEditor({el:this.$refs.editor,content:this.content});}// 4. 初始化代码编辑器if(this.$refs.codeEditor){this.codeMirrorCodeMirror.fromTextArea(this.$refs.codeEditor,{mode:javascript,theme:material,lineNumbers:true});}},bindEventListeners(){// 1. 窗口大小变化监听window.addEventListener(resize,this.handleResize);// 2. 全局键盘事件document.addEventListener(keydown,this.handleGlobalKeydown);// 3. 滚动事件监听window.addEventListener(scroll,this.handleScroll,{passive:true});// 4. 鼠标事件this.$el.addEventListener(mouseenter,this.handleMouseEnter);this.$el.addEventListener(mouseleave,this.handleMouseLeave);},performDOMDependentAsyncTasks(){// 1. 延迟加载图片this.$nextTick((){constlazyImagesthis.$el.querySelectorAll(img[data-src]);lazyImages.forEach(img{img.srcimg.dataset.src;});});// 2. 执行动画setTimeout((){this.$el.classList.add(animate-in);},100);},measureDOMElements(){// 1. 获取元素尺寸if(this.$refs.container){constrectthis.$refs.container.getBoundingClientRect();this.containerWidthrect.width;this.containerHeightrect.height;}// 2. 计算响应式布局this.calculateResponsiveLayout();}},beforeDestroy(){// 必须清理// 1. 移除事件监听window.removeEventListener(resize,this.handleResize);document.removeEventListener(keydown,this.handleGlobalKeydown);// 2. 销毁第三方库实例if(this.chartInstance){this.chartInstance.dispose();}if(this.map){this.map.destroy();}if(this.editor){this.editor.destroy();}// 3. 清理定时器clearTimeout(this.animationTimer);}}3、更新阶段1、beforeUpdate在数据发生改变后DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它比如移除手动添加的事件监听器。解释这个钩子函数初始化的不会执行,当组件挂载完毕的时候并且当数据改变的时候才会立马执行,这个钩子函数获取dom的内容是更新之前的内容beforeUpdate(){// 数据已变化DOM更新前}作用检测到数据变化重新计算虚拟DOM但还未更新真实DOM应用场景exportdefault{data(){return{messages:[],scrollPosition:0};},beforeUpdate(){// ⭐ 场景1保存DOM状态如滚动位置if(this.$refs.messageList){this.scrollPositionthis.$refs.messageList.scrollTop;this.scrollHeightthis.$refs.messageList.scrollHeight;}// ⭐ 场景2检查数据变化类型if(this.messages.length!this.previousMessageCount){this.hasNewMessagestrue;}this.previousMessageCountthis.messages.length;// ⭐ 场景3性能监控if(this.$options.performanceLogging){console.time(dom-update);}// ⭐ 场景4取消不必要的操作if(this.isScrolling){console.log(正在滚动延迟DOM更新);}// ❌ 不要在这里修改正在更新的数据// this.messages.push(新消息); // 会导致无限循环}}2、updated在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。当这个钩子被调用时组件 DOM 已经更新所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下你应该避免在此期间更改状态。如果要相应状态改变通常最好使用计算属性或 watcher 取而代之。updated(){// DOM已更新完成}作用虚拟DOM的差异已应用到真实DOMDOM更新完成组件重新渲染完成应用场景exportdefault{updated(){// ⭐ 场景1恢复DOM状态如滚动位置if(this.$refs.messageListthis.hasNewMessages){// 保持滚动在底部聊天应用场景this.$refs.messageList.scrollTopthis.$refs.messageList.scrollHeight;this.hasNewMessagesfalse;}// ⭐ 场景2更新第三方库if(this.chartInstancethis.chartDataChanged){this.chartInstance.setOption({series:[{data:this.chartData}]});this.chartDataChangedfalse;}// ⭐ 场景3执行DOM更新后的操作this.performPostUpdateOperations();// ⭐ 场景4触发过渡动画if(this.shouldAnimate){this.$nextTick((){this.$el.classList.add(update-complete);});}// ⭐ 场景5性能日志if(this.$options.performanceLogging){console.timeEnd(dom-update);console.log(DOM更新完成耗时:${performance.now()-this.updateStartTime}ms);}// ❌ 重要警告避免在此修改响应式数据// 错误示例// if (this.count 10) {// this.count; // 会导致无限更新循环// }// ✅ 正确做法使用条件判断 $nextTickif(this.shouldAutoIncrementthis.countthis.maxCount){this.$nextTick((){this.count;});}},methods:{performPostUpdateOperations(){// 1. 高亮新增项constnewItemsthis.$el.querySelectorAll(.item-new);newItems.forEach(item{item.classList.add(highlight);setTimeout((){item.classList.remove(item-new);},1000);});// 2. 更新工具提示位置if(this.tooltips){this.tooltips.forEach(tooltiptooltip.updatePosition());}// 3. 触发自定义事件this.$emit(dom-updated,{timestamp:Date.now(),elementCount:this.$el.children.length});}}}4、销毁阶段作用核心清理资源防止内存泄漏1、beforeDestroy实例销毁之前调用。在这一步实例仍然完全可用。当组件销毁的时候就会触发这个钩子函数代表销毁之前可以做一些善后操作,可以清除一些初始化事件、定时器相关的东西。beforeDestroy(){// Vue 2beforeUnmount(){// Vue 3// 实例销毁前实例仍然完全可用}作用实例即将销毁但所有功能仍然可用最后的机会进行清理工作应用场景exportdefault{data(){return{resources:{timers:[],listeners:[],connections:[]}};},beforeDestroy(){// 资源清理清单// 1. 清理定时器this.resources.timers.forEach(timerId{clearInterval(timerId);clearTimeout(timerId);});// 2. 移除事件监听器this.resources.listeners.forEach(({target,event,handler}){target.removeEventListener(event,handler);});// 3. 关闭WebSocket/SSE连接if(this.websocketthis.websocket.readyStateWebSocket.OPEN){this.websocket.close(1000,组件销毁);}if(this.eventSource){this.eventSource.close();}// 4. 取消HTTP请求if(this.currentRequest){this.currentRequest.cancel(组件销毁请求已取消);}// 5. 清理第三方库实例this.cleanupThirdPartyLibraries();// 6. 清理DOM引用this.$refs{};// 7. 移除全局状态引用this.removeGlobalReferences();// 8. 保存状态到本地存储this.saveStateToStorage();// 9. 发送销毁日志this.logDestruction();},methods:{cleanupThirdPartyLibraries(){// 清理各种第三方库constlibraries[chartInstance,mapInstance,editorInstance,playerInstance,pdfViewer,codeMirror];libraries.forEach(libName{if(this[libName]typeofthis[libName].destroyfunction){this[libName].destroy();this[libName]null;}});},removeGlobalReferences(){// 从全局对象中移除引用if(window.activeComponents){constindexwindow.activeComponents.indexOf(this);if(index-1){window.activeComponents.splice(index,1);}}// 清除全局事件处理器deletewindow[${this._uid}_resize_handler];},saveStateToStorage(){// 保存需要持久化的状态if(this.shouldPersistState){conststateToSave{formData:this.formData,filters:this.activeFilters,pagination:this.pagination};localStorage.setItem(component_state_${this.componentId},JSON.stringify(stateToSave));}},logDestruction(){// 发送销毁统计navigator.sendBeacon(/api/component-lifecycle,JSON.stringify({component:this.$options.name,instanceId:this._uid,lifespan:Date.now()-this.createdAt,event:beforeDestroy}));}}}2、destroyed实例销毁后调用。该钩子被调用后对应 Vue 实例的所有指令都被解绑所有的事件监听器被移除所有的子实例也都被销毁。Vue实例失去活性完全丧失功能destroyed(){// Vue 2unmounted(){// Vue 3// 实例已完全销毁}作用实例已销毁所有事件监听器已移除所有子实例已销毁所有指令已解绑应用场景exportdefault{destroyed(){// ⭐ 场景1最终清理确认console.assert(this.resources.timers.length0,还有未清理的定时器);console.assert(this.resources.listeners.length0,还有未清理的事件监听);// ⭐ 场景2触发父组件回调this.$emit(component-destroyed,{instanceId:this._uid,name:this.$options.name});// ⭐ 场景3更新应用级状态if(this.$root){this.$root.activeComponentCount--;}// ⭐ 场景4性能分析记录if(window.performanceMonitor){window.performanceMonitor.recordComponentLifecycle(this.$options.name,destroyed,performance.now()-this.createdAt);}// ❌ 此时不能访问实例数据// console.log(this.message); // undefined 或报错// ⭐ 场景5内存泄漏检测辅助if(process.env.NODE_ENVdevelopment){// 在开发环境帮助检测内存泄漏console.log(组件${this.$options.name}已销毁检查是否有内存泄漏);}},created(){// 记录创建时间用于计算生命周期时长this.createdAtperformance.now();}}templatediv idappp idbox{{msg}}/pbutton clickchange更新/button/div/templatescriptexportdefault{data(){return{msg:hello}},methods:{change(){this.msghello world}},beforeCreate(){console.log(----------------beforeCreate)console.log(this.msg,document.getElementById(box))},created(){console.log(----------------created)console.log(this.msg,document.getElementById(box))},beforeMount(){console.log(----------------beforeMount)console.log(this.msg,document.getElementById(box))},mounted(){console.log(----------------mounted)console.log(this.msg,document.getElementById(box))},beforeUpdate(){console.log(----------------beforeUpdate)console.log(this.$el.innerHTML)console.log(this.msg,document.getElementById(box))},updated(){console.log(----------------updated)console.log(this.$el.innerHTML)console.log(this.msg,document.getElementById(box))}}/script当页面初始化挂载完成之后当数据改变之后又会触发beforeUpdateupdated两个钩子函数