【前端八股文】vue系列：vue的优点和特点、生命周期、ref、$nextTick

本系列目录：【前端八股文】目录总结
是以《代码随想录》八股文为主的笔记。详情参考在文末。
代码随想录的博客_CSDN博客-leecode题解,ACM题目讲解,代码随想录领域博主

vue的优点和特点

• 双向数据绑定
• 虚拟DOM
• 组件化

双向数据绑定

通过MVVM实现数据的双向绑定让开发者不在操作DOM对象，有更多时间去思考业务逻辑。

MVVM，即Model-View-ViewModel。

• Model：代表数据模型，也可以在Model中定义数据修改和业务逻辑
• View：代表UI组件，将数据模型转换成UI展现出来
• ViewModel：同步View和Model的对象

在出现MVVM之前：

• 开发者在代码中大量调用相同的DOM API，操作冗余
• 大量的DOM操作使页面的渲染性能降低
• Model频繁变化，开发者需要主动更新到View；用户操作使View发生变化，开发者也要将其同步到Model，工作繁琐

MVVM的出现很好地解决了上述问题。

• 在MVVM架构下，View和Model没有直接联系，而通过ViewModel交互
• Model和ViewModel之间的交互是双向的
• View和ViewModel双向数据绑定
• View数据的变化会同步到Model中，反之亦然（即数据之间的同步是全自动的）

虚拟DOM

在频繁操作的情况下，使用虚拟DOM，把多次操作合并为一次，推送到真实的DOM。

组件化

• 降低耦合度
• 调试方便
• 提高可维护性

生命周期

十个阶段

• beforeCreate（创建前）
• created（创建后）
• beforeMount（挂载前）
• mounted（挂载后）
• beforeUpdate（更新前）
• updated（更新后）
• activated（激活前）
• deactivated（激活后）
• beforeDestory（销毁前）
• destoryed（销毁后）

生命周期钩子： 生命周期事件的别名。

Vue生命周期详解_渣渣苏的博客-CSDN博客

流程图：

相关功能

题外话：数据请求在created和mouted的区别

• created是在组件实例创建完成时立刻调用，这时候页面dom节点未生成；
• mounted是在页面dom节点渲染完毕之后立刻执行。
• 触发时机上created是比mounted要更早的。

两者的相同点：都能拿到实例对象的属性和方法。

讨论这个问题本质就是触发的时机：

• 放在mounted中的请求可能导致页面闪动（因为此时页面dom结构已经生成）
• 但在页面加载前完成请求，则不会出现此情况
• 建议对页面内容的改动放在created生命周期当中

ref

• ref：被用来给元素或子组件注册引用信息， 引用信息将会注册在父组件的 $refs 对象上，如果是在普通的DOM元素上使用，引用指向的就是 DOM 元素，如果是在子组件上，引用就指向组件的实例。
• $refs：是一个对象，持有已注册过 ref 的所有的子组件。

ref用于辅助开发者获取DOM元素或组件的引用，以及用于在父子组件中获取对方的某个元素进行取值，调用方法等。

在每个Vue组件实例上，都包含一个$refs对象，里面存储着对应DOM元素或组件的引用。

具体操作：
vue中ref的作用 - 简书 (jianshu.com)
Vue教程(ref和$refs的使用) - 腾讯云开发者社区-腾讯云 (tencent.com)

此方法很便利，但尽量不要使用。在没有其他办法的时候再使用。

注意：$refs只会在组件渲染完成之后生效，且不是响应式的。若用$refs获取不到想要的元素或引用，可以试试使用nextTick。

$nextTick

写的很好的解析 ： vue.nextTick()方法的使用详解（简单明了）

官方文档：nextTick | Vue3 (vue3js.cn)

定义：在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。

原因：

• vue中的数据不是一改变就立马更新的，而是异步更新的（否则性能较差，举例：对DOM改变10000次数据）
• 更新数据的事件会放到任务队列中，任务队列有去重逻辑，可以优化性能
• 因此，修改数据后不会立即触发视图，若我们需要实时获取新的DOM，可以通过调用nextTick实现

10000次更新数据举例：不异步更新就会执行一万次，消耗性能

{{num}}
for(let i=0; i<100000; i++){
	num = i
}

nextTick使用举例：nextTick后获取DOM的value是更新后的值

import { createApp, nextTick } from 'vue'
const app = createApp({
  setup() {
    const message = ref('Hello!')
    const changeMessage = async newMessage => {
      message.value = newMessage
      // 这里获取DOM的value是旧值
      await nextTick()
      // nextTick 后获取DOM的value是更新后的值
      console.log('Now DOM is updated')
    }
  }
})

参考

面试官：有使用过vue吗？说说你对vue的理解 | web前端面试 - 面试官系列 (vue3js.cn)
前端面试–谈谈你对MVVM的理解？如何回答_mvvm的理解面试_Ajiia的博客-CSDN博客
Vue生命周期详解_渣渣苏的博客-CSDN博客
Vue请求是在Created还是Mounted？ - 掘金 (juejin.cn)
面试官：请描述下你对vue生命周期的理解？在created和mounted这两个生命周期中请求数据有什么区别呢？ | web前端面试 - 面试官系列 (vue3js.cn)
vue中ref的作用 - 简书 (jianshu.com)
Vue教程(ref和$refs的使用) - 腾讯云开发者社区-腾讯云 (tencent.com)
面试官：Vue中的nextTick有什么作用？ | web前端面试 - 面试官系列 (vue3js.cn)
vue.nextTick()方法的使用详解（简单明了）
nextTick | Vue3 (vue3js.cn)