网站的设计与实现开题报告,石家庄建设南大街小学网站,1688做网站难吗,网页美工设计实践性教案hello#xff0c;我是小索奇#xff0c;精心制作的Vue系列持续发放#xff0c;涵盖大量的经验和示例#xff0c;如果对您有用#xff0c;可以点赞收藏哈~ 生命周期
Vue.js 组件生命周期#xff1a; 生命周期函数#xff08;钩子#xff09;就是给我们提供了一些特定的… hello我是小索奇精心制作的Vue系列持续发放涵盖大量的经验和示例如果对您有用可以点赞收藏哈~ 生命周期
Vue.js 组件生命周期 生命周期函数钩子就是给我们提供了一些特定的时刻让我们可以在这个周期段内加入自己的代码做一些需要的事情; 生命周期钩子中的this指向是VM 或 组件实例对象 在JS 中函数的执行上下文也就是函数内部的 this 指向的对象取决于函数的调用方式而 Vue 在创建组件实例时会在内部确保生命周期钩子函数的执行上下文是指向组件实例的 具体来说当 Vue 创建一个组件实例时它会使用JS 的 Function.prototype.bind 方法来绑定组件实例作为函数内部的 this这意味着无论在哪个生命周期钩子函数中我们使用的 this 都会指向当前组件实例 初始化 Events Lifecycle初始化生命周期、事件数据代理尚未开始beforeCreate前Injections reactivity初始化数据监测、数据代理beforeCreate实例创建后 创建阶段 beforeCreate: 在数据监测、数据代理注入之前在这个阶段初始化生命周期、事件但数据代理还未开始注入 数据代理Vue 会将组件实例上的数据data、计算属性computed、方法methods等代理到实例本身上在beforeCreate阶段使得我们可以通过 this 访问到vm我们不能通过 this 直接访问 data 中的数据和 methods 中的方法 数据监测Vue 开始进行数据的响应式监测即开始追踪数据的变化以便在数据变化时更新视图。 created: 数据监测、数据代理都已完成数据监测确保了数据的变化能够被 Vue 追踪和响应。此时我们可以在组件内部通过 this 访问并操作已经初始化的 data 和 methods但组件尚未挂载到 DOM 挂载阶段 beforeMount: 组件挂载前调用这时候操作不了真实DOMmounted: 组件挂载到 DOM 后此时页面呈现的是经过编译的真实DOM可以进行 DOM 操作和初始化但是尽量不要更改刚挂载完成就给人家更改了一般在此阶段开启定时器、发送网络清求、订阅消息、绑定自定义事件等初始化操作 更新阶段 beforeUpdate: 数据更新前调用可做准备工作updated: 数据更新完成DOM 重新渲染避免修改数据以防止循环 销毁阶段 beforeDestroy: 在组件即将销毁卸载之前触发。这是一个很好的时机来进行一些清理工作例如取消订阅、清除定时器、解绑事件监听器等。在这个阶段组件仍然处于活动状态可以访问组件的数据和方法。一旦 beforeDestroy 钩子执行完毕组件就会被销毁无法再通过实例访问组件的属性或方法。 destroyed: destroyed 生命周期钩子在组件已经销毁卸载之后触发。在这个阶段组件实例以及其所有相关的 DOM 已经被完全销毁。我们可以在这个钩子中做一些清理工作例如释放组件占用的资源、解绑全局事件监听器等。与 beforeDestroy 不同此时无法访问组件的数据和方法因为组件实例已经被销毁 在destoryed这个阶段一般什么都不做在react中没有这个阶段 其他钩子 activated仅用于 keep-alive 组件组件激活时调用deactivated仅用于 keep-alive 组件组件停用时调用errorCaptured: 捕获组件内部错误类似于 try-catch
下面具体说明一下细节
测试时候记得配合debugger开控制台刷新使用否则一下子执行完生命周期了
// data中定义了number:666
beforeCreate() {console.log(实例创建前)console.log(this)debugger}Vue实例中number为undefined 下图中template和Outer 指的是哪 OuterHTML指的就是外面绿色框框内的div都会作为模板进行解析 InnerHTML在内部的也就是InnerHTML 不进行 outer 的初始化操作可能会导致我们无法获得正确的 outerHTML 值这个没多大影响
编译模板到渲染函数内当我们把上述整个div清除时就会尝试编译template作为模板进行解析template将其完全替代渲染到页面上
在created之后beforeMounted之前这一个阶段Vue开始解析模板在内存中生成虚拟DOM页面已经解析完了但是还没有显示到页面上 在beforeMount此时呈现的是未经编译的DOM结构是不能够操作真实DOM的所有对DOM的操作最终都不生效控制台更改瞬时生效执行完$el 替换之后还是把虚拟DOM拿过来瞬间生成真实DOM插入页面虚拟DOM是在created之后beforeMount之前生成的虚拟DOM所以在beforeMount这时怎么修改也只是瞬间生效
设上端点在页面上操作进行DOM可以发现页面的确显示了没有断点根本不会看到任何变化 一旦点击下一步页面立即回复原样说明了此时不能操作DOM 在Created VM.$el and replace el with it 这里用$el替换整个el容器的东西这一步内存中的虚拟DOM转换成真实DOM并且在VM.$el上进行存储mounted此时页面呈现的是经过编译的真实DOM可以进行 DOM 操作和初始化但是尽量不要更改刚挂载完成就给人家更改了一般在此阶段开启定时器、发送网络清求、订阅消息、绑定自定义事件等初始化操作 页面和数据尚未保持同步的是哪一个阶段 是在beforeUpdate这个阶段此时数据是新的页面时旧的 这里定义了number“666”可以看到控制台已经更新了667页面尚未刷新 之后就不断根据新数据生成新DOM并与旧DOM对比最终完成页面更新
即 Model-View 数据绑定的更新
在每次数据变化触发更新时Vue 会创建一个新的虚拟 DOM然后将新的虚拟 DOM 与之前的虚拟 DOM 进行比较找出差异然后将这些差异应用于真实 DOM
