1，vue的性能优化
1· 代码模块化，将重复率高的抽离出单独的组件，复用性更强，
2·css也可以通过less.sass自定义变量减少重复代码
3· for循环设置key值，可以更快的定位到diff
4· vue路由设置成懒加载，当首屏渲染的时候，能够加快渲染速度
5· 使用keep-alive对组件进行缓存，从而节省性能
6· 修改vue.config.js中的配置项，把productionSourceMap设置为false，避免生成不必要的map文件，开启压缩后使体积更小
7·在index.html中使用cdn的方式加载资源，避免引入不需要的多余的组件或组件库
8· 减少图片的使用或压缩体积，通过优化图片提高加载速度，也可以利用css3的动态效果代替图片效果
2，vue,route和router区别
router 是router 构造方法（new VueRouter()）的实例，是一个全局对象，通过Vue.use(VueRouter)得到的一个router对象，用来配置路由列表，包含所有路由以及关键性的对象和属性；
route是一个跳转路由对象，属于局部对象，可以获取对应的name、path、params、querty等
3，什么是闭包
闭包是在另一个函数（称为父函数）中定义的函数，并且可以访问在父函数作用域中声明和定义的变量。
闭包可以访问三个作用域中的变量：
- 在自己作用域中声明的变量；
- 在父函数中声明的变量；
- 在全局作用域中声明的变量；
4，js事件队列
JavaScript语言的一大特点就是单线程
宏任务：script全部代码、setTimeout、setInterval
微任务：Promise中then的回调函数、Process.nextTick
Promise是宏任务(同步执行)，但Promise 的回调函数属于异步任务，会在同步任务之后执行(比如说 then、 catch 、finally)。微任务的执行时间一定早于正常任务。
5，js本地存储的方式和区别
三种存储方式：cookie、sessionStorage、localStorage
1.cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
2.存储大小限制也不同，
cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
3.数据有效期不同，
sessionStorage：仅在当前浏览器窗口关闭前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存；cookie在设置的cookie过期时间之前一直有效。
6，登录鉴权
1. 用户名+密码 登录请求
2. 后台接收登录请求，生成ToKen（用户名/密码正确） 返回token
3. 请求其他api 都带上token，后台校验token是否存在/过期
7，在日常开发过程中有没有对vue路由做过封装
一般在项目中的router.js里面配置，引入vue, vue-router
1、 import Vue from 'vue'
2、import VueRouter from "vue-router"
3、Vue.use(VueRouter)
4、extend default new Router({
routes: [{
path:'/', name:'home',
component:Home,
redirect:'/index',
children:[]
}] // routes管理路由列表
})
5、需要在main.js中加载，import router.js文件，
6、然后把router实例放在new Vue中，
new Vue({
router,
render: h => h(App)
}).$mount('#app')
题目
1.Vue双向数据绑定原理
采用“数据劫持”结合“发布者-订阅者”模式的方式，通过“Object.defineProperty()”方法来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
2.Vue2与Vue3区别 ？对数据劫持的处理上
1、vue2 和vue3双向数据绑定原理不同
vue2的数据绑定是利用Object.definePropet（）对数据进行劫持 结合 发布订阅模式实现
vue3利用Proxy API对数据代理实现
2、 两者的区别：
defineProperty只能监听某个属性，ProxyAPI可以进行全局监听
proxy可以监听数组，不用单独对数组进行异性操作，可以检测到数组内部的变化
proxy可以直接绑定整个对象，省去for in 闭包等内容来提升效率
3．计算属性computed与watch 的区别
watch是监视属性，用来监视vue实例对象上属性和方法的变化
computed是计算属性，可以将data对象中的属性进行计算得到新的属性
computed有缓存功能，不能异步的返回结果，而watch函数监听的值发生改变则会重新执行
4.Vue的V-Model如何实现
v-model就是vue的双向绑定指令，主要实现了两个功能，view层输入值影响data的属性值，data属性值发生改变会更新view层数值变化
1.input 输入值后更新data
2.data属性赋值后更新input值
5.Vue的Data方法管理一个函数而非方法？
组件实例对象data必须为函数，目的是为了防止多个组件实例对象之间公用一个data，产生数据污染。
根实例对象data可以是对象也可以是函数（因为根实例是单例），不会产生数据的污染
6.节流防抖实现原理是什么？节流与防抖的区别是什么？
防抖和节流的原理：都使用到了闭包的概念:闭包的好处是里面的变量只会在闭包中使用,外部的函数是不能使用也不会修改这个变量,就不会受到外部的污染
防抖和节流本质是不一样的。
防抖是将多次执行变为最后一次执行；每次触发时都会取消之前的延时调用
节流是将多次执行变成每隔一段时间执行，每次触发事件时都会判断是否等待执行的延时函数；区别:降低回调执行频率,节省计算资源。
7.vue的生命周期？created与mounted区别？
初始化阶段：beforeCreate(){} -- create(){} -- beforeMount(){} -- mounted(){}
运行阶段： beforeUpdate(){} -- update(){}
销毁阶段： beforeDestroy(){} -- destroyed(){}
created在模板渲染成html前调用，mounted在模板渲染成html（页面初始化）后调用
8.Vue组件之间的通信有哪些？
第一种方式:props 这种通信方式适用于父向子组件传递数据
第二种方式:$emit和$on 这种方式适合于任意组件件通信
第三种方式:$ref 通过引用的方式获取子节点，常用于父组件中调用子组件的方法或者获取子组件的属性。
第四种方式:slot插槽传值
第五种方法:Vuex 全局事件总线 这种方法也可以实现任意组件间通信
第六种方法:localStorage/sessionStorage本地存储
1、vue的框架组成部分？ 提供了什么？ 怎么实现？
组成部分：template 搭建html页面框架结构
<script> export default... 行为 js方法 数据处理
style 页面布局样式
2、vue怎么pass template的？
template的作用是模板占位符，可帮助开发者包裹元素，可创建组件模板内容，但在循环过程当中，template不会被渲染到页面上。
new Vue 初始化数据后，$mount 将 render、template 或 el 转为 render 函数;
render方法通过调用vm.createElement方法创建虚拟DOM节点
调用patch方法渲染成真实的DOM
3、promise all 实现思路？
promise.all接受一个由promise数组作为参数，并且返回一个promise实例
promise.all([a,b,c...]).then方法返回的结果是一个数组，返回的数组是参数中依次执行的返回值，参数中的promise有一个失败则全部失败
4、vue 写 key 的原因？
key作为结构中的标识 是具有唯一性的，可以快速的找到新节点对应的旧节点，方便数据渲染时对新旧数据做比较，可以提高性能。
5、vue中使用了哪些设计模式？
1、工厂模式，传入参数即可创建实例
虚拟DOM根据参数的不同，返回基础标签的vnode 和组件vnode
2、单例模式，即整个程序有且仅有一个实例
vuex和vue-router的插件注册方法install 判断如果系统存在实例就直接返回掉
3、发布-订阅模式（vue事件机制）
4、观察者模式（响应式数据原理）
5、装饰器模式（装饰器用法：@+函数名）
6、策略模式：指对象在不同场景中有不同的实现方案
1、数据类型的判断方式有哪些？
typeof () --- 用于判断变量的基本数据类型，在判断Array Function引用类型时会被判断为object，有局限性
instanceof () --- 用于判断对象，对于number,string, boolean这三种类型只能通过构造函数定义，null和undefined都返回false
constructor构造函数 --- 对于object对象，直接调用object.prototype.toString()就能返回[object object]；对于其他对象，则需要call,apply,来调用才能返回正确类型
2、arguments是数组吗？
不是，Arguments是个类似数组但不是数组的 对象，说他类似数组是因为其具备数组相同的访问性质及方式；
可以通过arguments[n]来访问对应的单个参数的值，并拥有数组长度属性length；
arguments对象存储的是实际 传递给函数的参数，而不局限于函数声明所定义的参数列表，而且不能显式创建 arguments 对象
3、vue路由懒加载的方法？
1.通过异步组件懒加载；
{
path: '/home',
name: 'home',
component: resolve => require(['@/components/home'],resolve)
}2.使用import方法懒加载；
const Home = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home')3.使用webpack中的require.ensure()函数实现路由懒加载；
{
path: '/home',
name: 'home',
component: r => require.ensure([], () => r(require('@/components/home')), 'demo')
}4、Promise.all 与 Promise.race 不同？
Promise.all(iterable) 方法 --- 适用于调用多个接口并全部调用成功后再显示页面。
1、接收一个promise的iterable类型（注：Array，Map，Set都属于ES6的iterable类型）的输入，并且只返回一个Promise实例。
2、Promise会等待所有子Promise状态改变，并返回全部值的数组。
3、如果有任何一个失败，该Promise失败，返回值是第一个失败的子Promise的结果。
Promise.race(iterable) 方法返回一个 promise，一旦迭代器中的某个promise解决或拒绝，返回的 promise就会解决或拒绝
195
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
