开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 3 天，点击查看活动详情
前言
不甘于平庸又不努力
2023继续！！！
vue常见的一些面试问题
## Vue中使用了哪些设计模式
## vue哪个生命周期最适合调用数据
## vue的父子组件的生命周期是什么顺序
## vue中引入动态图片如何引入（require）
Vue中使用了哪些设计模式
设计模式概念
程序员针对特定的问题，给出间接而优化的处理方案。特定的设计模式可以解决特定的问题
设计原则
- 单一职责原则（SRP）
- 一个对象或者方法只做一件事情。把对象或者方法分成较小的粒度
Vue中使用了这些设计模式：
-
单例模式：只允许存在一个实例的模式，
- 优点：适用于单一对象，只生成一个对象实例，避免频繁创建和销毁实例，减少内存占用
- 缺点：不适用动态扩展对象
- 场景：axios实例[封装的请求响应函数导出就是一个实例]，全局态管理store,全局缓存
-
工厂模式：工厂函数就是做一个对象创建的封装，并将创建的对象return出去。不必暴露其中的具体逻辑
- 优点：可以快速创建大量相似对象，无重复代码
- 缺点：工厂模式创建的对象属于object,无法区分对象类型
- 场景：调用了new的操作符
-
发布订阅模式（观察者模式）：
- 特点：发布订阅模式：一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于他的对象都将得到通知；观察者模式：是一对一的依赖关系
-
装饰模式：为对象动态加入行为，经过多重包装，可以形成一条装饰链
- 优点：不改变原来代码的情况下，添加新的功能
- 场景：vue的表单验证规则和提交利用了这种模式，遵循封闭开放原则
function before (fn, callback) {
let _this = this;
return function () {
callback.apply(this, arguments)
return fn.bind(this, arguments)
}
}
function after (fn, callback) {
let _this = this
return function () {
let res = fn.apply(this, arguments)
callback.apply(this, arguments)
return res
}
}
// before和after是两个高阶函数，让我们一起回忆一下什么是高阶函数？
// 还知道call，apply,bind的区别吗
let getName = function getName () {
// 加入这是你同事写的烂代码，看不下去的那种，那么别动他的代码
console.log('这是getName函数')
}
before(getName, function () {
// 这个就是你要写的新逻辑
console.log('切入前代码')
})()
after(getName, function () {
// 这个也是你要写的新逻辑
console.log('切入后代码')
})()
- 策略模式：定义一系列算法，把他们一个个封装起来，并且使他们可以相互替换，从而避免很多if语句
vue哪个生命周期最适合调用数据
首先先要了解vue生命周期及生命周期存在的状态
- beforeCreate: vue实例的挂载元素el和数据对象data还没有初始化，还是一个undefined的一个状态。
- created这个时候Vue实例的数据对象data已经有了，可以访问里面的数据和方法，el还没有，也没有挂载dom
- 看了很多文章，还是推荐在这里调用异步方法：比如获取初始化数据（init()）,可以更快的获取到数据，减少loading时间
- beforeMount在这里Vue实例的元素el和数据对象都有了，只不过在挂载之前还是虚拟的dom节点。
- mountedVue实例已经挂载在真实的dom节点上了，可以对dom进行操作来获取dom节点。
- 操作dom可以在这个位置，这个时候真实dom才存在于页面上
- beforeUpdate响应式数据更新时调用，发生在虚拟dom打补丁之前，适合在更新之前访问现有的dom。
- updated虚拟dom重新渲染和打补丁之后调用，组成新的dom已经更新，避免在这个钩子函数种操作数据，防止死循环。
- 这里不可以更新数据，会导致数据更新不成功
- beforeDestoryVue实例在销毁之前调用，在这里可以使用，通过this也能访问到实例，可以在这里对一些不用的定时器进行清除，解绑事件。
- destoryedvue销毁之后调用，调用之后所有的事件监听都会被移除，所有的实例都会被销毁。
- 不能获取到任何东西
vue的父子组件的生命周期是什么顺序
挂载阶段
执行顺序为： 父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
更新阶段
执行顺序为： 父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated
销毁阶段
执行顺序为： 父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed
规律就是：父组件先开始执行，然后等到子组件执行完，父组件收尾。
vue中引入动态图片如何引入（require）
这个地方的动态指的是：<img :src='srcurl'>,srcurl:表示的就是一个动态的url,需要使用require
require 是node中的一个方法，其作用用于引入模块、json、本地文件
为什么要用require呢
vue运行的时候，会将动态的图片编译，直接使用字符串方式引入的话，浏览器没有办法直接找到编译后的图片的路径，会显示不出来内容。这个时候就必要使用require
因为动态添加src被当做静态资源处理了，而被编译过后的静态路径无法正确的引入资源，所以要加上require
后记
本文仅作为自己一个阅读记录，具体还是要看大佬们的文章
准备写到十就把Vue2源码及面试方面的内容结束掉，接下来延展一下路由、vuex、Vue3的内容
一切为了面试！！！！
