1.响应式布局如何实现
1)为什么要使用响应式布局：
使用固定宽高有一定的局限：屏幕越来越宽时，因为定得宽是固定的，这样会让页面不美观
屏幕越来越小时，因为定宽的局限会让用户看不到完整的页面内容在这种情况下，就可以使用响应式布局
因为响应式布局会适配屏幕的宽高 不管用户用的是哪种移动设备都可以看到完整的页面
2)
响应式布局的实现有五种方法：
1.百分比布局：百分比布局是相对于父元素进行布局，百分比能够对width,height,padding,margin来进行布局，border,font-size不能；
局限： 因为百分比布局只能对大面积的地方进行布局，所以不够完美
2.css3媒体查询：媒体查询可以根据不同的分辨率来设置不同的css样式，通过这种方式来适配不同屏幕,相比于百分比布局，媒体查询可以对布
局进行更细致的调整
语法：@media screen and(min-width:1200px) @media screen and(max-width:1200px) Screen就是客户端屏幕的信息
局限：媒体查询在设置的时候需要在每个分辨率和操作下设置不同的css样式 很麻烦
3.rem响应式布局：rem是一个单位，跟px,em类似，1rem就等于html的font-size值，有两种方法可以进行设置
1.通过媒体查询来设置，在不同的分辨率下给html的font-size赋值；比较麻烦
2.js进行动态计算给font-size设置值：封装一个函数：通过屏幕的宽度去处理某个数，得出来的值就是html的font-size值，当屏幕宽
度改变的时候就调用这个函数，这样在使用rem的时候就会根据html的font-size来进行等比缩放；
4.弹性盒子布局：通过display:flex;来布局，给父元素设置display:flex;在给子元素设置想要改变的属性；
5.vw响应式布局：vw是基于视口的布局方案，所以在使用的时候需要在meta标签的视口中声明；1vw等于视口宽度的1% 1vh等于视口高度的1%；
现在用的都是vw，因为高度是根据内容的多少而自适应的。
2.rem布局原理
原理就是:rem是指相对于根元素的font-size值来进行计算 也就是1rem就等于html的font-size值
1rem等于100px 就是font-size的值*设定的rem值，整个body页面就是相对于根元素的font-size的值
怎么使用rem来布局
使用js来动态修改根元素的font-size值，当屏幕宽度发生改变的时候在调用你设置的rem函数
代码就是：function rem(){
document.documentElement.style.fontSize=document.documentElement.clientWidth/7.5+'px'
}
rem()
window.onresize=rem;
3.数据类型判断
有4中数据类型的判断的方法
1）typeof（）他可以检测一些基本数据类型，比如number,string,能够被具体的检测出数据类型
但要是判断引用数据类型 比如array，object tyoeof就不好使了
2）instanceof他可以检测一些实例化对象引用数据类型 可以判断是否是某个数据类型和是否是某个实例
但是他不能判断 null 和 undefined
3）constructor 他可以判断引用数据类型和基本数据类型； 他是通过对象的constructor来判断他是否和他的原型相同
但是原型被更改的话 那么constructor方法就不好用了
4）Object.prototype.toString.call() 他目前是一个最完美的解决方案 他只需要在括号里写想要判断的数据类型就可以了
他可以从原型中找要判断的数据类型
4.原型和原型链
原型：每个函数都有一个prototype对象 这个对象就是函数的原型 每个函数原型中都有一个constorctor属性 就是构造函数的本身
构造函数被new关键字实例化后，都会包含一个__proto__ 属性 这个属性就是原型 new实例化后的对象没有prototype原型
但是他有__proto__原型 函数的原型可以在原型中添加属性 所有实例化对象都可以访问
原型链：当想要访问一个属性或方法的时候，先从自身的原型中去找，如果没有就去原型指向的对象的原型中去找，如果还是没有
找到那么就在当前对象的原型指向的对象中查找 直到结束 最后找不到就返回undefined
5闭包
要了解闭包，先得了解变量的作用域，分为全局作用域和局部作用域，
闭包就是函数嵌套函数 内部函数可以访问外部函数的变量和参数 而外部函数不能访问内部函数的变量和参数
本质就是将函数内外部连接起来
在没有形成闭包的时候外界可以访问到闭包内的数据
一旦形成闭包那么外界就无法访问闭包内的数据
闭包的优缺点：
优点：块级作用域 把变量长期存储在内存中 防止全局变量的污染 减少创建全局变量 减少传递函数的参数量
缺点：虽然他防止的全局变量的污染 但是将变量长期存储在内存中 会导致内存的泄露 会让使用过的变量无法被垃圾回收机制回收
6继承
1.借调构造函数继承：构造函数继承的中心思想就是把父函数的this指向改为子函数的this指向，从而实现继承；
优点：可以传递参数，借助call等改变this指向的方法；
改变this指向的方法：call 第二个参数与要改变指向中的方法的参数对应
apply 第二个参数是一个数组,数组中的元素与要改变的方法中的参数对应
bind方法使用后返回的是一个函数,所以第二个参数要在()里写,然后进行调用
缺点：他只能继承父函数本身的属性，父类原型的方法却不能使用；无法实现构造函数的复用。每个新实例都有父类构造函数的副本
2.原型链继承：原型链继承就是把子函数的原型改为父函数的实例，从而实现继承
优点：子类可以继承父类和父类原型中的属性和方法；
缺点：子类无法在继承的过程中给父类传递参数，因为子类的原型都是New Parent,所以实例化出来的对象都是一样的，
而且Parent上面的引用类型只要有一个实例对象修改了，其他实例对象也会跟着修改，因为他们的原型对象都是
共用的。
3.组合式继承
4.原型式继承
5.寄生式继承
6.寄生组合式继承
7.ES6继承
7.什么是深拷贝，浅拷贝，如何实现
深拷贝与浅拷贝都是针对与引用数据类型来说的；
浅拷贝就是对象引用 深拷贝就是创建对象
浅拷贝只复制一层对象的属性 他复制的就是只有一层结构的Array，Object 当对象的属性发生改变后 复制他的对象的属性也会发生改变
深拷贝就是复制了所有层级 就是复制多层变量每一级都会被复制 深拷贝后的对象和原对象是完全隔离的
当原对象的属性发生改变 复制他的对象属性不会改变
浅拷贝的实现方式有两种：
1）使用Object.assign({},obj)第一个参数是个空对象 ,第二个参数就是想要复制的对象
1备用）map循环就是一个浅拷贝
浅拷贝可以修改引用数据类型但是不能修改基础的数据类型
2）可以使用ES6中的...扩展运算符来进行浅拷贝的实现
3）可以直接用=来赋值
4）可以用for···in只循环第一层 复制第一层的数据
深拷贝复制变量值 对一个非基本数据类型的变量 就需要递归变量后在进行复制
深拷贝的实现方式有两种：
1）通过利用JSON对象来实现深拷贝JSON.parse(JSON.stringfy(obj)); 就是先将这个对象转换成字符串 再将字符串转换为一个对象 这样就实现了深拷贝
2）定义一个函数deep来实现，他的参数是一个obj对象，函数里面第一步先判断参数obj是否为一个对象，如果不是就返回return false；
如果是的话就定义一个空的数组作为存储空间；随后在遍历obj,如果内容是一个对象的话就把循环的当前项添加到上面创建的新数组中；
最后在返回这数组；需要进行深拷贝的话就调用这个函数；
8.事件冒泡和事件捕获
事件：事件就是JS和HTML之间的交互是通过事件实现的，事件就是文档或浏览器窗口中发生一些特定的交换瞬间
事件冒泡：就是由嵌套最深的元素开始接收 然后从内到外的传播嵌套的dom节点 直到传播到最外面dom节点
1.阻止事件冒泡：
有两种方式：
1)原生js中的event.stopPropagation()
2)vue的修饰符 有一个.stop将他加到想要阻止冒泡的事件后面 比如 @click.stop='事件名'
2.阻止默认行为：1.js中的event.preventDefault() 2.vue中的.prevent
3.事件捕获：由嵌套最外面的dom节点先触发事件，从外由内开始传播 直到嵌套最深的dom节点触发事件
设置事件捕获：
也是有两种方式：
1)原生js中的addEventListener(事件名称，function()，true/false)第一个参数是事件名称
第二参数是一个回调函数，第三个参数是一个Boolean值 如果不写的话就默认为false
2)vue的修饰符 有一个.capture将他加到想要设置捕获的事件后面 比如 @click.capture='事件名'
9.h5和css3的新特性
h5：
1）新增了canvas绘画元素；
2）用于播放视频的 video audio 元素；
3）本地存储 localStorage 长期存储数据 浏览器关闭数据不会丢失，
sessionStorage 的数据在浏览器关闭后数据会自动删除，
4）增加了语义化标签：header、footer、nav、section、article
5）表单控件：date、time、Email、url、search等；
6）地理定位；
7）拖拽；
css3:
1）新增了属性选择器、伪类选择器
2）渐变色background-image: linear-gradient线性渐变、radial-gradient径向渐变
3）盒子的阴影设置box-shadow: 2px 2px 2px #000;
4）过渡动画transition:all默认值 所有属性都将获得过渡的效果 none没有属性会获得过渡效果， transition-duration：定义过渡效果花费的时间
transform属性： translate(x,y) 根据X轴和Y轴位置给定的参数，从当前元素位置移动，scale(*x*,*y*)：改变元素的宽度和高度，rotate(*angle*)：在参数中规定角度 旋转角度
5）display:flex;弹性盒子模型、媒体查询@media
6）2D/3D的转换
7）背景和边框 和 文本效果
10.Axios拦截做过哪些
Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中。
可以在请求或响应被 then 或 catch 处理前拦截它们。
请求拦截器：可以用他实现loading加载和数据的权限验证 所有数据的预加载也可以实现
响应拦截器：可以在loading加载结束 并在数据渲染到页面前进行隐藏和结束loading加载
对跨域问题的解决，可以配置公用的地址
拦截器的优势：
1）可以从浏览器中创建 XMLHttpRequests
2）从 node.js 创建 http 请求
3）支持 Promise API
4）拦截请求和响应
5）转换请求数据和响应数据
6）自动转换 JSON 数据；
11.SessionStorage，LocalStorage，Cookie 的区别
LocalStorage和sessionStorage的方法有getItem(),setItem(),removeItem(),clear();
他们都是将数据存储到浏览器端，而且是同源的 同源是协议、域名、端口均相同 只有路径不同 就是同源
从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期
LocalStorage：生命周期是永久的 关闭浏览器之后存储的数据不会消失 除非手动删除数据否则的话数据不会消失 不参与和浏览器的通信，
sessionStorage：生命周期只是在当前的浏览器窗口中有效 SessionStorage是在同源的窗口中始终存在的只要浏览器窗口没有关闭，
即使刷新页面刷新页面或者进入另一个页面数据也还在 一旦浏览器窗口关闭那么数据就会被自动删除
cookie:主要用于实现用户注册、用户登录、购物车等
cookie 只能存储一些简单的数据为了保证可以和服务器正常交互 存储的信息比较少
cookie 的长度和数量有限制 每个最多只能存储20条cookie 每个cookie不能超过4kb 超过4kb的话就会被阻止
cookie 属于服务端验证 服务端可以获取客户端cookie
12.图片的懒加载实现原理
懒加载其实就是延迟加载 比如加载一个很长的页面 长到浏览器的可视区域看不到 懒加载就会优先加载可视区域的内容
等到其他内容进入可视区域后在加载
图片懒加载也就是这个意思 比如有一个很多图片的页面 就优先加载可视区域的图片 等到其他图片进入可视区域后
在进行加载图片 这就是图片的懒加载
懒加载的作用就是：减少延迟请求数据 缓解浏览器的压力，增强用户的体验
实现方法：
1）页面初始化显示的时候或者浏览器发生滚动的时候判断图片是否在可视区域中
2）判断当滚动条滚动到一定的高度时进行图片懒加载
13.瀑布流的原理
瀑布流就是对每一列的高度进行对比 就会从高度最低的那一列下面进行添加
是比较流行的一种网站页面布局，瀑布流的特点就是视觉表现参差不齐的排列方式
可以通过页面给用户展示更多数据 使用户有一种想往下浏览的冲动 这就是瀑布流
他的实现方式有三种
1）js 实现瀑布流
2）css里面的 column 多行布局实现瀑布流
3）flex 弹性布局实现瀑布流
14.meta 标签内属性及详解
1）keywords 2）description
3）viewport(移动端的窗口) 4）robot
5）author 6）generator(网页制作软件)
7）copyright（版权） 8）revisit-after(重访)
9）renderer 10）expires(期限)
11）pragma(cache模式) 12）Refresh(刷新)
13）set-Cookie(cookie设定) 14）window-target(显示窗口的设定)
15）content-Type(显示字符集的设定) 16）content-Language(显示语言设定)
17）Cache-Control(指定请求和响应遵循的缓存机制)
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'>
width:可视区域的宽度，值可为数字或关键词(低外丝)device-width
(印错)intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0
(马克思梦)maximum-scale用户可将页面放大的程序，1.0可视区域的缩放级别。
(死给雷波)user-scalable:是否可对页面进行缩放，no 禁止缩放
15.解构赋值
es6允许按照一定的模式，从数组中提取值，对变量进行赋值 可以快速取值
左右两边的结构必须相同 这就被称为解构赋值
左边是数组的话 右边就是数组 可以快速的获取数组中的值
左边是对象的话 定义的变量就是 右边对象中的属性名 可以快速获取对应左边变量的属性值
应用场景：
1）函数参数的定义
2）提取json的数据
3）可以让函数返回多个值 解构赋值可以让函数返回一个数组或者是对象
16.async/await
async和await 是一种同步的写法，但还是异步操作，async和await必须同时去写才会生效 不然的话就会报错
await可以等同步方法执行完成 在运行await后面的代码 在请求数据的时候 等待数据加载过来 才会运行await后面的代码
而且await接收的必须是个promise对象 async 和 await 主要应用是在数据接收 和解决异步问题的处理
17.es6有哪些拓展
1）新增了块级作用域(let,const)
2）提供了定义类的语法糖(class)
3）新增了一种基本数据类型(Symbol)
4）新增了变量的解构赋值
5）函数新增了箭头函数 rest参数 可以给参数设置默认值
6）数组新增了一些API接口 数组实例新增了 entries()，keys()，values()
7）对象和数组新增了扩展运算符
8）ES6新增了模块化(import/export)
9）ES6新增了Set 和 Map 数据结构
10）ES6 原生提供Proxy 构造函数，用来生成Proxy实例
11）ES6 新增了生成器(Cenerator) 和遍历器(Iterator)
18. 请写出在Vue 中使用Promise 封装项目的Api接口的思路
1.在src工程目录下新建一个Utils 文件夹 在文件夹中创建一个api.js
在文件中导入axios 然后创建一个axios的实例 里面写baseURL(请求头)和超时时间timeout
2.导出这个对象；
1）在配置文件中
1、封装请求方式
2、封装请求路径
19.promise是什么？有哪些状态和参数？如何使用
promise是一个对象 通过他可以获取异步操作的消息 也是异步编程的一种解决方案
1）主要就是用于异步计算
2）可以将异步操作队列化 按照期望的顺序执行 返回符合预期的结果
3）可以在对象之间传递和操作promise帮我们处理队列
4）可以将ajax请求封装 他有两个参数 resolved 成功 rejected 失败
5）可以解决回调地狱的问题
回调地狱：发送多个异步请求，会出现第一个请求成功后再做下一个请求我们这时候往往会用嵌套的方式来解决这种情况，
但是这会形成”回调地狱“。如果处理的异步请求越多，那么回调嵌套的就越深
20.for··in迭代和for···of有什么区别
1.for···in推荐在循环对象属性的时候使用 for···of在遍历数组的时候使用
2.for···in循环出的是对象的属性key，for···of循环出的是数组的值value
3.for···of是ES6新引入的特性。修复了ES5引入的for···in的不足
4.for···of不能循环普通的对象，需要通过和object.keys（）搭配使用
21.generator（异步编程、yield、next()、await 、async）
旧）Generator是一个函数，可以在函数内部通过yield返回一个值（此时，Generator函数的执行会暂定，直到下次触发.next()）;
使用流程：
1.创建一个Generator函数的方法是在function关键字后添加*标识。
2.在调用一个Generator函数后，并不会立即执行其中的代码，函数会返回一个Generator对象，通过调用对象的next函数，可以获得yield/return的返回值。
3.无论是触发了yield还是return，next()函数总会返回一个带有value和done属性的对象。
4.value为返回值，done则是一个Boolean对象，用来标识Generator是否还能继续提供返回值。
需要注意的是：Generator函数的执行时惰性的，yield后的代码只在触发next时才会执行；
next()我们可以在调用next()的时候传递一个参数，可以在上次yield前接收到这个参数：
应用场景：1.因为Generator对象是一个迭代器，所以我们可以直接用于for of循环；2.模拟实现Promise执行器
async await
async 是 ES7 才有的与异步操作有关的关键字,在定义函数的时候在函数的前面加上async 函数返回的是promise
await 操作符用于等待一个 Promise 对象, 它只能在异步函数 async function 内部使用。也就是async可以没有await，但是await必须要有async
新）generator是一个迭代器生成函数 其返回的是一个迭代器 可用作于异步调用
有三种状态(状态A，状态B，状态C) 这三种状态的变化就是 状态A=>状态B=>状态C=>状态A
这就是状态机 generator最适合处理这种状态机
22.Ajax是什么？以及如何创建Ajax?
ajax主要是用来实现客户端和服务端异步通信的效果，实现页面的局部刷新，ajax的原生方式主要通过XMLHttpRequest
ajax优势?
1）不需要插件的支持，可以被大多数主流的浏览器支持
2）提高了用户的体验
3）无需刷新页面就可以获取数据
Ajax的应用场景
1）用户的登录注册，检测用户数据是否重复
2）做城市选择 和二级联动或三级或者更高 可以使用ajax
ajax实现方式：
原生js:
1）创建一个请求 用一个变量来接收请求 let xhr = XMLHttpRequest()
2）使用open()方法初始化请求他有两个参数 参数1是请求数据的方式 参数2是请求的url地址
3）设置回调函数xhr:onreadystatechange = function(){}; 在函数内部做一些判断
使用xhr.readystate == 4 判断 表示已经请求完成
然后判断状态码 xhr.status==200 如果等于200就表示成功
然后用xhr.responseText 获取响应数据
4）通过send()发送请求
jq的方式：
1）通过$ajax({
url:'地址'，type:请求方式，
success：()=>{成功之后的回调函数}，
error：()=>{失败之后的回调函数}
})
23.什么是跨域，以及jsonp的原理
协议、域名、端口有一个不同就是跨域 然后协议、域名、端口均相同就是同域
跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。
jsonp原理：
ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，
服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。
24.跨域的解决方式有哪些?
1)jsonp主要就是利用动态创建script标签请求后端接口地址，然后传递callback参数 后端接收callback经过数据处理
返回callback函数调用的形式，callback中的参数就是json
2)前端反向代理 在vue.config.js中的proxy函数里面配置API接口的路径
3)CORS是一个W3C标准，全称是"跨域资源共享" 他允许浏览器跨域发送XMLHttpRequest请求
克服了ajax只能使用同源的限制 只要服务器实现了CORS接口，就可以跨源通信。
3）CORS是后台封装好的一个跨域的接口 只要服务器实现了CORS接口，就可以跨源通信。
25.从输入URL到页面加载完成期间经历了什么？
1.通过DNS域名解析
2.向ip地址对应的服务器发起TCP连接；
3.发送HTTP请求 服务器接收用户的HTTP请求；
4.服务器处理请求并返回对应的数据给客户端；
5.服务器和客户端断开TCP连接
6.客户端把结果渲染到浏览器即可，浏览器解析HTML代码，js，css等资源，进行页面渲染，最后页面显示出来呈现给用户
客户端先请求服务器资源，浏览器去解析服务器资源，然后把相关的html 通过浏览器解析之后渲染到页面
url(客户端)请求回来的就是服务器的资源 所有的数据都在服务器 我们看到的都是从服务器下载来的
SYN_SENT表示请求连接
SYN_RECV状态 成功接收客户端传来的SYN包
ESTABLISHED的意思是建立连接。表示两台机器正在通信
SYN表示建立连接
FIN表示关闭连接，
ACK表示响应
第一次握手
建立连接时，客户端发送syn包(请求连接)包到服务器，等待服务器确认 SYN：同步序列编号
第二次握手
服务器收到syn包(请求连接)，必须确认客户的SYN(确认连接)，同时自己也发送一个SYN+ACK包(响应连接)，成功接收客户端传来的请求连接；
第三次握手
客户端收到服务器的SYN+ACK包(响应连接)，向服务器发送确认包ACK(确认连接），此包发送完毕，客户端和服务器进入ESTABLISHED（TCP连接成功）状态，完成三次握手。
第一次挥手
客户端向服务器发送FIN关闭连接报文 等待服务器的确认
第二次挥手
服务端收到客户端发来的关闭连接的请求 服务端向客户端发送了一个ACK报文 表示我收到了你请求
必须等服务端把客户端请求的所有数据都传完 才能发送关闭连接的响应
第三次挥手
服务端将客户端请求所有数据都发送完成 然后把FIN报文发送到客户端 表示响应客户端发来的关闭连接请求
四次挥手（断开TCP连接）
当客户端收到服务端发送的关闭连接的响应报文,那他们就会断开(TCP)连接(四次挥手)
26.vue中methods,computed,watch的区别
1）methods 没有缓存性的 只要被调用 就会执行 适用于组件的功能封装 和 逻辑处理
2）computed 他是vue独有的特性计算属性 具有缓存性的 依赖于属性值 只要属性值发生改变 就会执行这个函数
可以对data中的数据进行重新计算获取一个新的值，应用到视图上
3）watch 他也是没有缓存性的 监听data和计算属性中属性的变化然后执行这个函数 可以利用他的特性做一些异步的操作
27.prop验证，和默认值
prop 数据单项传递，父不影响子，子不影响父 不能再组件中直接修改prop传递的值，Vue会发出警告
默认值：
props:会接收不同的数据类型，常用的数据类型的设置默认值的写法
Number, String, Boolean, Array, Function, Object 都可以设置默认值 如果没有定义值那么就使用默认值
28.Vue 双向数据绑定原理
vue的双向数据绑定原理是采用数据劫持结合发布者和订阅者模式的方式，再利用Object.defineProperty()来劫持各个属性的setter,getter,在数据
变动时发布消息给订阅者，在触发相应的监听回调；
其实就是通过Object.defineProperty()这个方法和里面的get()获取属性值和set()设置属性值这两个方法操作的；
它里面有两个常用参数，第一个参数就是定义的对象的名字；
比如var obj = {}，obj就是第一个参数，第二个参数是要定义或修改的属性的名称，
29.Vue 组件父子、子父、兄弟通信
父传子：
就是在父组件的子组件的标签上 自定义一个属性 用于绑定要传递的值传给子组件
在子组件中通过props来接受父组件传过来的数据 接收完的数据直接在子组件中使用
子传父：就是在子组件元素中绑定一个事件，触发事件后，在事件中使用$emit，里面有两个参数(自定义事件，传递的值)
父组件的子组件标签上 自定义一个事件 事件名必须是$emit的自定义事件名 自定义事件调用父组件定义的函数
兄弟传值：
在Src中的assets文件夹中创建一个bus.js的文件 在里面导出一个Vue的空实例
在两个需要传递数据和接收数据的兄弟组件中导入bus文件
在需要传递数据的组件内使用bus.$emit(定义的事件名，传递的值)传递数据
在接收数据的组件中使用bus.$on(自定义事件,(data)=>{})来接收传递过来的值
$emit()参数1是自定义的事件名 参数2是要传递的值
$on()参数1是自定义的事件名 参数2是一个回调函数
30.Vue 生命周期
有八个生命周期
第一次加载页面只会触发前四个钩子函数；
beforeCreate(创建前)：数据创建完成之前，这个阶段实例的data,methods这些是都访问不到的 只有一些实例本身的事件和生命周期函数
Created(创建后)：数据加载完成，是最早能够获取数据的函数，无法获取DOM节点，这个阶段的数据并没有
在DOM元素上进行渲染。
beforeMounted(挂载前)：数据加载完成之后，DOM加载完成之前，只是模板和数据进行结合，但是没有挂载到页面上，可以在这里进行数据的最后修改
Mounted(挂载后)：DOM节点挂载完成之后，最早可以操作DOM的函数，这里面可以进行ajax交互。可以进行axios
数据请求；而且mounted只会执行一次；
beforeUpdate(更新前)：在数据更新之前调用；会更新当前组件数据，但不会在页面渲染出来；
Updated(更新后)：data数据改变的时候，影响到DOM的时候；在这里可以获取到最新的DOM结构；
beforeDestroy(销毁前)：在实例销毁之前调用，这个时候实例还可以使用，在这里可以清除一些组件中的定时器和监听dom事件
Destroyed(销毁后)： 实例化销毁的时候触发；所有的事件监听器都会被清除
31.Vue 路由传参数如何实现
有两种方式传参query和params
query和params都是分为视图导航模式和編程式导航跳转传参
query:
视图导航模式：格式就是to="/path+参数列表"，在router-link里面写
編程导航模式：在定义的函数中通过this.$router.push({path:'/路径',query:{传递的参数}}) 获取参数的是this.$router.query.参数名
params:
视图导航模式：在router-link标签上加:to后面拼接"/路由地址/+item.id"来进行路由跳转并传参
編程导航模式：在定义的函数中通过this.$router.push({name:'Detail',params:{id:id}}) 获取参数的是this.$router.params.参数名
区别：
query要通过path来引入,params要通过name引入
32.路由导航守卫有几种，如何实现
一、全局路由守卫：
全局路由守卫有两个，一个全局前置守卫，一个全局后置守卫。
router.beforEach((to,from,next)=>{})
router.afterEach((to,from)=>{})
全局后置守卫没有next回调函数
二、组件内部守卫：
跟methods：{}等同级别 组件路由守卫是写在每个单独的Vue文件里面的路由守卫
beforeRouterEnter(to,from,next){ 在路由进入之前调用这个函数 }
beforeRouterUpdate(to,from,next){ 当路由参数发生改变的时候调用这个函数 }
beforeRouterLeave(to,from,next){ 当路由离开当前路由页面的时候调用 }
三、路由独享守卫
路由独享守卫就是在路由配置页面单独给路由配置一个守卫
只是守卫当前的路由 语法：在路由映射表里面写beforeEnter(to,form,next)
to 到那个路由页面去
from 从哪个路由页面来
next() 回调函数参数配置
33.Vuex 中 state,getters,mutations,actions,modules的用途和用法
1.state:存储变量(状态)
2.mutations:可以修改state中的变量并且是同步的 在组件中使用this.$store.commit(函数名，值)调用这个方法
3.actions:异步操作 在组件中使用this.$store.dispath('')调用这个方法 他只能操作mutations的函数
4.getters:类似于计算属性 他可以对state中的数据做一些逻辑性的操作
5.modules: 模块化 store的子模块 将仓库分为模块存储
34.Vue中key的作用
在生成虚拟dom的过程中，相同的组件产生相同的dom结构，不同的组件产生不同的dom结构，
同一层级的dom节点，他们可以通过唯一的id进行区分，这个id就是key。
作用：高效的更新虚拟dom key是元素的唯一标识符
35.Vue 自定义指令如何使用
自定义指令分为全局和局部自定义指令
全局的自定义指令是：在main.js或组件中使用Vue.diretive()来全局注册指令
局部的自定义指令是：在组件中的Vue的实例中定义 directives跟methods同级
钩子函数：
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用
update：所在组件的 VNode 更新时调用，可能发生在其子 VNode 更新之前。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。
钩子函数的参数：
**el**: 指令所绑定的元素，可以用来直接操作 DOM。
**binding**: 一个对象，里面包含了几个属性：value:指令的绑定值，name:指令名等；
**vnode**：Vue 编译生成的虚拟节点。
**oldVnode**：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
36.Vue 常用修饰符
事件修饰符：
.prevent: 提交事件不再重载页面
.stop: 阻止单击事件冒泡
.self: 当事件发生在该元素本身而不是子元素的时候会触发
.capture: 事件侦听，事件发生的时候会调用
.once 只执行一次
面试需要答的：
.(turemu)trim - 输入首尾空格过滤
.number - 输入字符串转为有效的数字
.sync：对prop进行双向绑定
.(leizi)lazy - 取代 input 监听 change 事件
.(pasiweif)passive：addEventListener中的第三个参数，表示 listener 永远不会调用 preventDefault()
.(naitewei)native：组件绑定当前组件的事件是不会触发的，需要用native才能触发
37.keep-alive 的作用
keep-alive是Vue中的内置组件，能在切换过程中把状态保留在内存中，防止重复渲染DOM
包裹动态组件时，会缓存不活动的组件实例，而不是销毁他们。
prop属性值:
- include: 只有匹配的组件会被缓存。字符串或正则表达式。
- exclude: 任何匹配的组件都不会被缓存。字符串或正则表达式。
keep-alive生命周期钩子函数：activated、deactivated
场景：Vue中前进刷新，后退缓存用户浏览数据
比如用户在视频页面发表一条评论 然后就跳转到个人信息页面 然后在退回视频页面
刚才发表的评论不会消失 因为被keep-alive缓存了 但是刷新页面的话 评论就不存在了
38.Object.defineProperty()方法有何作用
作用：Object.defineProperty方法会直接在对象上定义一个新属性，或者修改一个对象的现有属性，
并返回这个对象，在vue中通过getter和setter函数来实现双向绑定；
参数：
他有三个参数 obj,prop,descriptor
1）obj：要定义或返回属性的对象；
2）prop：要定义或修改的属性名称。
3）descriptor：要定义或修改的属性描述符
39.什么是虚拟dom和diff算法
虚拟dom: 虚拟DOM就是为了解决浏览器性能问题而被设计出来的，
所谓的虚拟dom，也就是虚拟节点，是通过JS的Object对象模拟DOM中的节点，
然后再通过特定的render方法将其渲染成真实的DOM的节点 提高浏览器的性能。
diff算法：Diff算法就是在虚拟DOM树(树就表示数据结构)从上至下进行同层比对，如果上层发生了改变，
把发生改变的虚拟dom应用的真正的dom上。
40.Vue中数组中的某个对象的属性发生变化，视图不更新如何解决
在使用Vue的过程中 会遇到 vue data中的数据更新后 视图没有自动更新u
这种情况一般是改变了对象的某一项，但是其他依赖这个数据的视图却没有更新
解决方式有三种
1）利用Vue.set(this.obj,key,val) 参数1是个对象 ，参数2是属性 ，参数3是对象的属性值
2）利用this.$set(this.obj,key,val) 参数1是个对象 ，参数2是属性 ，参数3是对象的属性值
3）利用Object.assign({},this.obj) 参数1是空对象，参数2是一个对象，创建新的对象
41.Vue3.0与Vue2.0的区别
下载安装
Vue3.0:
npm install -g vue@cli
删除了vue list
创建项目 vue create 项目名
启动项目 npm run serve
Vue2.0:
npm install -g vue-cli
创建项目 vue init webpack 项目名
启动项目 npm run dev
默认项目目录结构也发生了变化：
移除了配置文件目录，config 和 build 文件夹
移除了 static 文件夹，新增 public 文件夹，并且将 index.html 移动到 public 中
在 src 文件夹中新增了 views 文件夹，用于分类 视图组件 和 公共组件
扫一扫
513
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
