vue面试

时间:2020-08-01
本文章向大家介绍vue面试,主要包括vue面试使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

公司一面试题

  1. 简述vue响应式原理的关键点

    响应式原理实现基础:object.defineProperty(obj,prop,descriptor)

    object.defineProperty()功能被称为javascript数据劫持,是一种可控变量定义方式

    ES6为了加强功能,提出了proxy,实际是object.defineProperty()强化型

    vue3.0核心语法中将全面使用proxy替代Object.defineProperty()

参数:

obj:要在其定义属性对象

prop:要定义和修改属性的名称

descriptor:将被定义或者修改属性的描述符

返回:被传递函数的对象

  1. Vue如何监控某个属性值的变化

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <title>测试vue</title>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="message" >
        </div>
        <script>
            var app = new Vue({
                el:'#app',
                data:{
                    message:''
                },
                watch:{
                    message:function(newvalue,oldvalue){
                        console.log(newvalue);
                        console.log(oldvalue)
                    }
                }
            })
        </script>
    </body>
    </html>
    

    [外链图片转存失败(img-ztnQKUwr-1568115260316)(C:\Users\10484\AppData\Roaming\Typora\typora-user-images\1568036376047.png)]

    <body>
        <div id="app">
             <input type="text" v-model="msg">
        </div>
        <script>
            var app = new Vue({
                el:'#app',
                data:{
                    msg:''
                },
                watch:{
                    msg:{
                        handler(newname,oldname){
                            console.log(newname);
                            console.log(oldname);
                        },
                        immediate:true
                    }
                }
            })
        </script>
    </body>
    
  2. Vue如何监控某个属性值内部属性值的变化

    deep:true 可以监听到某个属性内部值发生的改变

  3. 网页从输入网址到渲染完成经历的哪些过程?

    1. 首先,在浏览器的地址栏输入需要访问的地址,
    2. 缓存解析,浏览器获取这个url,判断是否有缓存,
    3. 进行域名解析,获取相应的ip地址
    4. 发起http请求,建立连接,请求数据(请求包含一个头部,一个请求体)
    5. 服务器收到请求后返回,一个响应头和一个响应体
    6. 对客户端进行页面渲染,解析HTML文件生成DOM树,解析CSS样式,CSS与DOM进行合并,构建渲染树
    7. 布局和重绘
  4. 前端如何优化网站性能

    1. 使用CDN,将网站的静态资源分离,Image,HTML,脚本js,样式CSS部署到CDN中
    2. 介绍http的请求次数
    3. 合并压缩Js文件、css文件
    4. 服务器端开启gzip
    5. 图片进行懒加载
  5. vue组件之间传值有多少种实现方式

    1. 父子组件之间通过props进行通信
    2. 父子组件之间通过$emit()进行通信
    3. 兄弟组件之间通过Bus或者是Vuex进行数据之间的通信
    4. (额外)是采用ref,进行传值(不常用)
  6. 手写冒泡排序算法(以及冒泡算法的优化)

冒泡排序法

var arr = [2,3,5,9,1,3]

function mintomax(par){
    for(var i=0;i<par.length-=;i++){
        for(var j=0;j<par.length-1-i;j++){
            if(par[j]>par[j+1]){
                var temp = par[j+1];
                par[j+1] = par[j];
                par[j] = temp;
            }
        }
    }
    return par
}

优化方法:

面试提问:Js判断对象是否为空的方式? Js如何遍历对象?如何实现?

Js判断对象是否为空的方法?

方法一:for in 循环判断

var obj = {};
var b = function(){
    for(var key in obj){
        return false
    }
    return true;
}
alert(b());//true

方法二:将json对象转化为json字符串,再判断该字符床是否为“{}”

var data = {};
var b = (JSON.stringify(data) == "{}");
alert(b);//true

方法三:

jquery的isEmptyObject方法

var data = {};
var b = $.isEmptyObject(data);
alert(b);//true

方法四:

是ES6的新方法, 返回值也是对象中属性名组成的数组
var data = {};
var arr = Object.keys(data);
alert(arr.length == 0);//true

公司二面试题

  1. localStorage sessionStorage Cookie 三者的区别?

    Cookie的大小只有4KB ,以文本的形式保存的客户端,如果没设置过期时间,保存在内存中,随着浏览器关闭而结束。设置时间则存在硬盘中,时间过期才会消失。

    sessionStorage 将数据保存在session对象中。所谓session,是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。

    localStorage:将数据保存在客户端本地的硬件设备中,即使浏览器被关闭了,该数据仍然存在,下次打开浏览器访问网站时仍然可以继续使用。

    可用自己的语言进行概括

  2. 盒模式是什么?

    由content padding border margin组成

  3. 写出两种垂直居中的方法

    1. 第一种方法

       position:absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%,-50%)
      
    2. 第二种方法

      像素固定的情况下,利用margin

    3. 弹性布局

      .a {
                  width: 300px;
                  height: 300px;
                  background-color: red;
                  display: flex;
                  justify-content: center;//水平居中
                  align-items: center;//垂直居中
                  
              }
      
      
.black {
    color:black
}
.red {
    color:red
}5

<div class="black red">hello<div>

hello是什么颜色?

颜色是红色 属性继承

  1. 什么是匿名函数?有什么特性?

    function(){}

    不会污染全局变量

  2. 什么是深拷贝?什么是浅拷贝?写出一种深拷贝的方法

    浅拷贝:仅仅复制了一层引用

    assign():

    let a = {
        age:1
    }
    let b = Object.assign({},a)
    a.age = 2
    cons.log(b.age)//1
    
    

    深拷贝:对目标的完全拷贝,引用跟值全部都复制了

    一般来说深拷贝的方法 JSON.pase 和 JSON.stringfy

  3. overflow:hidden 为什么能清除浮动?

    overflow这个属性本来是隐藏超出父块之外的子块。在隐藏的时候,需要计算全部高度,这个时候会把float元素的高度算上。顺带达成了清理浮动的效果。

  4. aysnc function test(){
    	await setTimeout() =>{
            console.log(1)
        }
        console.log(2)
    }
    //test输出的是什么?
    
    
  5. 如何确定一个变量是对象还是数组?

    第一种方法:instanceof

    arr instanceof Array
    
    

    第二种方法:constructor

    arr.constructor === Array
    
    

    第三种方法:Object.prototype.toString.call()

    res = Object.prototype.toString.call(arr)
    
    
  6. 如何快速创建一个数组长度是100,每一个都为1的数组?

    1. fill()填充

      let arr = []
      arr.length = 100
      
      // 或arr = Array(100)
      arr.fill(1)
      
      
    2. 循环

      let arr = []
      for(let i = 0; i < 100; i++){
      	arr[i] = 1
      }
      
      
  7. foreach 与for有什么区别?

    foreach不能使用break或者是continue进行中断循环

    但是for是可以使用return break continue

  8. 写出两种数组去重的方法。

    function newArr(arr){
        return Array.from(new Set(arr))
    }
     
    var arr = [1,1,2,9,6,9,6,3,1,4,5];
     
    console.log(newArr(arr))
    
    
    unction newArr(array){ 
        //一个新的数组 
        var arrs = []; 
        //遍历当前数组 
        for(var i = 0; i < array.length; i++){ 
            //如果临时数组里没有当前数组的当前值,则把当前值push到新数组里面 
            if (arrs.indexOf(array[i]) == -1){ 
                arrs.push(array[i])
            }; 
        } 
        return arrs; 
    }
     
    var arr = [1,1,2,5,5,6,8,9,8];
     
    console.log(newArr(arr))
    
    
  9. 简述一下vue生命周期和其各自的作用。

  10. vue组件之间是如何通信的?

    1. 父子组件之间通过props进行通信
    2. 父子组件之间通过$emit()进行通信
    3. 兄弟组件之间通过Bus或者是Vuex进行数据之间的通信
    4. (额外)是采用ref,进行传值(不常用)
  11. vue种watch与computed之间有什么区别?

    computed:是计算属性,依赖其他属性计算值并且 computed 的值有缓存,只有当计算值变化才会返回内容。

    watch:监听到值的变化就会执行回调,在回调中可以进行一些逻辑操作。

  12. vue如何实现双向绑定的?

    vue数据双向绑定是通过数据劫持结合发布者-订阅模式的方式来实现的(原理)

    基于响应式原理以及元素事件监听实现响应式功能

$flag 上一页 下一页