vue每日一问(2)

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情

一。v-show和v-if有什么区别

v-show与v-if的共同点：

• 当表达式为true的时候，都会占据页面的位置
• 当表达式都为false时，都不会占据页面位置

v-show与v-if的区别：

• v-show是通过display样式，控制元素显示和隐藏
• v-if是通过渲染和移除DOM的方式，控制元素显示和隐藏

如何选择：

• 如果需要非常频繁地切换，则使用 v-show 较好
• 如果在运行时条件很少改变，则使用 v-if 较好

二。Vue实例挂载的过程

• new Vue的时候调用会调用_init方法

  • 定义 $set、$get 、$delete、$watch 等方法
  • 定义 $on、$off、$emit、$off等事件
  • 定义 _update、$forceUpdate、$destroy生命周期

• 调用$mount进行页面的挂载

• 挂载的时候主要是通过mountComponent方法

• 定义updateComponent更新函数

• 执行render生成虚拟DOM

• _update将虚拟DOM生成真实DOM结构，并且渲染到页面中

三。请描述下你对vue生命周期的理解

生命周期是什么？

就是vue实例或组件，在不同时期，主动执行的函数。

生命周期函数有哪些？

• beforeCreate 执行时组件实例还未创建，通常用于插件开发中执行一些初始化任务

  • created 组件初始化完毕，各种数据可以使用，常用于异步数据获取
  • beforeMount未执行渲染、更新，dom未创建
  • mounted初始化结束，dom已创建，可用于获取访问数据和dom元素
  • beforeUpdate更新前，可用于获取更新前各种状态
  • updated 更新后，所有状态已是最新
  • beforeDestroy销毁前，可用于一些定时器或订阅的取消
  • destroyed组件已销毁，作用同上
  • activatedkeep-alive 缓存的组件激活时
  • deactivatedkeep-alive 缓存的组件失活时
  • errorCaptured捕获一个来自子孙组件的错误时被调用

created和mouted的选择？

• 操作数据的最佳时机是created
• 操作dom的最佳时机是mouted，也可以在mouted里面操作数据，因为它响应式的。