文末
从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。
个人将这段时间所学的知识，分为三个阶段：
第一阶段：HTML&CSS&JavaScript基础
第二阶段:移动端开发技术
第三阶段:前端常用框架
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；
-
大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。
monted(){
this.$post.a.b.c.getData(res=>{
if(res.result){
this.isTrue = true
}
})
}
2. **使用watch监听数据的变化** 举例：
props: {
tableData: {
type: Array,
default: [],
},
},
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**文档是这么说的  [**vue2列表渲染指南**](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0) **vue3.0**文档是这么说的  [**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中的数据修改后，可以实时的渲染页面 官网中是这么说的  ### 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捕获到，从而实现页面的自动刷新。   参考官网[响应式基础](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**监听浏览器的前进和后退   详情可以看官网[不同历史模式|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://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0) ### 26.路由之间如何传参⭐ * 通过router-link路由导航跳转传递
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 }}
![[工业自动化-1]：PLC架构与工作原理](https://img-blog.csdnimg.cn/ce10a1471ed14382bc58364cf8bd5209.png)
还没有评论，来说两句吧...