文末
从转行到现在,差不多两年的时间,虽不能和大佬相比,但也是学了很多东西。我个人在学习的过程中,习惯简单做做笔记,方便自己复习的时候能够快速理解,现在将自己的笔记分享出来,和大家共同学习。
个人将这段时间所学的知识,分为三个阶段:
第一阶段:HTML&CSS&JavaScript基础
第二阶段:移动端开发技术
第三阶段:前端常用框架
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
推荐学习方式:针对某个知识点,可以先简单过一下我的笔记,如果理解,那是最好,可以帮助快速解决问题;
-
大厂的面试难在,针对一个基础知识点,比如JS的事件循环机制,不会上来就问概念,而是换个角度,从题目入手,看你是否真正掌握。所以对于概念的理解真的很重要。
- 都是循环遍历数组中的每一项
- 每一次执行匿名函数都支持三个参数,数组中的当前项item,当前项的索引index,原始数组input
- 匿名函数中的this都是指window
- 只能遍历数组
- 能用forEach()做到循环的,map()同样也可以做到循环。
不同点
- forEach()方法不会返回执行结果,而是undefined。forEach() 被调用时,不会改变原数组,也就是调用它的数组(尽管 callback 函数在被调用时可能会改变原数组)。
- map()方法会分配内存空间存储新数组并返回,map 不修改调用它的原数组本身(当然可以在 callback 执行时改变原数组)。
es6新增symbol 数据类型
ES6 引入了一种新的原始数据类型Symbol,表示独一无二的值。不是对象,所以不能添加属性。基本上,它是一种类似于字符串的数据类型,不能与其他类型的值进行运算,会报错,它可以作为对象属性名。只有字符串和 symbol 类型才能用作对象属性名。没有两个symbol 的值是相等的。
v-model原理
父组件给子组件标签添加v-model 就是给子组件绑定了value属性,然后子组件内用prop创建value属性可以拿到父组件传递下来的值,名字必须是value,子组件内部更改value的时候通过$emit派发一个input事件并携带最新的值,然后v-model会监听input事件,并把最新的值同步赋值到v-modle绑定的变量上面
vue响应式原理
vue2中使用了ES5里面的Object.defineProperty方法,给对应data中的数据的每个值添加了set和get方法,当值被修改时,就会触发对应的set方法,set方法里会通知对应的watcher,watcher接收后将触发render函数,重新渲染数据。
- get 值是一个函数,当属性被访问时,会触发 get 函数
- set 值同样是一个函数,当属性被赋值时,会触发 set 函数
计算属性和监听属性
当我们定义一个计算属性的时候,计算属性是一个函数,最后函数返回的结果就是计算属性得到的结果。 当我们去第一次使用计算属性的时候,会执行计算属性并进行计算,然后将计算的结果缓存起来。 后续当我们再去使用计算属性的时候,如果计算属性中使用到的数据没有发生变化,那么就会直接读取缓存的结果,不会重新计算。 常用于惰性求值
watch主要监听里面的属性,当属性改变时,就调用不同的方法,只会监听数据的值是否发生改变,而不会监听地址的变化
路由的钩子
全局路由钩子
beforeEach
(全局前置钩子),意思是在每次每一个路由改变的时候都要执行一遍afterEach
(全局后置钩子) beforeEach是在页面加载之前的,而afterEach是在页面加载之后的,所以这些钩子是不会接受next函数,也不会改变导航本身
单个路由钩子
beforeEnter
可以直接在路由配置上直接定义beforeEnter,这些守卫与全局前置守卫的方法参数是一样的
组件路由钩子
beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
- 清除组件中的定时器
- 当页面有未关闭的窗口,或未保存的内容时,阻止页面跳转
- 保存相关内容到Vuex和Session中
vue中的data 为什么是个函数?
- Object是引用数据类型,如果不用function返回,每个组件的data都是内存的同一个地址,一个数据改变了其他也改变了;
- data是一个函数时,每个组件实例都有自己的作用域,每个实例相互独立,不会相互影响。
- 根实例对象data可以是对象也可以是函数(根实例是单例),不会产生数据污染情况
- 组件实例对象data必须为函数,目的是为了防止多个组件实例对象之间共用一个data,产生数据污染。采用函数的形式,initData时会将其作为工厂函数都会返回全新data对象
Token怎么存
npm i js-cookie //安装
在main.js引用
import cookie from 'js-cookie';\
Vue.prototype.$cookie = cookie;
var $cookie = this.$cookie;
//赋值
this.$cookie.set('token',$result.data.token)
//调用
headers:{
Authorization:this.$cookie.get('token')
}
//删除token
this.\$cookie.remove("token")
localStorage.setItem("key\_token",result.data.token); // localStorage方法赋值
localStorage.removeItem('token'); //删除localStorage指定键对应的值
localStorage.clear('token'); // 删除localStorage所有的的值
前端有几种缓存方式?
cookiec
当在客户端的浏览器上设置Cookie时,它可以持续数天,数月甚至数年。这样可以轻松保存用户首选项和访问信息 不需要任何服务器资源,并存储在用户的计算机上,因此不会给服务器带来额外的负担。 确实非常小,它的大小限制为4KB左右,不能储存大数据且不易读取
localStorage
5M大小 只能存储字符串格式的数据,所以最好在每次存储时把数据转换成json格式, 取出的时候再转换回来 生命周期是永久的, 除非主动删除数据,否则数据永远不会消失
sessionStorage
但当页面关闭后,sessionStorage 中的数据就会被清空。 indexdb、 50mb 允许储存大量数据,提供查找接口,支持异步操作,还能建立索引。indexDB缺点是:不支持DO操作;不能跨域。
数据请求方面
- 重输入url到页面展示经历那些过程
- 输入url地址
- 应用层进行DNS解析
- 应用层生成HTTP请求报文
- 传输层建立TCP连接
- 网络层使用IP协议来选择路线
- 数据链路层实现网络相邻节点间可靠的数据通信
- 物理层传输数据
- 服务器处理反向传输
- 服务器返回一个 HTTP 响应
基础学习:
前端最基础的就是 HTML , CSS 和 JavaScript 。
网页设计:HTML和CSS基础知识的学习
HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
动态交互:JavaScript基础的学习
JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。
1714838386994)]
动态交互:JavaScript基础的学习
JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。
[外链图片转存中…(img-j5jEfHKO-1714838386994)]