本系列目录：【前端八股文】目录总结
是以《代码随想录》八股文为主的笔记。详情参考在文末。
代码随想录的博客_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（销毁后）
生命周期钩子： 生命周期事件的别名。
流程图：
相关功能
题外话：数据请求在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)