vue面试题集（三）

✅作者简介：大家好我是honker707,大家可以叫我honker，新星计划第三季python赛道Top1🏆 📃个人主页：honker707的csdn博客 🔥系列专栏：带你玩转Vue 💬推荐一款模拟面试、刷题神器👉点击跳转进入网站

在这里插入图片描述

前端面试题

• 组件通讯
• 父子组件生命周期渲染过程
• Vue响应式原理
• 结束语

组件通讯

父传子： props　/ emit 子传父： emit　/ on 多级组件之间传递数据： attrs　/ listeners 父子通信： 父向子传递数据是通过 props，子向父是通过 events（ emit）； 通过父链 / 子链也可以通信（ parent / children）；ref 也可以访问组件实例； provide / inject API； a t t r s / attrs/attrs/listeners · 兄弟通信： Bus；Vuex · 跨级通信： Bus；Vuex；provide / inject API、 attrs / attrs/attrs/listeners

父子组件生命周期渲染过程

首次加载：先父组件create初始化创建js模型，然后子组件创建js模型 子组件渲染完之后，父组件再渲染 创建实例是从外到内的，渲染是从内到外的 加载渲染： 父beforeCreate —> 父created —> 父beforeMount —> 子beforeCreate —> 子created —> 子beforeMount —> 子mounted —> 父mounted 更新阶段：父beforeUpdate —> 子beforeUpdate —> 子updated —> 父updated 销毁： 父beforeDestroy —> 子beforeDestroy —> 子destroyed —> 父destroyed

Vue响应式原理

响应式：当数据改变后，Vue会通知使用该数据的代码 比如说：视图渲染使用了一个数据 那么当这个数据改变后，视图会响应式的自动更新 Vue 它是通过那个Object.defineProperty() 来更新定义 data中的所有属性