2021前端面试题包括javascript和vue等等

一：js

1.普通事件绑定和事件流绑定有啥区别

普通事件绑定

• 如果给同⼀个元素绑定了两次或者多次相同类型的事件，那么后⾯的绑定会覆盖前⾯的绑定
• 不支持dom事件流（捕获-目标-冒泡）

事件流绑定

• 如果说给同⼀个元素绑定了两次或者多次相同类型的事件，所以的绑定将会依次触发
• 支持dom事件流（捕获-目标-冒泡）
• 不加on事件

  function addEvent(obj,type,callBack){
     
        if(obj.addEventListener){
     
            obj.addEventListener(type,callBack);
        }else{
     
            obj.attachEvent("on"+type,callBack);
        }
    }
 addEvent(document,"click",function(){
     alert("兼容写法")});

2.如何阻止事件冒泡和默认事件

e.preventdefault?e.preventdefault():return value=false

e.stoppropagation?e.stoppropagation():e.cancelbubble=true

3.document load 和 document ready 的区别

• Document.onload 是在结构和样式加载完才执⾏ js
• window.onload：不仅仅要在结构和样式加载完，还要执⾏完所有的样式、图片这些资源文件，全部 加载完才会触发 window.onload 事件
• Document.ready 原⽣种没有这个⽅法，jquery 中有 $().ready(function)

4。undefined的三种情况

• ⼀个变量定义了却没有被赋值
• ⼀个对象上不存在的属性或者⽅法:
• ⼀个数组中没有被赋值的元素

5·对象模型 BOM 里常用的至少 4 个对象

• Window
• document
• location
• screen
• history
• navigator

6·会造成内存泄漏的

• setTimeout 的第⼀个参数使⽤字符串⽽非函数的话，会引发内存泄漏。
• 闭包

7：解释什么是jsonp

Jsonp 并不是⼀种数据格式，⽽ json 是⼀种数据格式，

jsonp 是⽤来解决跨域获取数据的⼀种解 决⽅案，

具体是通过动态创建 script 标，通过标签的 src 属性获取 js 文件中的 js 脚本，

该 脚本的内容是⼀个函数调⽤，参数就是服务器返回的数据，为了处理这些返回的数据，需要事先在⻚⾯定义好回调函数，本质上使⽤的并不是 ajax 技术

8：生成随机数

Math.round(Math.random()*差值)+最小的值

9：link与import的区别

• link不仅仅可以加载css，import只能加载css
• link同时加载，import先载入页面内容
• link无兼容问题，
• link⽀持使⽤ Javascript 控制 DOM 去改变样式；⽽@import 不⽀持。

10：优化自己的代码

• 重复使用
• 避免过多使用全局变量
• 闭包中变量的释放
• 适当的注释

11:简述一下你对 web 性能优化的方案？

1、尽量减少 HTTP 请求如何写简历 269

2、使⽤浏览器缓存

3、使⽤压缩组件

4、图片、JS 的预载入

5、将脚本放在底部

6、将样式文件放在⻚⾯顶部

7、使⽤外部的 JS 和 CSS

8、精简代码

12:new 操作符具体干了什么呢?

1、创建⼀个空对象，并且 this 变量引⽤该对象，同时还继承了该函数的原型。

2、属性和⽅法被加入到 this 引⽤的对象中。

3、新创建的对象由 this 所引⽤，并且最后隐式的返回 this 。

13：js的垃圾回收机制

• 什么是垃圾

  一般来说：没有被引用的对象就叫做垃圾，还有一种可能是好几个变量之间相互引用形成闭环，没有其他的对象引用该闭环内的对象，也会被当做垃圾

• 如何回收垃圾

  浏览器会对内存中的变量进行标记，从根对象开始进行标记，层层递进，将被引用的进行标记，要是没有被引用就不标记，最后将没有标记的进行回收，释放内存

14：如何实现浏览器不同页面之间的通信

• 通过本地存储的方式
• vue中通过传值的几种方式
• react中的几种传值方法

15：document.write和innerhtml的区别

document.write会重绘页面整体

innerhtml只是更新使用的那一部分

16:浏览器对象模型有：

document,location,screen,navigation,event,history

window中常用的是

一个事件onload，两个定时器，三个弹出框

17：dom对象模型

document.documentElement表示html元素

document.body返回body元素

document.head返回head元素

• 节点的添加操作1【父加子】

  var h1=document.creatElement("h1")
  父节点.appendchild(h1)
  

  节点的添加操作2【将新节点插入到目标节点之前】

  父节点.insertBefore(新节点, 目标节点)
  
  

• 删除操作

  目标节点.remove()
  

18:自定义属性的读写

• setAttribute(“属性名称”,“属性值名称”)

• getAttribute(“属性名称”)

   oDiv.setAttribute("heihei",123);//写
   document.write(oDiv.getAttribute("heihei"));//读
  

20:数组去重的两种方法：

方法一：

let arr=[3,5,3,1,3,1]
function(arr){
     
    for(var i=0;i<arr.length;i++){
     
        for(var j=i+1;j<arr.length;j++){
     
            if(arr[i]==arr[j]){
     
                arr.splice(j,1)
            }
        }
    }
    return arr
}

方法二：

let arr=[1,4,1,6,9]
function(arr){
     
    let newarr=[]
    this.arr.forEach((v,i)=>{
     
        if(newarr.indexof(arr[i])==-1){
     
            newarr.push(arr[i]))
        }
    })
    return newarr 
}

方法三：

let arr=[1,4,1,6,9]
function(arr){
     
    let newarr=[]
    this.arr.forEach((v,i)=>{
     
        if(!newarr.includes(arr[i])){
     
            newarr.push(arr[i]))
        }
    })
    return newarr 
}

21:数组排序

方法一：

var arr=[1,5,7,9,16,2,4];
    for(var j=0;j<arr.length;j++0{
     
        if(arr[j]>arr[j+1]){
     

            temp=arr[j];

            arr[j]=arr[j+1];

            arr[j+1]=temp;

        }

    }}

方法二

var arr=[1,23,5,8,11,78,45];
var temp;
for(var i=0;i<arr.length;i++){
     
    for(var j=i+1;j<arr.length;i++){
     
        if(arr[i]>arr[j]){
     

            temp=arr[i];

            arr[i]=arr[j];

            arr[j]=temp;

        }

    }}

方法三：

arr.sort(function(a,b){
     
    return b-a;
})

22：面向对象

一般使用字面量的形式直接创建对象，但是这种创建方式对于创建大量相似对象的时候，会产生大量的重复代码。

为了解决该问题，在ES6之前还没有出现类的概念的时候，采用的是函数来模拟类的实现，从而产生出可复用的对象创建方式

es5之前通过构造函数实现面向对象

function Student(id,name){
     
    this.id=id
    this.name=name
    this.show=function(){
     
        console.log(this.name+"的id号是"+this.id)
    }
    
}
let s1=new Student(1,"李")
s1.show()

ES6实现面向对象

class Student{
     
    constructor(id,name){
     
       this.id=id
    	this.name=name 
    }
    show(){
     
         console.log(this.name+"的id号是"+this.id)
    }
}
let s1=new Student(1,"李")
s1.show()

二：node

1·什么是node

node是一种后端语言，是基于谷歌浏览器的v8引擎的服务端语言

node是基于javascript语法的一套服务器

• 单线程：高并发使得node让cpu的利用率可以达到100%
• 非阻塞式i/o 就是node在访问高io(输入输出)的应用的时候 不会等待着它的完
• 事件驱动 把高io的操作放到一个事件列队当中 完成后通过回调函数的方式在进入到线程里
• 轻量级：因为node.js本身即是代码又是服务器，前后端可以使用同一套语法

所以node一般适合开发高并发的，高i/o的

不适合开发一些对稳定性要求较高的应用【银行，医院，电力等】

2·node的全局对象有

global：定义整个runtime时期的全局变量

console：定义控制台的标准输出

module：模块化

exports：导出

process：用来描述当前Node.js进程状态的对象，提供一个与操作系统的简单接口

3·node的定时器有

settimeout，setinterval， clearinterval，

4·通过哪些方法可以防止程序的崩溃

1，try-catch-finally

5·：npm是什么

npm是基于node的管理和分发包的工具，是目前最大的开放源代码的生态系统，可用于安装、卸载、发布、查看包等。

通过npm，可以安装和管理项目的所有依赖项，同时我可以指定版本

同时你也可以将自己的代码进行上传

6：npm的作用是什么？

npm是同 Node .js一起安装的包管理工具，能解决 Node. js代码部署上的很多问题。常见的使用场景有以下几种。

（1）允许用户从npm服务器下载别人编写的第三方包到本地。

（2）允许用户从npm服务器下载并安装别人编写的命令行程序到本地。

（3）允许用户将自己编写的包或命令行程序上传到npm服务器供别人使用。

7·node的fs模块

• fs.readFile（文件名，回调函数）读文件
• fs.writeFile(路径，内容，回调函数)
• fs.appendFile(路径,内容,回调函数);
• fs.mkdir（） 创建目录
• fs.rmdir（） 删除目录
• fs.unlink（）删除文件

8：node的http模块

let http=require("http")

// 2.创建服务
// 形参：req:请求, res:响应
http.createServer((req,res)=>{
     
    // 返回响应头
    res.writeHead(200,{
     "Content-type":"text/html;charset=UTF-8"})
    // 设置返回内容
    res.end("我是一个服务器")
}).listen(3000)

9、express项目的目录大致是什么结构的？

首先，执行安装 express的指令：npm install express-generator-g。

创建的项目目录结构如下。

• ./app.js 应用核心配置文件（入口文件）
• ./bin 存放启动项目的脚本文件
• ./ package.json 存储项目的信息及模块依赖
• ./public 静态文件（css、js、img等）
• ./routes 路由文件（MVC中的 contro1ler）
• ./views 页面文件（jade模板）\

10:express常用函数有哪些？

常用函数有以下几个

• express .Router—路由组件
• app.get—路由定向。
• app. configure——配置。
• app.set一设定参数。
• app.use——使用中间件。

11:express获取参数

12：模块化：

commonjs模块化

暴露：exports或者module.exports,引入：require

es6模块化：

暴露export，引入import {属性或函数…} from 路径;引入这个模块

三：Git

1·什么是git

Git是目前最流行的分布式版本控制管理工具

Git主要分为四部分：1。工作区，2，缓存区，3本地仓库，4远程仓库

2：Git的常用命令

1． Git init：初始化仓库

2． Git add：将文件添加至缓冲区

3． Git commit -m：将缓冲区的内容添加到本地仓库

4． Git status：查看本地仓库当前的状态

5． Git diff：比较工作区和缓冲区的区别

6． Git reset ：回退版本号

7． Git push：上传远程代码并合并

8． Git pull：下载远程代码并合并

3·Git的分支管理

9． Git branch分支名字：创建分支

10． Git checkout（分支名字）：切换分支

11． Git merge 分支名字：合并某分支到当前的分支

12． Git branch：查看分支

13． Git branch –d 分支名字：删除分支

14． Git checkout –d 分支名字:创建并切换分支

四·vue

1.使用过 Vue SSR 吗？说说 SSR？

Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。

即：SSR大致的意思就是vue在客户端将标签渲染成的整个 html 片段的工作在服务端完成，服务端形成的html 片段直接返回给客户端这个过程就叫做服务端渲染。

服务端渲染 SSR 的优缺点如下：

（1）服务端渲染的优点：

• 更好的 SEO：因为 SPA 页面的内容是通过 Ajax 获取，而搜索引擎爬取工具并不会等待 Ajax 异步完成后再抓取页面内容，所以在 SPA 中是抓取不到页面通过 Ajax 获取到的内容；而 SSR 是直接由服务端返回已经渲染好的页面（数据已经包含在页面中），所以搜索引擎爬取工具可以抓取渲染好的页面；
• 更快的内容到达时间（首屏加载更快）：SPA 会等待所有 Vue 编译后的 js 文件都下载完成后，才开始进行页面的渲染，文件下载等需要一定的时间等，所以首屏渲染需要一定的时间；SSR 直接由服务端渲染好页面直接返回显示，无需等待下载 js 文件及再去渲染等，所以 SSR 有更快的内容到达时间；

（2) 服务端渲染的缺点：

• 更多的开发条件限制
• 更多的服务器负载

2 ：Vue的核心是什么

数据驱动：Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它让开发者省去了操作DOM的过程，只需要改变数据。Vue对操作进行监听，当视图发生改变时，vue监听到这些变化，从而改变数据，这样就形成了数据的双向绑定。

组件响应原理：数据（model）改变驱动视图（view）自动更新

组件化：组件化实现了扩展HTML元素，封装可用的代码。

3·简述你对vue的理解

Vue是目前最流行的一种渐进式的自底向上增量开发的一种js框架，

渐进式体现了可以在原有的基础上，将一两个功能模块进行使用vue开发

自底向上增量开发体现在先实现简单的基础页面。在去添加功能，从简单到复杂的这么一个过程

Vue主要是用来解决：数据绑定的问题，开发大型单页面应用的

Vue主要使用的是mvvm框架

M:模型层，负责业务数据相关

V（View，视图层）：负责视图相关，细分下来就是html+css层，

VM（ViewModel）：M与V的桥梁，负责监听M或者修改V，是双向绑定的要点，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步

复杂的数据状态维护完全由 MVVM 来统一管理。

4：简述vue的单向数据流

所谓单行数据流是指vue将数据从父元素传递给子元素，其子元素里的数据进行改变以后，父元素里的数据并不会随着子元素的变化进行变化

5：vue的常见修饰符

Vue的修饰符分为，键盘修饰符和事件修饰符

• 键盘修饰符

  On：表示方向键上键被触发

  Ctrl：表示ctrl建被按下

  Enter：表示回车键被按下

  Space：表示空格键被按下

• 事件修饰符

  Prevent：表示阻止事件的默认行为

  Stop：表示阻止事件的冒泡行为

  Capture：表示事件的捕获行为

  Self：表示只触发自己范围内的事件

  Once：表示只会触发一次该事件

6：v-text与{ {}}区别

v-text与{ {}}等价

{ {}}叫做插值模板，v-text叫做指令

{ {}}会造成屏幕闪动：在渲染数据量比较大的数据的时候，可能会把大括号给显示出来

解决屏幕闪动的办法就是使用v-cloak，或者是使用v-text

v-clock的使用是：

第一步：在el挂载的标签上添加

第二步：设置css,[v-clock]{display:none}

7：v-on可以绑定多个方法吗

v-on可以绑定多个方法，多个方法之间通过逗号隔开

也可以绑定给一个事件绑定多个修饰符

8：l Vue循环的key****作用

Key的作用是用来高效的更新虚拟dom，

在新旧节点进行对比的时候，key值就相当于一个唯一的标识符，

因为有了这个key值，所以在渲染元素的时候，通常会复用已有的元素，而并不是重新进行渲染，提高了渲染的效率

9：什么是计算属性

计算属性的本质上是vue实例下的一个属性，不过该属性具有计算的功能，在进行一些逻辑运算的时候就可以使用计算属性，减少了插值模板的逻辑运算，

计算属性在计算值变化的时候，会自动进行重新计算，并将结果渲染到视图层，并将结果放到缓存中，下次要是展示就直接拿出来使用，不需要重新调用,只有在值进行变化的时候会重新调用

10：Vue单页面的优缺点

Vue单页面是指：只有一个主页面的应用，在页面进行加载的时候，就加载出该页面所需的所有的东西

• 单页面的优点：

用户体验好，快，内容的改变并不会引起整个页面的重新加载

比较好的前后端分离，分工明确

采用组件化的思想，代码结构更加清晰明了

• 单页面的缺点：

就是不利于搜引擎的抓取，

首次渲染比较慢

11：Vuex是什么？怎么使用？在那种场景下使用**

Vuex是状态管理工具

使用的话：首先要进行vuex的下载，

下载完成以后将其引入到main.js中，将其绑定到vue实例中

Vuex的一般作用是：组件之间数据或者方法的一种共享

Vuex里面主要有五个比较重要的属性

1.State：存放数据的，一般使用this.$store.state调用

2.mutations：用来对state的数据进行修改的，一般采用commit进行调用

mutatons:{
     
名字（state,payload）{
     
State.num= State.num+1
}
}
调用的时候：
Payload就是传过来的参数
This.$store.commit(“名字”,payload)

3.Actions：用来进行异步操作的数据请求，一般采用dispatch进行调用

Content表示this.$store

actions: {
     
        vuexget(content, payload) {
     
            getlink("/data/list/recom").then((ok) => {
     
                content.commit("xiu", ok.data)
            })
        }
},
调用的时候：
This. $store.dispatch(“名字”, payload)

4.Getters：功能类似于computed的，是对state里的数据进行逻辑运算的

5.Modules：项目特别复杂的时候，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

12：Vue中路由跳转方式（声明式/编程式）

Vue的路由跳转分为两种一种是声明式的：

一种是编程式的：编程式的一般是通过this.$router.push(“你要去的路径”)

13：跨域的解决方式

跨域主要是由于浏览器的同源策略引起的，浏览器为了安全期间，不允许不同源的数据进行展示，同源策略一般是指同端口，同协议，同主机的

解决跨域主要有三种方式

• jsonp【通过jsonp：script标签的src属性，可以访问js脚本得内容】

   var script = document.createElement('script');
   script.type = 'text/javascript';        
     // 传参并指定回调执行函数为onBack
  script.src = 'http://www.....:8080/login?
   user=admin&callback=onBack';       
   document.head.appendChild(script);    
  // 回调执行函数
   function onBack(res) {
         
       alert(JSON.stringify(res));
       }         
  
  

• 2:通过代理跨域proxy

  devServer:{
         
          proxy: {
         
              '/api': {
         
                target: 'http://localhost:3000/', //对应后端的端口
                changeOrigin: true,
                ws: true,
                pathRewrite: {
         
                  '^/api': ''
                }}
             }
      }
  
  

• 通过cors

14：Vue的生命周期请简述

Vue的生命周期就是vue实例从创建到销毁的过程

其中包括开始创建，初始化数据，编译模板，挂载dom，渲染，更新，卸载等一系列的过程，称为vue的生命周期

15：Vue生命周期的作用

Vue的生命周期函数的作用是，是开发者在不同的阶段添加自己代码的机会，可以更加便利的控制vue整个过程中的逻辑

16： DOM渲染在那个生命周期阶段内完成

在mounted：模板编译完成以后得周期进行

17： Vue路由的实现

Vue里的路由主要是通过vue-router实现的，

主要是通过url的改变，在不重新请求页面的情况下，快速的渲染出不同的页面

主要有两种模式，包括history模式和hash模式

18：Vue路由模式hash和history，简单讲一下

Hash：在url的显示上有#，比较丑，在回车刷新的时候不会丢失页面，依旧在hash对应的页面，支持一些低版本的浏览器

History：在url的显示上没有#，比较好看，在回车刷新的时候会发生页面的丢失，一般就是404错误，并且是html5新出的api，不太兼容低版本的浏览器

19：Vue路由传参的两种方式，什么是路由传参

动态路由就是把匹配某种模式下的路由映射到同个组件中，其实本质就是通过url进行传参

• Pramas传参一般分为三个步骤：

  1.	在路由规则里配置要去的页面【给谁传参数就将参数绑定到谁的路径上】
  Path:”/all/:xm”
  2.	开始发送：
  this.$router.push({
         name:" 你要去的路由的名字",params:{
         xm:id}})
  3．	接受参数：
  this.$route.params. xm
  

• Query传参一般的为两步：

  1.开始发送：
  this.$router.push({
         name:" 你要去的路由的名字",query:{
         xm:id}})
  2．接受参数
  this.$route. query. xm
  

20：Vue数据绑定的几种方式

a) 将数据绑定到{ {}}或者v-text上

b) 将数据绑定到v-html标签上

c) 将数据绑定到v-bind上，以属性的样式进行解析

d) 通过一次性绑定v-once

e) 通过双向绑定v-model

21:Vue的路由钩子函数/路由守卫有哪些

路由守卫是指在路由进行跳转的时候被自动调用的函数

1. 全局前置守卫：router.beforeEach((to,from,next)=>{}
2. 全局后置守卫: router.afterEach((to,from)=>{}
3. 路由独享守卫:beforeEnter(to,from,next){ }
4. 前置组件内的守卫：beforeRouterEnter(to,from,next){ }
5. 后置组件内守卫：beforeRouterleave(to,from,next){ }

22：Vue-cli中如何自定义指令

Directives：{
     
自定义指令名字：{
     
自定义钩子函数（val）{
     
		//形参就是把自定义指令放在那个dom上他就是谁
		}
	}
}

自定义指令的钩子函数是：

Bind：绑定指令到相关元素上，只执行一次

Unbind：接触指令和元素之间的绑定，只执行一次

Update：指令所在的组件节点更新时调用

Componentupdate：指令所在的组件节点更新完后调用

Inserted：绑定指令的元素在页面中展示时调用

23: Vue中指令有哪些

v-for：循环数组，对象，字符串，数字

v-on：绑定事件监听

v-bind：动态绑定一个或者多个属性

v-model：表单控件或者组件上创建双向绑定

v-if v-else v-else-if 条件渲染

v-show 根据表达式真假，切换元素的display

v-html 更新元素的innerhtml

v-text 更新元素的textcontent

v-pre 跳过这个元素和子元素的编译过程

v-clock 这个指令保持在元素上知道关联实例结束编译

v-once 只渲染一次

24:Vue如何定义一个过滤器

Vue中有两种过滤器，一种全局过滤器，一种局部过滤器

使用方法：

{ {表达式 | 过滤器}}

• 其中全局过滤器的书写时：

  vue.filter{
         
  过滤器名字（val）{
         
  Return 结果
  }
  }
  
  

• 其中局部过滤器的书写时：

  filters{
         
  过滤器名字（val）{
         
  Return 结果
  }
  }
  

25:对vue 中keep-alive的理解

概念：keep-alive是vue的内置组件，当它动态包裹组件时，会缓存不活动的组件实例，它自身不会渲染成一个DOM元素也不会出现在父组件链中

作用：在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间以及性能消耗，提高用户体验。

使用:

<keep-alive include="Comb,Comc">
        <component :is="com"></component>
   </keep-alive>

生命周期函数：

Activated在keep-alive组件激活时调用，

deactivated在keep-alive组件停用时调用

26:如何让组件中的css在当前组件生效

添加一个scoped，表示组件仅在当前组件中起作用

27:Vue生命周期一共几个阶段

Beforecreate：在vue实例创建之前

Created：vue实例已经创建完成，但是dom还没有挂载上

Beforemount：在dom准备渲染之前

Mounted：dom已经挂载好了，此时可以操作dom

Beforeupdate：在所有的组件更新之前

Updated：在所有的组件更新之后

Beforedestory:在vue实例销毁之前

destored:在vue实例销毁之后

28:Mvvm与mvc的区别

Mvc模型视图控制器，视图是可以直接访问模型，所以，视图里面会包含模型信息，mvc关注的是模型不变，所以，在mvc中，模型不依赖视图，但是视图依赖模型

Mvvm 模型 视图 和vm vm是作为模型和视图的桥梁，当模型层数据改变，vm会检测到并通知视图层进行相应的修改

29:l Vue组件中的data为什么是函数

Data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，不会相互影响

如果是引用类型（对象），当多个组件共用一个数据源时，一处数据改变，所有的组件数据都会改变，所以要利用函数通过return返回对象的拷贝，（返回一个新数据），让每个实例都有自己的作用域，相互不影响。

30：Vue双向绑定的原理

Vue双向绑定就是：数据变化更新视图，视图变化更新数据

Vue数据双向绑定是通过数据劫持结合发布订阅者模式来实现的，

数据劫持：object.defineproperty可以感知到数据变化，在通过setter进行获得，getter设置

观察者模式 当属性发生改变的时候，使用该数据的地方也发生改变

31：Vue中组件怎么传值

正向：父传子 父组件把要传递的数据绑定在属性上，发送，子组件通过props接收

子：
:src =” imgurl”
Props:[“imgurl”]

父
: imgurl=”http://www.baidu.com”

逆向：子传父 子组件通过this.$emit（自定义事件名，要发送的数据），父组件设置一个监听事件来接收，然后拿到数据

**兄弟：**eventbus 中央事件总线

第一步：创建一个eventbus的文件夹以及index.js的文件

第二步：在a组件中引入中央事件总线，设置一个抛出事件

eventBus.$emit("pao","我是数据")

第三步：在b组件同样引入中央事件总线，用来接收抛出事件

eventBus.$on("pao",(msg)=>{
     
       his.text=msg;
		}) 

通过:Vuex

优点：解决了非父子组件的通信，减少了ajax请求次数，有些可以直接从state中获取

缺点：刷新浏览器，vuex中的state会重新变为初始状态，解决办法是vuex-along，得配合计算属性和sessionstorage来实现

32：槽口请简述

大概分这几点，首先槽口（插槽）可以放什么内容？放在哪？什么作用？可以放任意内容，在子组件中使用，是为了将父组件中的子组件模板数据正常显示。

具名插槽和匿名插槽，作用域插槽，说白了就是在组件上的属性，可以在组件元素内使用，

可以在父组件中使用slot-scope从子组件获取数据

33：计算属性与watch区别

Computed watch 区别就是computed的缓存功能，当无关数据数据改变时，不会重新计算，直接使用缓存中的值。

计算属性是用来声明式的描述一个值依赖了其他的值，当所依赖的值后者变量发生变化时，计算属性也跟着改变，

Watch监听的是在data中定义的变量，当该变量变化时，会触发watch中的方法

34：Vue首屏加载慢的原因，怎么解决的，白屏时间怎么检测，怎么解决白屏问题

1. 路由懒加载

2. 使用webpack的externals属性把不需要打包的库文件分离出去，减少打包后文件的大小

   module.exports = {
          
    externals: {
          
     jquery: 'jQuery'
   	}};
   

3. Ui框架按需引入加载

4. 使用v-if和v-else添加加载的动态效果

5. 使用vue的ssr技术

35：Vue双数据绑定过程中，这边儿数据改变了怎么通知另一边改变

通过数据劫持和发布订阅者模式

36：Route与router区别

• router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。

• route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等

37：v-for与v-if优先级

首先不要把v-if与用在同一个元素上，原因：v-for比v-if优先，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候。

v-for 比 v-if 具有更高的优先级

38：Vue路由懒加载（按需加载路由）

component: () => import('../views/About.vue')

？放在哪？什么作用？可以放任意内容，在子组件中使用，是为了将父组件中的子组件模板数据正常显示。

具名插槽和匿名插槽，作用域插槽，说白了就是在组件上的属性，可以在组件元素内使用，

可以在父组件中使用slot-scope从子组件获取数据

33：计算属性与watch区别

Computed watch 区别就是computed的缓存功能，当无关数据数据改变时，不会重新计算，直接使用缓存中的值。

计算属性是用来声明式的描述一个值依赖了其他的值，当所依赖的值后者变量发生变化时，计算属性也跟着改变，

Watch监听的是在data中定义的变量，当该变量变化时，会触发watch中的方法

34：Vue首屏加载慢的原因，怎么解决的，白屏时间怎么检测，怎么解决白屏问题

1. 路由懒加载

2. 使用webpack的externals属性把不需要打包的库文件分离出去，减少打包后文件的大小

   module.exports = {
          
    externals: {
          
     jquery: 'jQuery'
   	}};
   

3. Ui框架按需引入加载

4. 使用v-if和v-else添加加载的动态效果

5. 使用vue的ssr技术

35：Vue双数据绑定过程中，这边儿数据改变了怎么通知另一边改变

通过数据劫持和发布订阅者模式

36：Route与router区别

• router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。

• route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等

37：v-for与v-if优先级

首先不要把v-if与用在同一个元素上，原因：v-for比v-if优先，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候。

v-for 比 v-if 具有更高的优先级

38：Vue路由懒加载（按需加载路由）

component: () => import('../views/About.vue')