前端面试知识点 如有雷同 还请见谅

203 阅读4分钟

关于浏览器

1. 主流浏览器和内核?

2. 浏览器的缓存机制?

浏览器的缓存分为两种情况:

  • 强缓存: 不会向服务器发送请求,直接从缓存中读取资源

      实现方式设置:http请求头添加Expires 和 Cache-Control。
      *Expires(http1.0): 缓存过期时间,用来指定资源到期的时间,是服务器端的具体的时间点 
       Expires是Web服务器响应消息头字段,在响应http请求时告诉浏览器在过期时间前浏览器可以
       直接从浏览器缓存取数据,而无需再次请求。
          
      *Cache-Control(http1.1):可以在请求头或者响应头中设置,并且可以组合使用多种指令
    

  • 协商缓存: 协商缓存是强制缓存失效后。浏览器携带缓存标识向服务器发送请求,由服务器根据标识决定是否使用缓存

      协商缓存生效,返回304和Not Modified
      协商缓存失效,返回200和请求结果
    

参考:www.jianshu.com/p/54cc04190…

vue部分知识

1. vue的生命周期/生命周期钩子/生命周期钩子在什么情况下会被调用

vue生命周期是指vue对象从构建到销毁的整个过程。

钩子函数是指在每个Vue实例被创建时都要经过一系列的初始化过程中执行的函数。

钩子函数

  • beforeCreate // created 创建前/后

  • beforeMount // mounted 挂载前/后

  • beforeUpdate // updated 更新前/后

  • beforeDestory // destoryed 销毁前/后

2. route,router,routes的区别

route:是指单条路由,它是一个对象,由两个部分组成: path和component.
     path指路径、component指的是组件。如:{path:’/home’, component: home}
routes: 是一个数组包含多个对象(就是包含多条路由),多条路由组合起来
     ,形成一个数组,例如:下面两个单条路由组成一个routes
                    const routes = [
                    { path: '/home', component: Home },
                    { path: '/about', component: About }
                    ]
router: 是一个机制,相当于一个管理者,它来管理路由。因为routes只是定
     义了一组路由,它放在哪里是静止的,当真正来了请求,怎么办?就是当用户
     点击ome 按钮的时候,怎么办?这时router就起作用了,它到routes中去查找
     ,去找到对应的 home内容,所以页面中就显示了 home 内容。
                    构造函数 new vueRouter() 创建,接受routes 参数。
                    const router = new VueRouter({
                          routes // routes: routes 的简写
                    })

3. watch/computed的区别? watch 的deep

watch: 属性监听器,一般用来监听属性的变化(也可以用来监听计算属性函数),并做一些逻辑

computed:定义的每一个计算属性,都会被缓存起来,当计算属性里面依赖的一个或多个属性变化了,
才会被动的发生改变(重新计算当前计算属性的值)

区别:
    1.computed的话是通过几个数据的变化,来影响一个数据
    2.而watch,则是可以一个数据的变化,去影响多个数据

4. vue-router的底层原理

vue-router通过hash与History 两种方式实现前端路由,更新视图但不重新请求页面 

5. vue.nextTick() 方法

理解: 当数据更新了,在dom中渲染后,自动执行该函数

使用场景:

* Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中

* 与之对应的就是mounted钩子函数,因为该钩子函数执行时所有的DOM挂载已完成。

6. keep-alive

Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。
<keep-alive>  标签包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。

使用场景:

    在做电商有关的项目中,当我们第一次进入列表页需要请求一下数据,
当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页,
这时候我们使用keep-alive来缓存组件,防止二次渲染,这样会大大的节省性能。

8. vue自定义事件

 子组件传递给父组件就必须声明自定义事件,并传递载荷,父组件通过@子组
 件的自定义事件名=本地声明的函数通过参数拿值。

9. vue的mvvm底层原理

Object.defineProperty监听到data的属性发生了改变, View通过View-Model的DOM Listeners将事件绑定到Model上,
而Model则通过Data Bindings来管理View中的数据

9.1 vue发布-订阅模式

![](https://user-gold-