html&css
1display有哪几个值
block 块级元素
特点：默认独占一行，子级块元素默认会继承父级块元素的宽度;可以设置宽高；子元素设置了宽度也不会影响父元素的宽度
inline-block 行内块元素
特点：行内块宽度默认由内容撑开，可以设置宽高；一行可以排列多个
常见的行内块元素：img input
inline 行内元素 特点：一行可以排列多个，不可以设置宽高 常见的行内元素：span a em strong i
table
2清除浮动的几种方法
答案：
1伪元素清除浮动
.clearfix::after {
clear: both;
display: block;
content: '';
}
2给父元素加 overflow: hidden;
3怎么解决margin塌陷(垂直并列关系塌陷，嵌套关系（父级元素塌陷）)
blog.csdn.net/fesfsefgs/a… 中解决垂直塌陷不对
答案：
1.给父盒子加border,
2.给父盒子加overflow:hidden
3为父盒子设定padding值
4为父盒子添加 display：table；
4常见的定位有哪几种
static 默认值。没有定位，元素出现在正常的流中,不脱标
relative 生成相对定位的元素，相对于其正常位置进行定位，不脱标
absolute 生成绝对定位的元素，相对于非静态定位的第一个父元素进行定位，脱标
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位，脱标
5flex布局
容器的属性
flex-wrap
flex-flow
justify-content
align-items
align-content
项目的属性
order
flex-grow
flex-shrink
flex-basis
flex
align-self
flex:1,是哪几个属性的缩写
flex属性的默认值为：0 1 auto(不放大会缩小）
flex-grow:定义项目的放大比例；默认为0，即 即使存在剩余空间，也不会放大；
flex-shrink：定义项目的缩小比例；默认为1，即 如果空间不足，该项目将缩小；
flex-basis： 定义在分配多余空间之前，项目占据的主轴空间（main size），浏览器根据此属性计算主轴是否有多余空间；默认值为auto，即 项目原本大小；
注意点：
父元素是flex盒子，子元素没有设置高度也会继承父元素的高度
父元素是flex盒子，块级元素会自动排成一行
6如何实现2边固定中间自适应布局，左侧固定右边自适应，右边固定左边自适应
7bfc blog.csdn.net/sinat_36422…
8如何让一个盒子居中
9盒子模型
10 html5和css3新特性（动画案例 fix)
11清除行内块间的间隙
父元素上设置下面的任意一个 font-size: 0; letter-spacing: -5px; word-spacing: -5px; 给子元素设置浮动
12元素超出一行用省略号表示，或者多行，需要设置哪几个属性
一行
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
多行
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
13rem和em的区别
14rem的原理
rem是一个单位，是相对于根标签html的font-size为参考点的 假设1rem为20px，那么 div{width:2rem}====>>>div{width:40px}
750px(设计稿总宽)/100px(750下对应的html的fontsize) = document.𝑐𝑙𝑖𝑒𝑛𝑡𝑊𝑖𝑑𝑡ℎ / x (x:求当前屏幕的html的fontsize)
js
1js数据类型（基本数据类型，引用数据类型）
基本数据类型
数字 字符串 布尔值 undefined null
引用数据类型
对象（数组 对象 函数）
2怎么判断数据类型（怎么区分一个对象是数组还是对象呢？）
typeof 123 //Number
typeof 'abc' //String
typeof true //Boolean
typeof undefined //Undefined
typeof null //Object
typeof { } //Object
typeof [ ] //Object
Object.prototype.toString.call(obj)
3哪些情况会隐式转换为false:数字0，空字符串，undefined，null
if (0) {//false
console.log(000);
}
if ('') {//false
console.log('')
}
if (undefined) {//false
console.log('undefined')
}
4变量提升和函数提升，函数表达式和函数声明的区别
5深拷贝和浅拷贝，怎么实现深拷贝
https://www.jianshu.com/p/1c142ec2ca45
6闭包
7数组和字符串的方法
数组常用的方法:splice slice contact join map filter sort find some every forEach
for forEach map的区别
字符串常用的方法 ：split
8ajax
9cookie sessionStorage localStorage
10跨域以及如何解决跨域
11常见的http状态码
12http的缓存机制
13事件冒泡和事件捕获
14节流和防抖的实现
es6
1 let 和 const
2 变量的解构赋值（数组和对象的解构赋值和默认值）
3数组的扩展（扩展运算符，Array.from ,Array.of ,find , fill ,flat, includes )
4对象的扩展（属性的间接表示法，属性名表达式，对象的扩展运算符）和对象的新增方法（Object.is() ,Object.assign() ,Object.keys() ,Object.values(), Object.entries()
5 for...of遍历
6 new Set(set结合扩展运算符可以实现数组的去重)
7 Promise 对象（和setTimeout)
8 async await
vue
1.vue底层原理
当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter / setter。
这些 getter / setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在 property 被访问和修改时通知变更。
每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。
<div id="demo">
<p>
<input type="text" v-model="name">
<span>name:{{name}}</span>
</p>
<p>
<input type="text" v-model="age">
<span>age:{{age}}</span>
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
const vm = new Vue({
el: "#demo",
data() {
return {
name: "bwf",
age: 20
}
}
})
</script>
let data = { name: "bwf", age: 20 } //m v vm
let vm = {}
for (const key in data) {
Object.defineProperty(vm, key, {
get() {
console.log("get");
return data[key]
},
set(newVal) {
console.log("set", newVal);
data[key] = newVal
}
})
}
// 修改了data中的数据，组件实例获取数据，调用get
// data.name = "11111";
// console.log('data中数据修改了', vm.name)
// 修改视图中的数据，通知data修改，调用set
vm.name = "2222";
console.log('vm组件实例中数据修改了', data.name)
2.v-for key
<body>
<div id="demo">
<button @click="onClick">向前增加一项</button>
<ul>
<li v-for="(item,index) in list" :key="index">{{item.name}} <input type="text"></li>
</ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
/**
* key值为索引
<li :key="0">bwf <input type="text"></li>
<li :key="1">wmy <input type="text"></li>
*
* <li :key="0">zs <input type="text"></li>
* <li :key="1">bwf <input type="text"></li>
* <li :key="2">wmy <input type="text"></li>
*
* key值为唯一
*
* <li :key="0">bwf <input type="text"></li>
<li :key="1">wmy <input type="text"></li>
<li :key="2">zs <input type="text"></li>
* <li :key="0">bwf <input type="text"></li>
* <li :key="1">wmy <input type="text"></li>
*
* key值若相同，会比较子节点，若属性或者标签名或者文本不一样就创建真实DOM；若比较结果是一样的，就不创建的
* key值不相同，那直接创建真实DOM
* **/
new Vue(
{
el: "#demo",
data: {
list: [
{ name: "bwf", age: 18, id: "0" },
{ name: "wmy", age: 18, id: "1" },
]
},
methods: {
onClick() {
this.list.unshift({ name: "zs", age: 18, id: "2" })
}
}
}
)
</script>
3.v-if v-show
4.v-model的实现
5.mvvm
6.实例生命周期钩子
7.修饰符 事件修饰符按键修饰符系统修饰键
8.计算属性和侦听器 区别
9.data必须是一个函数
<script>
// 1.一个组件的 data 选项为什么必须是一个函数
// 若data是一个对象
// const MyComponent = function () { };
// MyComponent.prototype.data = {
// b: 2
// }
// // 多个实例共享同一份data对象，多个实例取的是同一个地址的引用
// const component1 = new MyComponent();
// const component2 = new MyComponent();
// // 引用类型相互影响
// component1.data.b = 5;
// console.log(component2.data.b);//5
// data若是一个函数
// const MyComponent = function () {
// // 把实例属性挂载在自身上，否则要通过方法调用获取值
// this.data = this.data();
// };
// MyComponent.prototype.data = function () {
// return {
// b: 2,
// userInfo: {
// name: 'bwf'
// }
// }
// };
// const component1 = new MyComponent();
// const component2 = new MyComponent();
// component1.data.b = 5;
// component1.data.userInfo.name = 'wmywmy';
// console.log(component2.data.b); //2
// console.log(component2.data.userInfo.name); //bwf
// class MyComponent {
// constructor() {
// this.data = this.data();
// }
// data() {
// return {
// b: 2,
// userInfo: {
// name: 'bwf'
// }
// }
// }
// }
// const component1 = new MyComponent();
// const component2 = new MyComponent();
// component1.data.b = 5;
// component1.data.userInfo.name = 'wmywmy';
// console.log(component2.data.b); //2
// console.log(component2.data.userInfo.name); //bwf
// 2.函数构成自己的作用域
const myfun = function () {
return { name: 'xxx' }
}
const my1 = myfun()
const my2 = myfun()
my1.name = 'bbbb'
console.log(my1) // {name:'bbbb'}
console.log(my2) // {name:'xxx'}
//注意写法的区别
const obj = {
name: 'xxx'
}
const myfun = function () {
return obj
}
const my1 = myfun()
const my2 = myfun()
my1.name = 'bbbb'
console.log(my1) // {name:'bbbb'}
console.log(my2) // {name:'bbbb'}
</script>
10.通过 Prop 向子组件传递数据需要注意什么
11.父子相互传值
12.插槽
13.Vue.component() 和 Vue.use() 以及 局部注册
14.sync修饰符
15.keep-alive
16.过渡&动画
17.混入mixins
18.过滤器
19.深入响应式原理视图不渲染如何解决（cn.vuejs.org/v2/guide/re…
20.如何解决更新是异步的问题 $nextTick()方法的使用20.路由\
20.路由
21.vuex
22.vue3.0的改变有哪些
react
1class组件和函数式组件的区别
2class组件中的this指向问题
3常用的hook以及hooks产生的背景
useState useEffect useRef useCallback useMemo useReducer
