专业技能
一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题
- HTML+CSS
- JavaScript
- 前端框架
- 前端性能优化
- 前端监控
- 模块化+项目构建
- 代码管理
- 信息安全
- 网络协议
- 浏览器
- 算法与数据结构
- 团队管理
- 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。
其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等
由于文章篇幅有限，仅展示部分内容
购物车
<product-item
v-for=“product in products”
:title=“product.title”
:key=“product.id”
总数为：{{ totalCount }}
子组件数据变化时，通过 $emit() 触发自定义事件
Vue.component(‘product-item’, {
// …
methods: {
countIns () {
this.$emit(‘count-change’);
this.count++
}
}
})
子组件向父组件传值
父组件监听子组件自定义事件，并设置处理程序
<product-item
@count-change=“totalCount++”
=================================================================
子组件触发事件时可以向父组件传值
Vue.component(“product-item”, {
props: [‘title’],
template: `
商品名称：{{ title }}；商品个数：{{ count }}
<button @click=“countIns1”> +1
<button @click=“countIns2”> +5
`,
data () {
return { count: 0 }
}.
methods: {
countIns1 () {
this.$emit(‘count-change’, 1);
this.count++
}
countIns5 () {
this.$emit(‘count-change’, 5);
this.count += 5
}
}
})
父组件在监听事件时需要接受子组件传递的数据
<product-item
@count-change=“totalCount += $event”
父组件在监听事件时需要接受子组件传递的数据
<product-item
@count-change=“onCountChange”
=====================================================================
v-model 用于组件时，需要通过 props 与自定义事件实现
输入内容为：{{ iptValue }}
=================================================================
兄弟组件或完全无关的两个组件
-
兄弟组件传值
-
EventBus
-
其他传值方式
================================================================
兄弟组件可以通过父组件进行数据中转
<com-a
@value-change=“value = $event”
<com-b
:value=“value”
==================================================================
当组件嵌套关系复杂时，根据组件关系传值会较为繁琐
组件为了数据中转，data 中会存在许多与当前组件功能无关的数据
-
EventBus（事件总线）是一个独立的事件中心，用于管理不同组件间的传值操作
-
EventBus 通过一个新的 Vue 实例来管理组件传值操作，组件通过给实例注册事件、调用事件来实现数据传递
// Event.js
var bus = new Vue()
发送数据的组件触发 bus 事件，接收的组件给 bus 注册对应事件
Vue.component(“product-item”, {
template: `
商品名称：苹果；商品个数：{{ count }}
<button @click=“countIns”> +1
`,
data () {
return { count: 0 }
}.
methods: {
countIns () {
bus.$emit(‘countChange’, 1);
this.count++;
}
}
})
给 bus 注册对应事件通过 $on() 操作
Vue.component(“product-total”, {
template: `
总个数为：{{ totalCout }}
`,
data () {
return { totalCout: 0 }
}.
created () {
bus.$on(‘countChange’, (productCount) => {
this.totalCount += productCount;
})
}
})
最后创建根实例执行代码即可
================================================================
-
$root
-
$refs
$root 用于访问当前组件树根实例，设置简单的 Vue 应用时可以通过此方式进行组件传值
父组件数据：{{ count }}
除了 $root，Vue.js 中还提供了 $parent 与 $children 用于便捷访问父子组件
$refs 用于获取设置了 ref 属性的 HTML 标签或子组件
给普通 HTML 标签设置 ref 属性，$refs 可以获取 DOM 对象
<button @click=“fn”>按钮
给子组件设置 ref 属性，渲染后可通过 $refs 获取子组件实例
按钮
给子组件设置 ref 属性，渲染后可通过 $refs 获取子组件实例
按钮
==============================================================
组件插槽可以便捷的设置组件内容
示例内容
组件的主体内容
==============================================================
如果我们希望组件标签可以像 HTML 标签一样设置内容，那么组件的使用灵活度会很高
示例内容1
示例内容2
但平常我们书写的组件，组件首尾标签中书写的内容会被抛弃
示例内容
组件的主体内容
我们需要通过 进行插槽设置
示例内容
组件的主体内容
需要注意模板内容的渲染位置
这里只能访问父组件的数据
{{ parValue }}
我们可以在 中为插槽设置默认值，也称为后备内容
var ComA = {
template: `
组件 A：
这是默认文本
`,
data () {
return {
value: ‘子组件数据’
}
}
}
==============================================================
如果组件中有多个位置需要设置插槽，据需要给 设置 name，称为具名插槽
组件头部内容
组件主体内容第一段
组件主体内容第二段
组件底部内容
<template #header>
组件头部内容
<template #default>
组件主体内容第一段
组件主体内容第二段
<template #footer>
组件底部内容
===============================================================
用于让插槽可以使用子组件的数据
组件将需要被插槽使用的数据通过 v-bind 绑定给 ，这种用于给插槽传递数据的属性称为插槽 prop
var ComA = {
template: `
组件 A：
这是默认文本
`,
data () {
return {
value: ‘子组件数据’
}
}
}
组件绑定数据后，插槽中需要通过 v-slot 接收数据
{{ dataObj.value }}
如果只存在默认插槽，同时又需要接收数据，可以进行简写
{{ dataObj.value }}
{{ dataObj.value }}
还可以通过 ES6 的解构操作进行数据接收
{{ value }}
==============================================================
动态组件适用于多个组件频繁切换的处理
用于将一个 ‘元组件’ 渲染为动态组件，以 is 属性值决定渲染那个组件
用于实现多个组件的快速切换，例如选项卡效果
<button
v-for=“title in titles”
:key=“title”
@click=“currentCom = title”
{{ title }}
is 属性会在每次切换组件时，Vue 都会创建一个新的组件实例
var ComA = {
template: <div> A组件内容：<input type="text"> </div>
};
var ComC = {
template: <div> B组件内容：<input type="text"> </div>
};
var ComB = {
template: <div> C组件内容：<input type="text"> </div>
};
=======================================================================
主要用于保留组件状态或避免组件重新渲染
include 属性用于指定那些组件会被缓存，具有多种设置方式
exclude 属性用于指定哪些组件不会被缓存
max 属性用于设置最大缓存个数
==============================================================
用于在 Vue 插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡、动画效果
=======================================================================
-
用于给元素和组件添加进入/离开过渡
-
条件渲染（v-if）
-
条件展示（v-show）
-
动态组件
-
组件根节点
-
组件提供了6个 class 用于设置过渡的具体效果
-
进入的类名
-
v-enter
-
v-enter-to
-
v-enter-active
-
离开的类名
-
v-leave
-
v-leave-to
-
v-leave-active
============================================================================
给组件设置 name 属性，可以用于给多个元素、组件设置不同的过渡效果，这时需要将 v- 更改为对应的 name- 的形式
例如：
<transiton name="demo"> 的对应类名前缀为：demo-enert、demo-leave
通过 appear 属性，可以让组件在初始渲染时实现过渡
=================================================================
自定义类名比普通类名优先级更高，在使用第三方 CSS 动画库时非常有用
-
用于设置自定义过渡类名的属性如下：
-
enter-…
-
enter-class
-
enter-active-class
-
enter-to-class
-
leave-…
-
leave-class
-
leave-active-class
-
leave-to-class
-
appear-…
-
appear-class
-
appear-to-class
-
appear-active-class
<transition
enter-active-class = “test”
leave-active-class = “test”
Animate.css 是一个第三方 CSS 动画库，通过设置类名来给元素添加各种动画效果
<transition
enter-active-class = “animate_bounceInDown”
leave-active-class = “animate_bounceOutDown”
-
使用注意：
-
animate_ 前缀与 compat 版本
-
基础类名 animated
=============================================================================
-
用于给列表统一设置过渡动画
-
tag 属性用于设置容器元素，默认为
-
过渡会应用于内部元素，而不是容器
-
子节点必须有独立的 key 动画才能正常工作
当列表元素变更导致元素位移，可以通过 .v-move 类名设置移动时的效果
专业技能
一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题
- HTML+CSS
- JavaScript
- 前端框架
- 前端性能优化
- 前端监控
- 模块化+项目构建
- 代码管理
- 信息安全
- 网络协议
- 浏览器
- 算法与数据结构
- 团队管理
- 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。
其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等
由于文章篇幅有限，仅展示部分内容
686
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
