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

最新推荐文章于 2024-08-31 21:11:28 发布

karshey

最新推荐文章于 2024-08-31 21:11:28 发布

阅读量902

点赞数 1

分类专栏：前端八股文与面试文章标签：前端 vue.js javascript

本文链接：https://blog.youkuaiyun.com/karshey/article/details/129712815

版权

前端八股文与面试专栏收录该内容

12 篇文章

订阅专栏

文章目录

本系列目录：【前端八股文】目录总结
是以《代码随想录》八股文为主的笔记。详情参考在文末。
代码随想录的博客_优快云博客-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生命周期详解_渣渣苏的博客-优快云博客

在这里插入图片描述

流程图：

在这里插入图片描述

题外话：数据请求在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')
    }
  }
})