vue钩子函数和生命周期（vue的钩子函数和生命周期详解）



大家好，又见面了，我是你们的朋友全栈君。

生命周期： Vue是一个构造函数，当执行执行这个函数时，相当于初始化vue实例； 在创建实例过程中，需要设置数据监听，编译模板，将实例挂载到DOM上，数据更新能够让DOM也更新， 在这个初始化，又会不同阶段默认调用一些函数执行，这些函数就是生命周期的钩子函数；

生命周期钩子函数，让够让咱们在初始化实例时，添加自己的代码； 生命周期的钩子函数中的this，会默认指向vue的实例;

beforeCreate created[可以获取数据及方法] beforeMount mounted[可以获取到真实的DOM] beforeUpdate updated[数据更新执行] beforeDestroy destroyed[销毁vue实例，不再具有双向数据绑定的特点]

component 和keep-alive

component : 内置组件，根据is属性来显示对应的组件;is属性的属性值保持和组件名字一致；然后可以显示对应的组件

component: 每次能动态显示一个组件，当切换下一个组件时，当前组件要销毁 <component is=“second”>

VUE项目的优化： keep-alive

三个钩子函数详解

// keep-alive 缓存组件 生命周期的钩子函数 activated deactivated // 生命周期的钩子函数 activated() { // 当缓存组件有被显示出来时，会触发这个钩子函数 console.log(100); }, deactivated() { // 当缓存的组件隐藏时，会触发这个钩子函数； console.log(200); }, // 当子孙组件出错时，会调用这个钩子函数 errorCaptured(a, b, c) { // 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。 console.log(a); console.log(b); console.log©; console.log(“子组件报错”) },

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/125994.html原文链接：https://javaforall.cn

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/76090.html