2020/9/22
1.react vue jquery三者区别
jquery和框架的区别
框架:数据和视图分离,以数据驱动视图,只关心数据变化,dom操作被封装。数据驱动
jquery:依靠dom操作去组合业务逻辑。事件驱动
React和Vue的区别
两者的区别
-
Vue—本质是MVVM框架,由MVC发展而来
-
React—本质是前端组件化框架,由后端组件化发展而来
模板的区别 -
Vue—使用模板(最初由Angular提出)
-
React—使用JSX
-
模板语法上,更倾向于JSX
-
模板分离上,更倾向于Vue(React模板与JS混在一起,未分离)
组件化的区别1.React本身就是组件化,没有组件化就不是React
2.Vue也支持组件化,不过是在MVVM上的扩展
3.对于组件化,更倾向于React,做得彻底而清新
两者共同点
1.都支持组件化
2.都是数据驱动视图
2.设置元素剧中的方式
- 已知盒子宽度的情况用margin
.wrap{width:200px;
height:200px;
border:1px solid red;
margin:0 auto;} //宽度必须给值
<div class="wrap"></div>
- 不定宽块元素水平居中,改变为行内元素,然后使用text-align:center处理,多用于不定项导航的ul的居中
.nav{text-align:center;}
.nav ul{display:inline;}
<div class="nav">
<ul>
<li>1111111</li>
<li>2222222</li>
</ul>
</div>
- 父元素浮动left:50%;
同时要设置position:relative(给子元素相对定位一个参考)
子元素相对定位position:relative;left:-50%;
.wrap{position:relative;
left:50%;
float:left;}
.box{position:relative;
left:-50%;}
<div class="wrap">
<div class="box">一个子级盒子</div>
<div>
- flex布局
.wrap{
display: flex;
flex-direction: column;
justify-content: center;
}
- position和margin
.wrap{
width: 200px;
height: 200px;
background-color: lightskyblue;
position: relative;
}
.box{
width: 100px;
height: 100px;
background-color: hotpink;
position: absolute;
left:50%;
margin-left: -50px;
}
<div class="wrap">
<div class="box">一个子级盒子</div>
</div>
3.watch和computed的区别
computed
计算结果并返回,只有当被计算的值发生改变时才会触发 (即:计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算)
支持缓存,只有依赖数据发生变化,才会重新进行计算。不支持异步,当computed内有异步操作时无效,无法监听数据的变化。computed属性会默认走缓存,计算属性是基于他们的响应式依赖进行缓存的,也就是基于data中声明过的数据通过计算得到。如果一个属性是由其它的计算属性而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用computed
watch
监听某一个值,当被监听的值发生变化时,执行对应的操作
(与computed的区别是,watch更加适用于监听某一个值的变化并做对应的操作,比如请求后台接口等,而computed适用于计算已有的值并返回结果)
不支持缓存,数据变化,直接会触发相应的操作;watch支持异步;监听的函数接受两个参数,第一个参数是新值,第二个是旧值,当一个属性发生变化时,需要执行对应的操作;一对多
注意: 不要在computed和watch中修改被依赖(或者被监听)的值,这样可能会导致无限循环
4.vue循环绑定key的作用
vue官方文档:
当 Vue 正在更新使用 v-for 渲染的元素列表时,它默认使用“就地更新”的策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序,而是就地更新每个元素,并且确保它们在每个索引位置正确渲染。
这个默认的模式是高效的,但是只适用于不依赖子组件状态或临时 DOM 状态 (例如:表单输入值) 的列表渲染输出。
建议尽可能在使用 v-for 时提供 key attribute,除非遍历输出的 DOM 内容非常简单,或者是刻意依赖默认行为以获取性能上的提升。
key 的特殊属性主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。
上面是vue官网的原文,简单的解释就是,key给每一个元素提供了唯一的类似id的属性,依靠这个key可以更快速更准确的对比新旧虚拟DOM,提高性能。但是,不带key,渲染简单的数据,反而会更快。
看一个例子:
不带key:
带key:
很容易看出,带key的列表在新增的时候,我选中了第一个,新增之后选中的还是第一个,也就是说新增的是就地复用,而带key的是直接新增节点。
在这个过程,diff算法应该是判断新旧树是否相同,相同就复用,不相同就删除旧的创建新的。带key的当然是每次新增都找不到可复用节点,要删除和创建,对性能影响更大。而不带key时节点的就地复用,省去了删除和创建的开销,只需要修改内容,所以刻意默认行为以获取性能上的提升。
两个图也应该很明显的表现出不带key会带来一些隐藏的副作用,比如上图的状态错位。其实在我看来,带key和不带key虽然有性能上的争议,但是对于用户来说基本没什么区别,为了消除一些异常,建议还是带上key。
最后总结一下,key对于diff算法的性能有影响,针对简单的渲染,不带key性能更好,针对复杂的渲染带key性能更好。至于这个复杂渲染的程度,暂时也是不知。而不带key会有一些隐藏的副作用,所以建议带上唯一的key。
5.数组去重
//ES6
var list = [4, 4, "lalala", "lalala", true, true, undefined, 'true', 'true', undefined, undefined, null, null, 0, 0, {}, {}, [], [], NaN, NaN]
function unique(arr) {
return Array.from(new Set(arr))
}
console.log(unique(list))
// [4, "lalala", true, undefined, "true", null, 0, {}, {}, [], [], NaN]
// 0.0029296875ms
简化一下
[...new Set(list)]
6.cookie localStorage sessionStroage区别
7.简述vue的生命周期,以及组件之间的传参方式
8.JS中阻止冒泡和阻止默认行为的方式
- 阻止事件冒泡:event.stopPropagation();
- 阻止默认行为:event.preventDefault();
7.学习的过程中遇到了哪些问题
8.学习的方式
9.职业规划
10.我对于公司有什么问题要问