自如网面经-牛友

moreface
345 阅读8分钟

1. Vue常用指令说一下

  1. v-bind：用于绑定属性,常缩写为':'
  2. v-on：用于绑定事件,常缩写为'@'
  3. v-once：用于只触发一次的事件
  4. v-if,v-else-if,v-else：用于对源数据的条件渲染
  5. v-show：用于元素条件渲染
  6. v-text和v-html:
   v-text 等同于 innerText
   v-html 等同于 innerHTML
  1. v-model：用于表单控件和组件的双向数据绑定。
  2. v-clock：与css共同使用，用于数据未加载上来时候的元素隐藏。
  3. v-for：对源数据的遍历渲染

2.Vue的修饰符

  1. 表单修饰符
    • .lazy：监听input控件的onchange事件
    • .number：限制input控件的输入类型为number
    • .trim：用于表单输入过滤首位的空格
  2. 事件修饰符
    • .stop：阻止事件冒泡
    • .prevent：阻止事件的默认行为
    • .self：用于事件是在自身触发的
    • .capture：添加事件监听器为捕获模式，子元素事件触发需要先经过.capture绑定的事件。
    • .once：用于事件只触发一次
    • .passive：用于滚动行为立即触发
  3. 鼠标按钮修饰符
    • .left：左键点击
    • .middle：中键点击
    • .riht：右键点击

3. v-show和v-if有什么区别？

  1. v-show通过CSS属性的display:none;来控制元素的显隐，v-if是通过DOM元素是否存在来控制元素的显隐。
  2. v-if是惰性的，当第一次渲染的时候如果为false，那么不做任何事情。只有在条件第一次变为true的时候才可以进行局部渲染。
  3. v-if有较高的切换消耗，v-show有较高的初次渲染消耗。

4. vue的双向数据绑定？

  1. 第一步： 需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter 这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化

  2. 第二步：compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

  3. 第三步：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，主要做的事情是: 在自身实例化时往属性订阅器(dep)里面添加自己 自身必须有一个 update()方法 待属性变动 dep.notice()通知时，能调用自身的 update() 方法，并触发 Compile 中绑定的回调，则功成身退。

  4. 第四步：MVVM 作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者，通过 Observer 来监听自己的 model 数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据 model 变更的双向绑定效果。

5.v-model 绑定 input 的什么事件？

input事件

6. Vue的生命周期

  • beforeCreate 实例初始化之后，进行数据的观测，可以初始化非响应式数据变量。
  • created 已经将data和method绑定到vue实例上。
  • beforeMount 模板编译完成，但是未挂载，无法获取到DOM
  • mounted 组件挂在完成，可以直接获取到DOM
  • beforeupdate 响应式数据更新时调用，此时数据已经完成更新
  • updated 虚拟 DOM 重新渲染和打补丁之后调用，组件DOM已经更新，可执行依赖于DOM的操作
  • beforeDestroy 实例完全可以，这一步经常用在销毁定时器和解绑全局事件
  • destroyed 销毁Vue实例，所有事件监听以及所有子实例均被销毁

7. watch和computed的区别

  • computed 计算属性，依赖其他属性，当其他属性改变的时候下一次获取computed值时也会改变，computed的值会有缓存
  • watch 类似于数据改变后的回调 如果想深度监听的话，后面加一个deep:true 如果想监听完立马运行的话，后面加一个immediate:true

8. v-for中的key值有什么作用？

V-for中的key主要用在Diff算法中，通过判断元素节点唯一的key值，来判断新旧节点是否发生改变。用key值会大大的提高效率。

9. Vue的组件通信

  1. 父传子： 父组件设置v-bind+子组件设置props来获取父组件的参数

  2. 子传父： 通过this.$emit向父组件推送一个方法，父组件通过v-on来监听该方法，并且获取参数

  3. $bus：

    通过新声明一个vue实例，即$Bus,绑定到Vue的原型上就可以实现组件之间的通信

    Vue.prototype.Event=new Vue();
    Event.$emit(事件名,数据);
    Event.$on(事件名,data => {});
  1. 通过Vuex进行组件之间的通信。
  2. 类似第一种 父组件设置v-bind，子组件通过this.$attrs来获取到属性。
  3. 祖先组件使用provide提供数据，子孙组件使用inject来注入数据。
  4. 通过parent和parent和children。
  5. 通过refs获取到子组件实例，以及子组件的值。

10. vue 路由有了解吗？有哪些模式有什么区别？

  • vue的路由有hash模式和history模式
  • hash模式是通过监听window.hashchange来进行前端路由的变更，通过url中的hash来模拟一个hash，以保证当url改变的时候，页面不会重新加载。
  • history是利用HTML5的新API pushState和replaceState实现的路由的替换不刷新。
  • pushState 设置的新URL可以是与当前 URL 同源的任意 URL，而hash必须为与当前url同目录下的Url才可以。

11. ES6常见的有哪些

  1. 新增数据类型symbol，map，set，weakmap,WeakSet
  2. 模板字符串``
  3. let const 关键字
  4. 数组对象的解构赋值
  5. 箭头函数
  6. class 类以及超类super，extends拓展
  7. 函数参数的默认值
  8. promise
  9. 扩展运算符 ...
  10. for in , for of

12. CSS3新特性

  1. 圆角 border-radius
  2. 阴影 border-shadow
  3. 过渡 transition
  4. 翻转 transform
  5. 动画 animation
  6. 媒体查询@mdeia
  7. flex布局
  8. 背景： background-clip background-origin background-size
  9. 文字效果 text-overflow:ellipsis; // 超出变为省略号 text-shadow 文字阴影

13. localStorage和sessionStorage的区别，还有cookie的区别，cookie是否可以跨域

  • localStorage ：本地存储 生命周期：只要不手动删除一直存在 作用域：可以同浏览器下不同表现页实现locaStorage共享
  • sessionStorage： 会话存储 生命周期：当浏览器或标签页关闭的时候清除 作用域：同标签页下的iframe可以共享sessionStorage
  • cookie 生命周期：一般由服务器生成，可以设置过期时间。 特点：每次http请求都会携带cookie，这样会导致性能问题。 可以通过设置document.domain来设置共享cookie

14. 箭头函数和普通函数的区别？

  1. 箭头函数的this为离他最近的普通函数的this
  2. 箭头函数没有 arguments
  3. 箭头函数没有原型，不支持new
  4. 箭头函数不会进行函数提升
  5. 不能作为Generator函数

15. grid了解吗

网格布局

16. flex水平垂直居中

div{
    width: 100vh;
    height: 100vh;
    display: flex;
    /* justify-content: center;
    align-items: center;      第一种方法*/
}
p{
    margin: auto;    /*  第二种方法  */
    border: 1px solid red;
}

17. flex:auto和flex:1的区别

当 flex 取值为 auto，则计算值为 1 1 auto，如下是等同的：

.item {flex: auto;}
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;

当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%，如下是等同的：

.item {flex: 1;}
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

18. promise 和 async await 有什么区别

  1. promise在捕获错误的时候可以用catch，而在async await里面捕获错误只能用try catch
  2. async比promise代码简洁的多，不需要写匿名函数处理promise和reslove,必声明大量的data,res等，避免代码嵌套。
  3. async是将一个函数返回为一个promise，有了await之后，await可以接收一个promise，等待promise执行完之后才取到其返回值，再进行处理。

19 promise 中 resolve(1) resolve(2) 结果是 1 还是 2

new Promise((reslove, reject) => {
    reslove(1)
    reslove(2)
}).then(res => {
    console.log(res);
})
//  1

20 vue3的响应式原理，和vue2的区别

Vue3的响应式原理用的是Proxy代理，Vue2使用的是Object.defineProperty在做的响应式。 两者相比：

  1. Vue3 一次性处理了对象和数组，而Vue2需要递归遍历消耗巨大。
  2. Vue2 对新加或删除属性无法监听数组响应化需要额外实现
  3. Vue2 Map、Set、Class等无法响应式修改

21.vue的nexttick是什么？使用场景

nextTick是指在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。 应用场景：

  1. 用在created生命周期之后操作DOM
  2. 使用v-show将元素显示之后使元素获得焦点

22. keep-alive的作用和使用方式

在组件切换的时候，会触发销毁生命周期，为了保留之前组件的状态，我们可以使用keep-alive。 同时，keep-alive会带来两个新的生命周期函数activated（进入页面/页面活跃）与deactivated(离开页面/页面不活跃)

23. 继承的方式和优缺点

  1. 原型继承

手写深拷贝

avatar
文章
阅读
粉丝