而计算属性,就是拿着写完的属性去加工计算,生成一个全新的属性。
计算属性直接被挂载到vm上,直接读取使用即可(_data里面没有计算属性)。
const vm = new Vue({
el: ‘#root’,
data: {
firstName: ‘张’,
lastName: ‘三’
},
computed: {
fullName: {
get() {
// 此处的this是vm
return this.firstName + ‘-’ + this.lastName;
}
}
}
})
get什么作用?
当有人读取fullName时,get就会被调用,且返回值就作为fullName的值。
(底层就是用Object.defineProperty的getter/setter实现的)
get什么时候被调用?
1.初次读取时会执行一次(往后就会取缓存里的数据)
2.所依赖的数据发生变化时会被再次调用(所以不用担心修改了值还会从缓存里获取)
{{fullName}}
{{fullName}}
{{fullName}}
{{fullName}}
set什么时候被调用?
当fullName被修改时。
如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生变化。
computed对比methods:
computed有缓存机制(复用),效率更高、调试方便(devtools上会有一个computed的分类)。
methods函数出现几次就调用几次,效率比较低。
计算属性简写
一般来说计算属性是不修改的,更多是读取出来展示。
并不是什么时候都能用简写,只有考虑读取,不考虑修改的时候才能用简写形式。
天气案例
监视属性watch:
1.当被监视的属性变化时,回调函数自动调用,进行相关操作;
2.监视的属性必须存在,才能进行监视!!(除了data属性,computed属性也能监视)
3.监视的两种写法:
(1)new Vue时传入watch配置;
(2)通过vm.$watch监视;
(明确要监视哪些属性的时候用第一个。创建实例的时候不知道要监视谁,后续根据用户的一些行为然后才知道要监视哪个属性就用第二个)
watch配置属性:
immediate如果为true 代表如果在 wacth 里声明了之后,就会立即先去执行里面的handler方法
immediate (立即的) 初始化时让handlder调用一下
handler(newVal, oldVal) 当监视的属性发生改变的时候调用,参数可以拿到改变前后的值
deep 深度监听,可以监测多层级数据的改变
为什么配置项里的isHot不用加引号呢?
因为对象里的引号不用自己写,如果要用对象里的属性要加引号
1.7.1 深度监视
1.Vue中的watch默认不监测对象内部值的变化(监测一层)
2.配置deep:true可以监测对象内部值变化(监测多层)
备注:
(1)Vue默认是可以监视到多层级数据的改变的(修改number.a页面发生改变可以看出)。但是watch属性默认是不可以的,要想可以就得打开深度监视(为了效率)。
(2)使用watch时根据数据的具体结果,决定是否采用深度监视。
那么怎么才能监视上呢?
在handler方法上面加上deep:true即可
1.7.2 监视属性的简写
const vm = new Vue({
el: ‘#root’,
data: {
isHot: true
},
computed: {
info() {
return this.isHot ? ‘炎热’ : ‘凉爽’;
}
},
methods: {
changeWeather() {
this.isHot = !this.isHot
}
},
watch: {
// 正常写法:
/* isHot: {
// immediate: true,
// deep:true,
handler(newValue, oldValue) {
console.log(‘isHot被修改了’, newValue, oldValue);
}
}, */
// 简写:
isHot(newValue, oldValue) {
console.log(‘isHot被修改了’, newValue, oldValue);
}
}
});
// 正常写法:
vm.$watch(‘isHot’, {
// immediate: true,
// deep:true,
handler(newValue, oldValue) {
console.log(‘isHot被修改了’, newValue, oldValue);
}
});
// 简写:
vm.$watch(‘isHot’, function(newValue, oldValue) {
console.log(‘isHot被修改了’, newValue, oldValue);
});
1.7.3 watch对比computed
1.computed能完成的功能,watch都能完成。
2.watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作。(点击按钮让a过一秒+1,)
两个重要的小原则:
1.所有被Vue管理的函数,最好写成普通函数,这样this的指向才是vm 或 组件实例对象。
2.所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数、Promise的回调函数等),最好写成箭头函数,这样this的指向才是vm 或 组件实例对象。
class样式:
写法==:class=“xxx”== xxx可以是字符串、对象、数组。
字符串写法适用于:类名不确定,要动态获取。
对象写法适用于:要绑定多个样式,个数不确定,名字也不确定。
数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用。
style样式:
:style="{fontSize: xxx}"其中xxx是动态值。(注意样式名得是小驼峰)
:style="[a,b]"其中a、b是样式对象。
条件渲染
=== 等值等类型
v-if
用来控制页面元素是否展示
写法:
v-if=“表达式”
v-else-if=“表达式”
v-else=“表达式”
适用于:切换频率较低的场景。
特点:不展示的DOM元素直接被移除。
注意:v-if可以和:v-else-if、v-else一起使用,但要求结构不能被“打断”。
v-show
写法:v-show=“表达式”
适用于:切换频率较高的场景。
特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉
v-show底层指令其实就是调整display:none
v-if和template
-
如果需要频繁切换 v-show 较好
-
当条件不成立时, v-if 的所有子节点不会解析(项目中使用)1.10. 列表渲染
列表渲染
面试题:react、vue中的key有什么作用?(key的内部原理)
- 虚拟DOM中key的作用:
key是虚拟DOM对象的标识,当数据发生变化时,Vue会根据【新数据】生成【新的虚拟DOM】,
随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较,比较规则如下:
2.对比规则:
(1).旧虚拟DOM中找到了与新虚拟DOM相同的key:
①.若虚拟DOM中内容没变, 直接使用之前的真实DOM!
②.若虚拟DOM中内容变了, 则生成新的真实DOM,随后替换掉页面中之前的真实DOM。
(2).旧虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真实DOM,随后渲染到到页面。
-
用index作为key可能会引发的问题:
-
若对数据进行:逆序添加、逆序删除等破坏顺序操作:
会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
- 如果结构中还包含输入类的DOM:
会产生错误DOM更新 ==> 界面有问题。
- 开发中如何选择key?:
1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示,
使用index作为key是没有问题的。
immediate (立即的) 初始化时让handlder调用一下
简单来说,JSON.stringify () 就是将值转换为相应的 JSON 格式字符串。
v-model.trim用于去掉输入框内首尾空格
账号:
密码:
年龄:
提交
v-model收集的是value值,且要给标签配置value值。
总结
v-model的三个修饰符:
lazy:失去焦点再收集数据
number:输入字符串转为有效的数字
trim:输入首尾空格过滤
v-text指令
1.作用:向其所在的节点中渲染文本内容。
2.与插值语法的区别:v-text会替换掉节点中的内容,{undefined{xx}}则不会。
v-html指令
1.作用:向指定节点中渲染包含html结构的内容。
2.与插值语法的区别:
v-html会替换掉节点中所有的内容,{{xx}}则不会。
v-html可以识别html结构。
3.严重注意:v-html有安全性问题!!!!
在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击。
一定要在可信的内容上使用v-html,永不要用在用户提交的内容上!
v-once指令
-
v-once所在节点在初次动态渲染后,就视为静态内容了。
-
以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能。
初始化的n值是:{{ n }}
当前的n值是:{{ n }}
<button @click=“n++”>点我n+1
Vue 实例有⼀个完整的⽣命周期,也就是从new Vue()、初始化事件(.once事件)和生命周期、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程,称这是Vue的⽣命周期。
回调函数是你留个处理方法给事件,事件发生了以后会自动执行你留下调处理方法
钩子函数是好比找了个代理,监视事件是否发生,如果发生了这个代理就执行你的事件处理方法;在这个过程中,代理就是钩子函数
在某种意义上,回调函数做的处理过程跟钩子函数中要调用调方法一样
但是有一点: 钩子函数一般是由事件发生者提供的。直白了说,它留下一个钩子,这个钩子的作用就是钩住你的回调方法
==钩子函数是在一个事件触发的时候,在系统级捕获到了他,然后做一些操作。==一段用以处理系统消息的程序,用以处理系统消息的程序,是说钩子函数是用于处理系统消息的
======================================================================
传统方式编写应用
建议自行观看,讲的很清晰
组件化方式编写应用
组件的思想,其实就封装。能很好的实现代码复用技术
代码复用是写一次处处用(通过引用的方式),代码复制是写一次复制一次
组件的定义
非单文件组件就是一个html页面里有多个组件
先来补充下template的功能
2.2.1 template
template用来定义html结构,其实``为模板字符串。它可以随意的换行
第一种情况,有 template:
如果 el 绑定的容器没有任何内容,就一个空壳子,但在 Vue 实例中写了 template,就会编译解析这个 template 里的内容,生成虚拟 DOM,最后将 虚拟 DOM 转为 真实 DOM 插入页面(其实就可以理解为 template 替代了 el 绑定的容器的内容)。
第二种情况,没有 template:
没有 template,就编译解析 el 绑定的容器,生成虚拟 DOM,后面就顺着生命周期执行下去
2.2.2 基本使用
Vue中使用组件的三大步骤:
-
定义组件(创建组件)
-
注册组件
-
使用组件(写组件标签)
定义组件
使用Vue.extend(options)创建,其中options和new Vue(options)时传入的那个options几乎一样,但也有点区别;
区别如下:
el不要写,为什么? ——— 最终所有的组件都要经过一个vm的管理,由vm中的el决定服务哪个容器。
组件中定义的data必须写成函数,为什么? ———— 避免组件被复用时,数据存在引用关系。
讲解一下面试小问题:data必须写成函数:
这是 js 底层设计的原因:举个例子
对象形式
let data = {
a: 99,
b: 100
}
let x = data;
let y = data;
// x 和 y 引用的都是同一个对象,修改 x 的值, y 的值也会改变
x.a = 66;
console.loh(x); // a:66 b:100
console.log(y); // a:66 b:100
函数形式
其中data可省略
function data() {
return {
a: 99,
b: 100
}
}
let x = data();
let y = data();
console.log(x === y); // false
//函数每调用一次就创建一个新的对象返回给他们
备注:使用template可以配置组件结构。
创建一个组件案例:Vue.extend() 创建
注册组件
-
局部注册:靠new Vue的时候传入components选项
-
全局注册:靠Vue.component(‘组件名’,组件)
局部注册
全局注册
写组件标签
{{msg}}
2.2.3 几个注意点
关于组件名:
一个单词组成:
-
第一种写法(首字母小写):school
-
第二种写法(首字母大写):School
多个单词组成:
-
第一种写法(kebab-case命名):my-school
-
第二种写法(CamelCase命名):MySchool (需要Vue脚手架支持)
备注:
(1).组件名尽可能回避HTML中已有的元素名称,例如:h2、H2都不行。
(2).可以使用name配置项指定组件在开发者工具中呈现的名字。
关于组件标签
第一种写法:
第二种写法:
备注:不用使用脚手架时,会导致后续组件不能渲染。
一个简写方式:
const school = Vue.extend(options) 可简写为:const school = options
2.2.4 组件的嵌套
2.2.5 VueComponent
school组件本质是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue.extend生成的。
我们只需要写<school/>
或<school><school/>
,解析时会帮我们创建school组件的实例对象,即Vue帮我们执行的:new VueComponent(options)。
特别注意:每次调用Vue.extend,返回的都是一个全新的VueComponent!!!!(这个VueComponent可不是实例对象)
关于this指向:
组件配置中:data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。
new Vue(options)配置中:data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。
VueComponent的实例对象,以后简称vc(也可称之为:组件实例对象)。
Vue的实例对象,以后简称vm。
Vue 在哪管理 VueComponent?
2.2.6 一个重要的内置关系
-
一个重要的内置关系:VueComponent.prototype.proto === Vue.prototype
-
为什么要有这个关系:让组件实例对象(vc)可以访问到 Vue原型上的属性、方法。
单文件组件就是将一个组件的代码写在 .vue 这种格式的文件中,webpack 会将 .vue 文件解析成 html,css,js这些形式。
单文件组件写法介绍
2.3.1 定义组件
School.vue
学校名称:{{name}}
学校地址:{{address}}
<button @click=“showName”>点我提示学校名
Student.vue
学生名称:{{name}}
学生地址:{{address}}
<button @click=“showName”>点我提示学生地址
2.3.2 注册组件
把组件写到App汇总组件里
App.vue
用来汇总所有的组件(大总管)
2.3.3 写组件标签
在入口文件main.js,通过template写组件标签
main.js
在这个文件里面创建 vue 实例
import App from ‘./App.vue’
new Vue({
el:‘#root’,
template:<App></App>
,
components:{App},
})
最后通过index.html页面来显示
引入vue.js文件和main.js文件即可
index.html
在这写 vue 要绑定的容器
打开index.html看下
es6不支持模块化语法,所以不显示。
我们下面用脚手架即可
=========================================================================
安装node.js会自动安装npm命令
配置 npm 淘宝镜像:npm config set registry https://registry.npm.taobao.org
使用前置:
第一步(没有安装过的执行):全局安装 @vue/cli
npm install -g @vue/cli
第二步:切换到要创建项目的目录,然后使用命令创建项目
vue create xxxxx
第三步:启动项目
npm run serve
脚手架创建成功
├── node_modules
├── public
│ ├── favicon.ico: 页签图标
│ └── index.html: 主页面
├── src
│ ├── assets: 存放静态资源
│ │ └── logo.png
│ │── component: 存放组件
│ │ └── HelloWorld.vue
│ │── App.vue: 汇总所有组件
│ │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件
├── README.md: 应用描述文件
├── package-lock.json:包版本控制文件
图里没有截取完整,在 main.js中还有
render: h => h(App) 它的作用就是将App汇总组件放入容器中
new Vue({
el: ‘#app’,
// 使用组件
router,
store,
// 将App组件放入容器中
render: h => h(App)
})
更换我们前面写的组件看看能不能生效
使用 import 导入第三方库的时候不需要 加 ‘./’
导入我们自己写的:
import App from ‘./App.vue’
导入第三方的
import Vue from ‘vue’
不需要在 from ‘vue’ 加 ‘./’ 的原因是第三方库 node_modules 人家帮我们配置好了。
我们通过 import 导入第三方库,在第三方库的 package.json 文件中确定了我们引入的是哪个文件
vue.js与vue.runtime.xxx.js的区别:
vue.js是完整版的Vue,包含:核心功能+模板解析器。
vue.runtime.xxx.js是运行版的Vue,只包含:核心功能;没有模板解析器。
因为vue.runtime.xxx.js没有模板解析器,所以不能使用template配置项,需要使用render函数接
收到的createElement函数去指定具体内容。
-
拆分静态组件:组件要按照功能点拆分,命名不要与html元素冲突。
-
实现动态组件:考虑好数据的存放位置,数据是一个组件在用,还是一些组件在用:
-
一个组件在用:放在组件自身即可。
-
一些组件在用:放在他们共同的父组件上(状态提升)。
-
实现交互:从绑定事件开始。
-
使用v-model时要切记:v-model绑定的值不能是props传过来的值,因为props是不可以修改的!
-
props传过来的若是对象类型的值,修改对象中的属性时Vue不会报错,但不推荐这样做。
Cookie
Cookie是最早被提出来的本地存储方式,在此之前,服务端是无法判断网络中的两个请求是否是同一用户发起的,为解决这个问题,Cookie就出现了。Cookie 是存储在用户浏览器中的一段不超过 4 KB 的字符串。它由一个名称(Name)、一个值(Value)和其它几个用 于控制 Cookie 有效期、安全性、使用范围的可选属性组成。不同域名下的 Cookie 各自独立,每当客户端发起请求时,会自动把当前域名下所有未过期的 Cookie 一同发送到服务器。
Cookie的特性:
Cookie一旦创建成功,名称就无法修改
Cookie是无法跨域名的,也就是说a域名和b域名下的cookie是无法共享的,这也是由Cookie的隐私安全性决定的,这样就能够阻止非法获取其他网站的Cookie
每个域名下Cookie的数量不能超过20个,每个Cookie的大小不能超过4kb
有安全问题,如果Cookie被拦截了,那就可获得session的所有信息,即使加密也于事无补,无需知道cookie的意义,只要转发cookie就能达到目的
Cookie在请求一个新的页面的时候都会被发送过去
Cookie 在身份认证中的作用
客户端第一次请求服务器的时候,服务器通过响应头的形式,向客户端发送一个身份认证的 Cookie,客户端会自动 将 Cookie 保存在浏览器中。
随后,当客户端浏览器每次请求服务器的时候,浏览器会自动将身份认证相关的 Cookie保存,通过请求头的形式发送给 服务器,服务器即可验明客户端的身份。
Cookie 不具有安全性
由于 Cookie 是存储在浏览器中的,而且浏览器也提供了读写 Cookie 的 API,因此 Cookie 很容易被伪造,不具有安全 性。因此不建议服务器将重要的隐私数据,通过 Cookie 的形式发送给浏览器。
注意:千万不要使用 Cookie 存储重要且隐私的数据!比如用户的身份信息、密码等。
Session
Session是另一种记录客户状态的机制,不同的是Cookie保存在客户端浏览器中,而Session保存在服务器上。客户端访问服务器的时候,服务器把客户端信息以某种形式记录在服务器上。这就是Session。客户端再次访问时只需要从该Session中查找该客户的状态就可以了。session是一种特殊的cookie。cookie是保存在客户端的,而session是保存在服务端。
为什么要用session
由于cookie 是存在用户端,而且它本身存储的尺寸大小也有限,最关键是用户可以是可见的,并可以随意的修改,很不安全。那如何又要安全,又可以方便的全局读取信息呢?于是,这个时候,一种新的存储会话机制:session 诞生了
session原理
当客户端第一次请求服务器的时候,服务器生成一份session保存在服务端,并将该数据(session)的id以cookie的形式传递给客户端;以后的每次请求,浏览器都会自动的携带cookie来访问服务器(session数据id)。
图示:
session 标准工作流程
LocalStorage
LocalStorage是HTML5新引入的特性,由于有的时候我们存储的信息较大,Cookie就不能满足我们的需求,这时候LocalStorage就派上用场了。
LocalStorage的优点:
-
在大小方面,LocalStorage的大小一般为5MB,可以储存更多的信息
-
LocalStorage是持久储存,并不会随着页面的关闭而消失,除非主动清理,不然会永久存在
-
仅储存在本地,不像Cookie那样每次HTTP请求都会被携带
LocalStorage的缺点:
-
存在浏览器兼容问题,IE8以下版本的浏览器不支持
-
如果浏览器设置为隐私模式,那我们将无法读取到LocalStorage
-
LocalStorage受到同源策略的限制,即端口、协议、主机地址有任何一个不相同,都不会访问
LocalStorage的常用API:
// 保存数据到 localStorage
localStorage.setItem(‘key’, ‘value’);
// 从 localStorage 获取数据
let data = localStorage.getItem(‘key’);
// 从 localStorage 删除保存的数据
localStorage.removeItem(‘key’);
// 从 localStorage 删除所有保存的数据
localStorage.clear();
// 获取某个索引的Key
localStorage.key(index)
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
![](https://i-blog.csdnimg.cn/blog_migrate/64a8576e0d25ba194628edb9bb1c6a18.jpeg)
完整版面试题资料免费分享,只需你点赞支持,动动手指点击此处就可免费领取了。
回顾项目
往往在面试时,面试官根据你简历中的项目由点及面地展开问答,所以请对你做过的最好的项目进行回顾和反思。回顾你做过的工作和项目中最复杂的部分,反思你是如何完成这个最复杂的部分的。
面试官会重点问你最复杂的部分的实现方法和如何优化。重点要思考如何优化,即使你项目中没有对那部分进行优化,你也应该预先思考有什么优化的方案。如果这部分答好了,会给面试官留下很不错的印象。
重点在于基础知识
这里指的基础知识包括:前端基础知识和学科基础知识。
前端基础知识:html/css/js 的核心知识,其中 js 的核心知识尤为重要。比如执行上下文、变量对象/活动对象(VO/AO)、作用域链、this 指向、原型链等。
学科基础知识:数据结构、计算机网络、算法等知识。你可能会想前端不需要算法,那你可能就错了,在大公司面试,面试官同样会看重学生这些学科基础知识。
你可能发现了我没有提到React/Vue
这些框架的知识,这里得说一说,大公司不会过度的关注这方面框架的知识,他们往往更加考察学生的基础。
这里我的建议是,如果你至少使用或掌握其中一门框架,那是最好的,可以去刷刷相关框架的面试题,这样在面试过程中即使被问到了,也可以回答个 7788。如果你没有使用过框架,那也不需要太担心,把重点放在基础知识和学科基础知识之上,有其余精力的话可以去看看主流框架的核心思想。
全局读取信息呢?于是,这个时候,一种新的存储会话机制:session 诞生了
session原理
当客户端第一次请求服务器的时候,服务器生成一份session保存在服务端,并将该数据(session)的id以cookie的形式传递给客户端;以后的每次请求,浏览器都会自动的携带cookie来访问服务器(session数据id)。
图示:
session 标准工作流程
LocalStorage
LocalStorage是HTML5新引入的特性,由于有的时候我们存储的信息较大,Cookie就不能满足我们的需求,这时候LocalStorage就派上用场了。
LocalStorage的优点:
-
在大小方面,LocalStorage的大小一般为5MB,可以储存更多的信息
-
LocalStorage是持久储存,并不会随着页面的关闭而消失,除非主动清理,不然会永久存在
-
仅储存在本地,不像Cookie那样每次HTTP请求都会被携带
LocalStorage的缺点:
-
存在浏览器兼容问题,IE8以下版本的浏览器不支持
-
如果浏览器设置为隐私模式,那我们将无法读取到LocalStorage
-
LocalStorage受到同源策略的限制,即端口、协议、主机地址有任何一个不相同,都不会访问
LocalStorage的常用API:
// 保存数据到 localStorage
localStorage.setItem(‘key’, ‘value’);
// 从 localStorage 获取数据
let data = localStorage.getItem(‘key’);
// 从 localStorage 删除保存的数据
localStorage.removeItem(‘key’);
// 从 localStorage 删除所有保存的数据
localStorage.clear();
// 获取某个索引的Key
localStorage.key(index)
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
[外链图片转存中…(img-LpkWTsVX-1712342804811)]
[外链图片转存中…(img-W920Q2TB-1712342804812)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
[外链图片转存中…(img-aRwmT7nY-1712342804812)]
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
![](https://i-blog.csdnimg.cn/blog_migrate/64a8576e0d25ba194628edb9bb1c6a18.jpeg)
完整版面试题资料免费分享,只需你点赞支持,动动手指点击此处就可免费领取了。
回顾项目
往往在面试时,面试官根据你简历中的项目由点及面地展开问答,所以请对你做过的最好的项目进行回顾和反思。回顾你做过的工作和项目中最复杂的部分,反思你是如何完成这个最复杂的部分的。
面试官会重点问你最复杂的部分的实现方法和如何优化。重点要思考如何优化,即使你项目中没有对那部分进行优化,你也应该预先思考有什么优化的方案。如果这部分答好了,会给面试官留下很不错的印象。
重点在于基础知识
这里指的基础知识包括:前端基础知识和学科基础知识。
前端基础知识:html/css/js 的核心知识,其中 js 的核心知识尤为重要。比如执行上下文、变量对象/活动对象(VO/AO)、作用域链、this 指向、原型链等。
学科基础知识:数据结构、计算机网络、算法等知识。你可能会想前端不需要算法,那你可能就错了,在大公司面试,面试官同样会看重学生这些学科基础知识。
你可能发现了我没有提到React/Vue
这些框架的知识,这里得说一说,大公司不会过度的关注这方面框架的知识,他们往往更加考察学生的基础。
这里我的建议是,如果你至少使用或掌握其中一门框架,那是最好的,可以去刷刷相关框架的面试题,这样在面试过程中即使被问到了,也可以回答个 7788。如果你没有使用过框架,那也不需要太担心,把重点放在基础知识和学科基础知识之上,有其余精力的话可以去看看主流框架的核心思想。