面试题

零零发
68 阅读3分钟

如何解决1px 的问题：移动端1px 会变得很粗

方式一 window.devicePixelRatio = 设备的物理像素/css像素

<div id="container" data-device="{{window.devicePixelRatio}}"></div>
#container{
    border:0.5px solid #ccc;
}

方式二 伪元素先放大后缩小

#container[data-device="2"]{
    position:relative;
}
#container[data-device="2"]::after{
    position:absolute;
    top:0;
    left:0;
    width:200%;
    height:200%;
    content:"";
    transform:scale(0.5);
    transform-origin:left top;
    box-sizing:border-box;
    border:1px solid #ccc;
}

Vue 中封装的数组方法有哪些，其如何实现页面更新

push  pop  shift  unshift splice sort reverse

Vue data 中某一个属性的值发生改变后，视图会立即同步执行重新渲染吗？ 

不会，会按照一定策略进入到执行队列中，进行异步渲染，多次触发通过去重只渲染一次

mixin 和 extends

都是用于合并拓展组件的，两者均通过mergeOptions方法实现合并
mixins 接收一个混入对象的数组，其中混入对象可以像正常的实例
对象一样包含实例选项，这些选项会被合并到最终的选项中。Mixin
钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。extends 主要是为了便于扩展单文件组件，接收一个对象或构造函数。

vue react区别？

1）数据流 vue 双向数据流 react 单向数据流

2）vue  虚拟DOM react 没有虚拟dom 的概念

3）组件化 模板不同

4）监听数据变化的实现原理不同

Vue 通过 getter/setter 以及一些函数的劫持，能精确知道数据变

化，不需要特别的优化就能达到很好的性能

React 默 认 是 通 过 比 较 引 用 的 方 式 进 行 的 ， 如 果 不 优 化
（PureComponent/shouldComponentUpdate）可能导致大量不必要的
vDOM 的重新渲染。这是因为 Vue 使用的是可变数据，而React 更强
调数据的不可变

5）高阶组件 react HOC  vue mixins

6）构建工具 vue cli  create React app

  1. 跨平台 React native weex

assets 和static 的区别

都是存放静态资源的文件夹，static webpack 打包不编译  assets编译  static iconfont,css 已编译过无需再编译  assets 待编译的css js

delete 和Vue.delete 删除数组的区别

delete 使被删除的元素变成了undefined empty 其他元素键值不变

vue.delete直接删除数据，改变了数组的键值

vue 初始化页面闪动问题

[v-cloak]{
  display:none;
}
如果没有彻底解决问题， 则在根元素加上 style="display:none;" :style="{display: 'block'}"

vue2 vue3 生命周期？

vue2

beforeCreate --- created -- beforeMount --- mounted -- beforeUpdate --- updated --- beforeDestory ---Destoryed

另外还有keep-alive 独有的生命周期  activated  deactivated ,keep-alive 包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行deactived钩子函数，命中缓存渲染后会执行activted钩子函数

vue3 

setup --- onBeforeMount --- onMounted --- onBeforeUpdate --- onUpdated --- BeforeUnmount --- onUnmounted

vue 子组件和 父组件执行顺序

父 beforeCreate --- 父 created --- 父 beforeMount -- 子beforeCreate ---子 created --- 子beforeMount --- 子mounted --- 子mounted --- 父mounted

更新过程

父beforeUpdate ---子beforeUpdate --- 子updated --- 父updated

销毁过程

父 beforeDestroy --- 子beforeDestroy --- 子destroyed ---父destoryed

路由的hash 和history 模式的区别?

hash 值会出现在url 中，但是不会出现在http请求中，对 load onhashchange 进行监听

history ：没有#  pu s h S t a t e ()  replaceState() 切换页面  forward() back() go() 切换浏览器状态  

Vue-router 跳转和 location.href 有什么区别  

 location.href  会引起页面页面重新加载   history.pushState( /url )  不会引起页面刷新，静态跳转

Vuex 和 localStorage 的区别

vuex 将数据存储在内存中 localStorage 存储在本地，读取内容中数据比读取硬盘速度要快

永久性：刷新页面时vuex 存储的值会丢失，localstorage 不会。

Redux 和 Vuex 有什么区别，它们的共同思想

Vuex 改进了 Redux 中的Action 和Reducer 函数，以 mutations 变化

函数取代 Reducer，无需 switch，只需在对应的mutation 函数里改

变 state 值即可

avatar
文章
阅读
粉丝