前端vue必掌握的面试题以及知识点分享！

以下是回答问题：
        1,vue的双向绑定原理是什么？里面的关键点在哪里？
        使用object.defineProperty()的set和get进行数据劫持，结合发布-订阅模式
        前后端分手大师——MVVM 模式
        MVVM框架的的核心就是双向绑定,MVVM是model：数据库
        view:html和css
        viewModel:js
        双向绑定的核心是object.defineProperty()

        2，实现水平垂直居中的方式？
        flex布局
        line-height和height一样高，text-align:center
        position定位

        3，常用伪元素有哪一些？
        after和before，first-child(),last-child(),hover,active,nth-child,

        4,移动端如何适配不同屏幕尺寸?
        rem,vh,vw和flex布局，媒体查询

        5，本地存储有哪一些？他们三者有什么区别？
        本地存储有localStorage,sessionStorage,cookie(放在请求中)

        6,JS的数据类型？如何判断js的数据类型?
        基本类型：string,number,null,undefined,boolen,symbol
        引用类型：object,function,array
        对象、数组、null 返回的值是 object，可以使用instanceof和object.prototype.toString.call()

        7,说一下ES6的新特性有哪些？
        let const 定义
        模板字符串
        set函数,map函数
        promise
        箭头函数
        扩展运算符

        8，Let、const、var三者有什么区别？
        let 块级作用域内有效
        var 块级作用域外也有效
        const 常量

        9，数组去重有哪些办法？
        new Set 去重
        reduce方法去重，includes

        10,说一下深拷贝和浅拷贝，如何自己实现一个深拷贝？
        JSON.parse(JSON.stringify(obj))

        11，Vue的生命周期有哪一些？说一下它们每个阶段做什么操作？
        beforeCreated,created, beforeMounted,mounted, beforeUpdate,updated, beforeDestroy,destroyed
        DOM构建/渲染前：beforeCreate、created、beforeMount、mounted
        DOM渲染后：beforeUpdate、updated
        离开页面：beforeDestroy、destroyed

        13，Vuex有几个属性及作用？
        state,getters,mutations,actions,modules

        14,computed和watch的区别
        computed计算属性，有get和set属性，会有缓存机制，调用return返回结果，多个值影响一个值的时候
        watch监听属性，监听某个值变化，一个值影响多个值

        15，说一下防抖和节流。怎么实现？
        settimeout
        防抖是为了防止防止点击多次出现抖动（搜索框）
        节流是一段时间内保证可以点击一次，避免多余的点击（滚动加载）

        16,Vue的导航守卫有哪一些？
        全局前置守卫，beforeEach(to, from, next)
        组件守卫，beforeRouterEnter,beforeRouterUpdate,beforeRouterLeave,
        全局后置守卫，afterEach

        17,你的登录拦截怎么实现的？
        全局守卫beforeEach进行验证是否有token，有的话可以登录，没有的话跳转登录页
        或者拦截器进行拦截

        19，闭包是什么？如何实现？
        闭包就是函数中调用另一个函数，可以访问到父级函数中的变量，避免使用全局变量，造成污染

        20，Vue2.0和vue3.0有什么区别？
        双向绑定的原理不一样，object.defineProterty,proxy
        生命周期不一样，vue3.0中是setup代替了credted，其他的都是加了on
        vue3.0中可以用vue2.0，但是vue2.0中不可以用vue3.0
        vue3.0中template可以不用最外层包裹一个标签
        vue2.0中v-if >v-for,vue3.0中v-for > v-if
        vue2.0是选项式api(option api)，vue3.0是组合式api(composition api)

        32,原型和原型链
        对象中有个_proto_,和函数中的prototype是相等的

        33,async await 函数
        //async较好的用法
        async function testAsync(){
          //返回一个Promise对象
          return new Promise((resolve, reject)=>{
          //处理异步任务
          setTimeout(function () {
            resolve("testAsync")
           }, 1000);
          })
        }
        //async通常用于声明一个处理异步任务且返回了Promise对象的函数
        promise 状态pending,fulfilled,rejected 
        promise 对象初始化状态为 pending
        resolve,pending---->fulfilled
        rejected,pending---->rejected 
        
        34,子组件和父组件之间生命周期加载
        加载渲染过程
        父组件beforeCreated,created,beforeMounted,子组件beforeCreated,created,beforeMounted,mounted,父组件mounted
        
        更新过程
        父组件beforeUpdate,子组件beforeUpdate,子组件updated,父组件updated
        
        销毁过程
        父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed
        
        mixins的beforeCreated -> 父beforeCreated ->mixins的created -> 父created -> minxins的beforeMounted ->
        父beforeMounted ->子beforeCreated -子created -> 子beforeMounted ->子mounted ->mixins的mounted -> 父mounted 
        
        
        35,flex:1
        flex-grow 1,flex-shrink 1,flex-basis 0
        项目放大比例值为1,项目缩小比例值为1,项目占据空间为0%
        
        
        36,前端的缓存机制，强制缓存和协商缓存
        
        
        37,手写一个防抖
        // 防抖 定时器实现（立即执行版本）
         function debounce(fn, delay){
             let timer = null;
             return function(){
                 clearTimeout(timer);
                 timer = setTimeout(()=> {
                     fn.apply(this, arguments);
                 }, delay)
             }
         }
        事件触发了之后，开启一个定时器，当在这个时间内继续触发，会清除之前的定时器，重新计时
        从浏览器中输入URL到返回页面的过程?
        解析域名-->三次握手-->发起请求 --> 响应请求 --> 返回响应 --> 解析渲染
        
        
        38,重绘，回流
        重绘是修改样式，但是没有影响几何属性(修改了颜色或者背景色)
        回流是影响了几何属性
        重绘不一定导致回流，回流一定会导致重绘
        
        39,websocket
        
        
        40,事件机制
        
        
        
        41,iframe传值
        
        
        
        42,标准盒子模型和普通盒子模型的区别
        标准盒模型（box-sizing:content-box），实际宽度 = 设置的width + border + padding
        怪异盒模型（box-sizing:border-box），实际宽度 = 设置的宽度width
        
        
        43,图片垂直怎么做，vertical-align:middle
        
        44,为什么不能对dom进行频繁的操作
        dom渲染每次都会重绘和回流，会造成vue性能下降
        dom操作慢是因为dom和js的跨界交流，js引擎和渲染引擎之间进行交流
        减少dom操作的方式：
        1，缓存DOM对象
        2，在内存中操作元素
        3，一次性DOM节点生成
        4，通过类修改样式
        'https://segmentfault.com/a/1190000000490322'具体参照文档

        虚拟dom的应运而生
        js会生成一个虚拟的dom
        diff算法会比较两次dom之间的差异
        patch算法一次性的给真实dom赋值，避免多次操作dom

        
        45,基本数据类型和引用数据类型的区别，堆和栈，深拷贝和浅拷贝
        基本数据类型是放在栈内存中的
        引用数据类型是存放在堆内存中的
        比较上的区别：基本数据类型是值的比较，引用类型是引用地址的比较
        赋值上的区别：基本类型赋值直接=，引用类型赋值是对象引用
        
        
        46,diff算法主要用于哪里
        diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。
        diff的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁
        
        47,jquery的增删改查
        基础语法是：$(selector).action()
        $('p').hide()
        $('.test').hide() class是test的
        $('#test').hide() id是test的

        fadeIn()
        fadeOut()
        fadeToggle()
        fadeTo()
        
        
        48,node中间件
        
        49,项目中有遇到过什么难点
        

        50,SSR技术，是服务端渲染（Server-side Rendering），服务端渲染出html后返回给前端，直接展示，静态页面可以前端自己写，
        但是需要动态请求数据的，会出现白屏，或者很慢，用户体验不是很好，可以使用SSR