vue 关闭弹如何销毁子组件_常见面试题总结之 Vue

Vue 常见面试题总结，更多详细内容请移步 github

v-show 和 v-if 的区别:

• v-show 体现的是 CSS 的 display 属性的显示与隐藏，页面中会一直存在这个元素；
• v-if 则是组件真正的渲染和销毁，而不是显示与隐藏
• 频繁切换显示状态用 v-showv-for 中的 key
• 必须使用 key 且不能是 index 和 random 随机数
• diff 算法通过 tag 和 key 来判断是否是 sameNode ，是就不用diff了
• 减少渲染次数，提升渲染性能

描述 Vue 组件生命周期（父子组件）

https://cn.vuejs.org/images/lifecycle.png

• 单组件生命周期

 beforeCreate,created,beforeMount,beforeMounted,beforeUpdate,updated,beforeDestroy,destroyed

• 父子组件生命周期关系

创建： 父 created --> 子 created --> 子 mounted --> 父 mounted

更新： 父 beforeUpdate --> 子 beforeUpdate --> 子 updated --> 父 updated

销毁： 父 beforeDestryy --> 子 beforeDestryy --> 子 destroyed --> 父 destroyed

Vue 组件通讯（常见）

• 父子组件 props 和 this.$emit
• 自定义事件 event.$on , event.$off , event.$emit
• vuex

描述组件渲染和更新过程

看懂这张图

解析模板为 render 函数后，执行 render 函数后生成 vnode ，这个过程会触发响应式监听data 属性的 getter ，getter 进行依赖收集，当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

双向数据绑定 v-model 的实现原理:</