vue面试 - 码农教程

公司一面试题

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

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

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

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

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

参数：

obj:要在其定义属性对象

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

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

返回：被传递函数的对象

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>

Vue如何监控某个属性值内部属性值的变化

deep：true 可以监听到某个属性内部值发生的改变
网页从输入网址到渲染完成经历的哪些过程？
1. 首先，在浏览器的地址栏输入需要访问的地址，
2. 缓存解析，浏览器获取这个url，判断是否有缓存，
3. 进行域名解析，获取相应的ip地址
4. 发起http请求，建立连接，请求数据（请求包含一个头部，一个请求体）
5. 服务器收到请求后返回，一个响应头和一个响应体
6. 对客户端进行页面渲染，解析HTML文件生成DOM树，解析CSS样式，CSS与DOM进行合并，构建渲染树
7. 布局和重绘
前端如何优化网站性能
1. 使用CDN,将网站的静态资源分离，Image，HTML,脚本js,样式CSS部署到CDN中
2. 介绍http的请求次数
3. 合并压缩Js文件、css文件
4. 服务器端开启gzip
5. 图片进行懒加载
vue组件之间传值有多少种实现方式
1. 父子组件之间通过props进行通信
2. 父子组件之间通过$emit()进行通信
3. 兄弟组件之间通过Bus或者是Vuex进行数据之间的通信
4. （额外）是采用ref，进行传值（不常用）
手写冒泡排序算法（以及冒泡算法的优化）

冒泡排序法

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

公司二面试题

localStorage sessionStorage Cookie 三者的区别？

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

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

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

可用自己的语言进行概括
盒模式是什么？

由content padding border margin组成

写出两种垂直居中的方法

第一种方法

 position:absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%)

第二种方法

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

弹性布局

.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是什么颜色？

颜色是红色属性继承

什么是匿名函数？有什么特性？

function(){}

不会污染全局变量
什么是深拷贝？什么是浅拷贝？写出一种深拷贝的方法

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

assign():
```
let a = {
    age:1
}
let b = Object.assign({},a)
a.age = 2
cons.log(b.age)//1
```
深拷贝：对目标的完全拷贝，引用跟值全部都复制了

一般来说深拷贝的方法 JSON.pase 和 JSON.stringfy
overflow:hidden 为什么能清除浮动？

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

aysnc function test(){
	await setTimeout() =>{
        console.log(1)
    }
    console.log(2)
}
//test输出的是什么？

如何确定一个变量是对象还是数组？

第一种方法：instanceof
```
arr instanceof Array
```
第二种方法：constructor
```
arr.constructor === Array
```
第三种方法：Object.prototype.toString.call()
```
res = Object.prototype.toString.call(arr)
```

如何快速创建一个数组长度是100，每一个都为1的数组？

fill()填充

let arr = []
arr.length = 100

// 或arr = Array(100)
arr.fill(1)

循环

let arr = []
for(let i = 0; i < 100; i++){
	arr[i] = 1
}

foreach 与for有什么区别？

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

但是for是可以使用return break continue

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

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))

简述一下vue生命周期和其各自的作用。
vue组件之间是如何通信的？
1. 父子组件之间通过props进行通信
2. 父子组件之间通过$emit()进行通信
3. 兄弟组件之间通过Bus或者是Vuex进行数据之间的通信
4. （额外）是采用ref，进行传值（不常用）
vue种watch与computed之间有什么区别？

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

watch：监听到值的变化就会执行回调，在回调中可以进行一些逻辑操作。
vue如何实现双向绑定的？

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

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

原文地址：https://www.cnblogs.com/willing6/p/13416807.html