},
watch: {
tableData(val){
console.log(val)
}
},
3. **使用VueX**
### 14.父子组件传参emit如何传多个参数?⭐
子组件:
submit(){
this.$emit(‘g’,1,2,3,4,5)
}
父组件
g(val1,val2,val3,val4,val5) {
console.log(val1,val2,val3,val4,val5)
}
### 15.VUE路由跳转方式⭐⭐
* **router-link 标签跳转**
* **this.$router.push()**
* **this.$router.replace()**
* **this.$router.go(n)**:(0:当前页,-1上一页,+1下一页,n代表整数)
### 16.条件渲染v-if 与 v-for 优先级⭐
**vue2.0**文档是这么说的
![在这里插入图片描述](https://img-blog.csdnimg.cn/5ec4f385a2364ed59a19d097d70e3cc5.png)
[**vue2列表渲染指南**](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)
**vue3.0**文档是这么说的
![在这里插入图片描述](https://img-blog.csdnimg.cn/96f97aa69c3b4b0dbb474a4626aadcc3.png)
[**vue3条件渲染**](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)
### 17.VUE 中 $nextTick 作用与原理?⭐⭐⭐
异步渲染、获取DOM、Promise等。
Vue 在更新 DOM 时是**异步执行**的,在修改数据后,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新。所以修改完数据,立即在方法中获取DOM,获取的仍然是未修改的DOM。
$nextTick的作用是:该方法中的代码会在当前渲染完成后执行,就解决了异步渲染获取不到更新后DOM的问题了。
$nextTick 的原理: $nextTick本质是返回一个Promise 。
应用场景:
* 在created()里面想要获取操作Dom,把操作DOM的方法放在$nextTick中。
* 在data()中的修改后,页面中无法获取data修改后的数据,使用$nextTick时,当data中的数据修改后,可以实时的渲染页面
官网中是这么说的
![在这里插入图片描述](https://img-blog.csdnimg.cn/4f4d3f4863324edcb6ec620faadfff78.png)
### 18.VUE中 for循环为什么加 key?⭐⭐
为了**性能优化优化diff算法**, 因为vue是虚拟DOM,更新DOM时用diff算法对节点进行一一比对,比如有很多li元素,要在某个位置插入一个li元素,但没有给li上加key,那么在进行运算的时候,就会将所有li元素重新渲染一遍,但是如果有key,那么它就会按照key一一比对li元素,只需要创建新的li元素,插入即可,不需要对其他元素进行修改和重新渲染。
key也不能是li元素的index,因为假设我们给数组前插入一个新元素,它的下标是0,那么和原来的第一个元素重复了,整个数组的key都发生了改变,这样就跟没有key的情况一样了。
### 19.VUE2和VUE3的区别?⭐⭐⭐
* **响应式不同**
Vue 2 使用 getters 和 setters 来实现响应式。
Vue3 使用Proxy ,Proxy 提供了更简单的 API 和更高的性能,因为它不需要定义 getters 和 setters。
Vue 3 的响应式系统比 Vue 2 更快、更简单、更强大。它使用 Proxy 和惰性追踪提供了更高的性能,并通过新的响应式 API 简化了响应式数据的管理。
//Vue2
const data = {
count: 0
}
Object.defineProperty(data, ‘count’, {
get() {
return this.count
},
set(newValue) {
this.count = newValue
this.$emit(‘countChanged’, newValue)
}
})
//Vue3
const data = reactive({
count: 0
})
* **API 类型不同**
Vue2 使用选项类型api。
Vue3 使用合成型api。
* **定义数据变量和方法不同**
Vue2是把数据放到了data 中。
Vue3使用setup()。
* **生命周期不同**
* **父子传参不同**
* **指令与插槽不同**
* **是否支持碎片**
Vue2 不支持碎片。
Vue3 支持碎片,可以拥有多个根节点
### 20.为什么VUE3不继续用$set?⭐
**$set的作用**:在vue2.0中:使用对象和数组来定义数据,当需要向对象或数组中新增一个属性或元素,并希望它在更新 View 时响应式地更新,就需要使用 $set方法来完成。
**vue2是用object.definedProperty来实现数据响应**的,**无法监听深层数据的变化**。
**Vue3 中使用Proxy对数据代理**通过ref和reactive将值和对象类型变为响应式对象,这样对它的修改和添加就能被vue捕获到,从而实现页面的自动刷新。
![vue2](https://img-blog.csdnimg.cn/c87935aadc2848fc933802aba179c78b.png)
![vue3](https://img-blog.csdnimg.cn/ea5ab63acc784860bb3418956659a830.png)
参考官网[响应式基础](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)
### 21.VUE路由中的history和hash的区别⭐⭐
* **地址栏带不带"#"号**
hash:`http://localhost:8080/#/`
history:`http://localhost:8080/`
* **都是利用浏览器的两种特性实现前端路由**
history是利用浏览历史记录栈的API实现
hash是监听location对象hash值变化事件来实现
* **相同的url**
**history**会触发添加到浏览器历史记录栈中,**hash**不会触发,
**history**需要后端配合,如果后端不配合刷新页面会出现**404**,hash不需要
**hashRouter原理**:通过**window.onhashchange**获取url中hash值
**historyRouter原理**:通过**history.pushState**,使用它做页面跳转不会触发页面刷新,使用**window.onpopstate**监听浏览器的前进和后退
![在这里插入图片描述](https://img-blog.csdnimg.cn/f7e1e94129fa405a9d82c206d5669d7b.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/6472cf8c228b498bab9f60c6512c7764.png)
详情可以看官网[不同历史模式|Vue Router](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)
### 22.Pinia和Vuex的区别⭐
* 支持选项式api和组合式api
* pinia没有mutations,只有state、getters、 actions
* pinia分模块不需要modules
* 支持TypeScript
* 自动化代码拆分
* pinia体积更小
* pinia可以直接修改state数据
参考<https://github.com/vuejs/rfcs/pull/271>
### 23.Vue Diff算法⭐
当组件创建和更新时,vue均会执行内部的update函数,该函数使用render函数生成虚拟dom树,将新旧两树进行对比,找到差异,最终更新到真实dom。
对比差异的过程叫做**diff**,vue在内部通过一个叫patch的函数完成该过程。
在对比时,vue采用**深度优先,同层比较的方式进行对比**。
在比较两个节点是否相同时,vue通过虚拟节点的key和tag来进行判断。
首先对根节点进行对比,如果相同将旧节点关联的真实dom的引用挂载到新节点上,然后根据需要更新属性到真实dom,然后再对比其子节点数组,如果不相同,则按照新节点的信息递归创建所有
**真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲**
**详情关注公中号【编程进阶路】**
真实dom,同时挂载到对应虚拟节点上,然后移除旧的dom。
对比其**子节点**数组时,vue对每个子节点数组使用两个指针。分别指向头尾,然后不断向中间靠拢来进行对比,目的是尽量复用真实dom,少创建和销毁真实dom。如果发现相同,则进入和根节点一样对比流程,如果不同,则移动真实dom到合适的位置。
这样一直递归的遍历下去,直到整颗树完成对比。
**Vue 中的优化策略**
在 Vue 的 diff 算法中引入了一些优化策略,以减少不必要的 diff 操作,提高 diff 性能,具体来说,有以下几点:
* **模板编译时静态节点标记**
Vue 在模板编译时,会对那些不需要变更的静态节点做标记,这样在后续渲染时,就可以省略对这些节点进行 diff 操作,减少 diff 的复杂度,提高性能。
* **列表遍历的 key 值优化**
在 Vue 中,当对一个列表进行遍历时,我们通常会为每个子元素指定一个 key 值来唯一标识它们,以便于后续的 diff 操作。在这个过程中,Vue 会通过记录 key 值来对比新旧节点是否发生了变化,如果没有变化,则会保留该节点对应的状态,避免不必要的重复渲染。
* **相同节点的合并优化**
在 diff 算法中,如果新旧节点是相同节点(即两个节点都是相同的标签和属性),并且都不需要更新子节点,则认为这两个节点是相同的,可以直接跳过对该节点的 diff 操作,提高 diff 性能。
Vue 的 diff 算法是一种高效的前端响应式实现方式,能够快速地对比新旧节点间的差异,并快速更新页面视图,提升了用户体验和程序性能。
### 24. 动态组件 & 异步组件⭐
动态组件和异步组件都是为了实现组件的动态渲染和按需加载,可以提高应用的性能和灵活性。
**动态组件** :渲染组件时,根据某个条件动态地选择组件。
![在这里插入图片描述](https://img-blog.csdnimg.cn/e139b3bd8e1b49f1b4b6bea3c6d3597a.png)
**异步组件**:组件的加载和渲染过程分成两部分进行,即先加载组件的代码和依赖,等加载成功后再将其渲染到页面上。这样可以避免在初始加载时一次性加载所有组件的代码和依赖,从而提高页面的性能和响应速度。在Vue中,可以使用工厂函数和组件的异步加载特性来实现异步组件的加载。
参考官网
[vue2异步组件](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)
[vue3异步组件](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)
### 25. 事件修饰符⭐
**.stop**:阻止单击事件继续传播
**.prevent**:提交事件不再重载页面
**.capture** :添加事件监听器时使用事件捕获模式
**.self** :当前元素自身时触发处理函数
**.once** :只会触发一次
**.passive** :提升移动端的性能。
详细请看官网[事件修饰符](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)
### 26.路由之间如何传参⭐
* 通过router-link路由导航跳转传递
<router-link to=/a/${id}
>routerlink传参
* 跳转时使用push方法拼接携带参数。
this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …ath: `/getlist/{id}`,
})
* 通过路由属性中的name来确定匹配的路由,通过params来传递参数。
this.$router.push({
name: ‘Getlist’,
params: {
id: id
}
})
* 使用path来匹配路由,然后通过query来传递参数。
this.$router.push({
path: ‘/getlist’,
query: {
id: id
}
})
注意:**query**有点像ajax中的**get**请求,而**params**像**post**请求。
**params**在地址栏中不显示参数,刷新页面,参数丢失,
其余方法在地址栏中显示传递的参数,刷新页面,参数不丢失。
详情请看[Vue-router之简单的路由传参三种方法](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)
### 27.页面在编译时发生闪烁怎么解决?⭐
首先了解原因:
* 在页面加载时,Vue.js 组件可能会在数据就绪之前渲染。这可能会导致元素在数据可用之前短暂显示其初始状态。
* 使用直接在 DOM 中书写的模板时,可能会出现一种叫做“未编译模板闪现”的情况:用户可能先看到的是还没编译完成的双大括号标签,直到挂载的组件将它们替换为实际渲染的内容。
解决办法:使用指令**v-cloak**
**v-cloak** 会保留在所绑定的元素上,直到相关组件实例被挂载后才移除。 **v-cloak**用于隐藏尚未完成编译的 DOM 模板。
{{ title }}
{{ content }}
在上面的示例中,v-cloak 用于隐藏元素,直到 fetchData 方法从服务器获取数据并更新状态。这将防止在数据加载之前闪烁效果。
相关可以看官网[**v-cloak**](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)
## 其他
关于前端其他面试题可以看这个
[前端面试题(附答案)完善中……](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)
### 最后
如果你已经下定决心要转行做编程行业,在最开始的时候就要对自己的学习有一个基本的规划,还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标,然后为之努力,坚持到底。如果你有幸看到这篇文章,希望对你有所帮助,祝你转行成功。
![](https://img-blog.csdnimg.cn/img_convert/54a6b04f29167333b139d2753f60db9f.png)