2024年前端最全前端笔记系列：Vue学习笔记（三）_vue3 学习 笔记 系列(1)，面试高频题目

❤️ 谢谢支持

喜欢的话别忘了 关注、点赞哦~。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

2. 注意

(1)应用层级的状态应该集中到单个 store 对象中。

(2)提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。

(3)异步逻辑都应该封装到 action 里面。

3. vue chrome devtools

4. vuex在项目中的使用

1. 复杂非父子通信**
2. 异步数据快照**

5. vuex持久化

https://github.com/robinvdvleuten/vuex-persistedstate

二. 组件库

1. 使用第三方插件

https://github.com/vuejs/awesome-vue#components–libraries

集合了来自社区贡献的数以千计的插件和库。

2. 使用第三方UI框架

1.饿了么UED团队推出的vue 前端框架

(1) PC框架：(element UI)

http://element.eleme.io/#/

https://github.com/ElemeFE/element

• 从0开始的话，可以通过以下命令

• 项目已经写了， 通过 cnpm i --save element-ui

(2) 移动端框架：(mint UI) 好久不更新维护了

https://mint-ui.github.io/docs/#/

https://github.com/ElemeFE/mint-ui

2. 有赞技术团队推出的vue移动端框架

移动端框架：(vant)

https://youzan.github.io/vant/#/zh-CN/

(1) 安装

(2) 正在加载

（3）无限滚动

(4) IndexBar 索引栏

三. 项目实战

1. betterScroll

主要完成的功能需要包含Better-Scroll实现页面中拖动滚动、拉

动属性等功能

https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/

(1) 初始化

//html
  <div class="kerwin" >
    <ul >
      <li v-for="item in datalist">{{item}}</li>
    </ul>
    <div class="loading-wrapper"></div>
  </div>
​
//js
import BScroll from 'better-scroll'
this.$nextTick(()=>{
    var myscroll = new BScroll('.kerwin',
        {
            pullDownRefresh: {
              threshold: 50,
              stop: 20
            },
            scrollbar: {
              fade: true,
              interactive: false // 1.8.0 新增
            },
            pullUpLoad: {
              threshold: 50
            }
        })
})
​
//css
.kerwin{
    height: 300px; //设置高度
    overflow:hidden; //溢出隐藏
   position: relative; //修正滚动条位置
  }

(2) 下拉刷新

myscroll.on('pullingDown',()=>{
        console.log("下拉了")
        setTimeout(() => {
          myscroll.finishPullDown() // 自动调用 .refresh()
        }, 1000)
     })

(3) 上拉加载

myscroll.on('pullingUp',()=>{
        console.log("到底了")
        setTimeout(() => {
          myscroll.finishPullUp() // 自动调用 .refresh()
        }, 1000)
     })

2. 移动端事件相关

(1)click事件300ms延迟

解决：

• 设置meta viewport
• fastclick

(2)Hammer.js

HammerJS是一个优秀的、轻量级的触屏设备手势库

• hammer.js https://github.com/hammerjs/hammer.js

• vue touch https://github.com/vuejs/vue-touch/tree/next

3. Git 复习

(1). 复习git的基本使用

git pull 拉取并merge代码

git add .; //添加 暂存区

git commit -m ‘zhu shi’// 提交到本地仓库并加上注释

git push origin master //往远程仓库推送代码

(2). 多人协作方式

a) 分支的构建

git branch -a 查看所有的分支

git checkout -b aaa 创建新的分支aaa

git checkout aaa 切换到aaa分支

git push origin aaa 推送aaa 分支到远程仓库aaa分支

git push origin master:aaa 推送master 到远程的aaa 分支

git branch -d 删除一个分支

b) 冲突的产生与解决

两人同时修改同一个文件，一个人上传远程仓库成功， 另一个人再上传会失败。

专业技能

一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题

• HTML+CSS
• JavaScript
• 前端框架
• 前端性能优化
• 前端监控
• 模块化+项目构建
• 代码管理
• 信息安全
• 网络协议
• 浏览器
• 算法与数据结构
• 团队管理
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。

其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等

由于文章篇幅有限，仅展示部分内容

大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。

其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等

由于文章篇幅有限，仅展示部分内容