1，如何实现vue的路由填坑记录懒加载，有几种写法
在vue中组件懒加载又称为代码分割，也叫延迟加载，即在需要的时候进行加载，随用随载。
不用懒加载的话，webpack打包后的文件会异常过大，造成进入首页时候，需要加载的内容过多，时间长。会出现长时间的白屏，即使做了loading也不利于用户体验
概念： 把不同的路由对应的不同的组件分割成不同的代码块，当路由访问的时候，再去做加载对应的组件，这是利用vue异步组件和webpack的代码分割
三种方式：
1：vue异步组件
. vue异步组件技术 ==== 异步加载 vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 . 但是,这种情况下一个组件生成一个js文件
{
path:'/home',
name:'home',
component:resolve=>require(['@/componets/home'],resolve)
}
2：es提案的import()
组件懒加载方案二 路由懒加载(使用import)
// 下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。
/* const Home = () => import('@/components/home')
const Index = () => import('@/components/index')
const About = () => import('@/components/about') */
// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。 把组件按组分块
const Home = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home')
const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index')
const About = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/about')
3:webpack的require.ensure()----推荐写法，官方推荐按模块划分
webpack提供的require.ensure() vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。 这种情况下，多个路由指定相 同的chunkName，会合并打包成一个js文件。
{
path: '/home',
name: 'home',
component: r => require.ensure([], () => r(require('@/components/home')), 'demo')
}, {
path: '/index',
name: 'Index',
component: r => require.ensure([], () => r(require('@/components/index')), 'demo')
}, {
path: '/about',
name: 'about',
component: r => require.ensure([], () => r(require('@/components/about')), 'demo-01')
}2，vuex的执行流程
vuex全局状态管理-存储状态是响应的
主要有以下几个部分
1：state ---存放状态 --$store.state.show
2:mutations ---操作state赋值 --$store.commit('switch_dialog')"
3:getter --派生状态 。可以进行状态的过滤--this.$store.getters.leftNavState
4:acions --通过操作mutation改变状态，也可以异步操作 --this.$store.dispatch('changeLeftNavState', true)
5:modules -分块容器，让代码结构清晰 -- $store.state.dialog.show
import dialog_store from '../components/dialog_store.js';//引入某个store对象
export default new vuex.Store({
modules: {
dialog: dialog_store
}
})
import {mapActions, mapState,mapGetters} from 'vuex' //注册 action 和 state
computed: {
//在这里映射 store.state.count，使用方法和 computed 里的其他属性一样
...mapState([
'count'
]),
count () {
return store.state.count
}
},
created() {
this.incrementStep();
},
methods: {
//在这里引入 action 里的方法，使用方法和 methods 里的其他方法一样
...mapActions([
'incrementStep'
]),
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapGetters([
'someLists'
// ...
])
}
3，首屏白屏的解决方案
1.骨架屏
2.服务端渲染
早起页面是在后端将html拼接之后返回给浏览器的，浏览器拿到页面之后就可以直接解析显示了，这就是服务器端渲染
现在前后端分离之后和ajax的兴起，就是后端不提供完整的页面，而是直接返回的数据，浏览器拿到数据之后进行html页面的拼接， 然后显示在浏览器上，这就是客户端渲染
优势：
首屏加载快，有利于seo优化
劣势：
线上排错不方便，不像ajax能方便的通过控制台显示观察，必须后台进行线上日志排查
前端渲染的话通过代码分割懒加载的模式
4，vue中transition的使用
单元素或者组件的过度
：条件（v-if）v-show 动态组件 组件的根节点
css过度
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
transform: translateX(10px);
opacity: 0;
}
css 动画
.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}5，node.jS中mvc模式
Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写
事件驱动用户操作view层触发事件--通过controller,调动model层获取数据--之后进行view视图层的更新
优点：
耦合性低
生命周期短
可维护性高
重用性高
6，vue的mvvm模式
和mvc最大的区别就是实现了view和model的自动同步，也就是当数据model改变时，我们不在手动的操作dom.来改变view的显示
也就是实现双向数据绑定
底层实现是：Object.defineProperty().定义属性描述符调用get和set方法实现数据的绑定---数据劫持和数据代理--订阅者发布者模式
博客文章：https://blog.csdn.net/dkr380205984/article/details/82426722
7，vue自定义指令的创建和使用
vue内置指令
v-bind：响应并更新DOM特性；例如：v-bind:href v-bind:class v-bind:title v-bind:bb
v-on：用于监听DOM事件； 例如：v-on:click v-on:keyup
v-model：数据双向绑定；用于表单输入等；例如：<input v-model="message">
v-show：条件渲染指令，为DOM设置css的style属性
v-if：条件渲染指令，动态在DOM内添加或删除DOM元素
v-else：条件渲染指令，必须跟v-if成对使用
v-for：循环指令；例如：<li v-for="(item,index) in todos"></li>
v-else-if：判断多层条件，必须跟v-if成对使用；
v-text：更新元素的textContent；例如：<span v-text="msg"></span> 等同于 <span>{{msg}}</span>；
v-html：更新元素的innerHTML；
v-cloak：不需要表达式，这个指令保持在元素上直到关联实例结束编译；-解决vue变量加载闪烁的问题
[v-cloak] {
display:none !important;}
v-once：不需要表达式，只渲染元素或组件一次，随后的渲染，组件/元素以及下面的子元素都当成静态页面不在渲染。
vue有自己的内置指令
自定义指令分为：分为全局指令和组件内部指令
全局指令：
Vue.directive("test",function(el){ /* el就是页面的dom */
el.style.color = "red";
});
<p v-test-orange="{'color':'orange'}">测试：橘色</p>
Vue.directive("test-orange",function(el,args){ /*传过来的json格式参数，存在参数 args.value 中*/
el.style.color = args.value.color;
});
局部指令
data:{
},
directives:{ /* 在new Vue内部，可以使用 directives定义多个指令，和前面直接通过 Vue.dirctive一样的写法。 */
"test-orange":function(el,args){ /*传过来的json格式参数，存在 args.value中*/
el.style.color = args.value.color;
},
"test-other":function(){
}
}
自定义指令的钩子函数
bind ---调用一次，可以进行一次化的初始化设置
update --所在组件的虚拟节点更新时进行调用
inserted --指定绑定元素插入父节点时调用
componentUpdated --指令在的组件和子组件全部更新之后调用
unbind --调用一次，指令和元素解绑的时候调用
钩子函数的参数--有el
注册全局指令9：vue中的路由模式
hash模式:vue-router默认使用的是hash模式。即url中带有#
history模式：url中的#被去掉了
hash的工作原理是hashChange事件。可以在window中监听路由的变化
window.hashchange = function(event){
console.log(event)
}
history模式： --怕进行刷新需要后端进行配置，返回index.html文件覆盖所有路由
有三个方法go,back forward 对应的跳转，后退，前进
修改历史状态有两个方法：pushState replaceState--接受三个参数（obj.title.url）
10：vue中的keep-alive
kep-alive是vue的内置组件，能在组件切换的过程中将状态保留在内存中，防止重复的dom渲染
可以在router中直接配置
常见用法：
<keep-alive>
<component>
<!-- 该组件将被缓存！ -->
</component>
</keep-alive>
11.js中call apply bind的区别
共同之处：都是指定this,改变函数运行时的上下文
apply： 接受参数是类数组或者数组对象，并将函数执行
call:接受参数是参数列表，并执行函数
bind:不进行函数调用，而是返回一个新的函数
12.执行环境上下文和变量提升和作用域
1：代码分类：全局代码和局部代码
2：
13.this指向和变量提升
总结基本6中常见的情况
1：作为普通函数调用 --this指向window
2：作为方法调用 --指向调用对象
3：作为构造函数调用
function Person(name){
this.name=name;
}
var personA=Person("xl");
console.log(personA.name); // 输出 undefined
console.log(window.name);//输出 xl
//上面代码没有进行new操作，相当于window对象调用Person("xl")方法，那么this指向window对象，并进行赋值操作 window.name="xl".
var personB=new Person("xl");
console.log(personB.name);// 输出 xl
//这部分代码的解释见下
4：使用call apply方法调用
5：bind
6：箭头函数调动
函数内部的this固定指向，始终指向外部的对象，因为箭头函数没有this,因此不能进行new实例化.同时也不能使用call apply bind
1： 示例--作为普通函数调用
function person(){
this.name="xl";
console.log(this);
console.log(this.name);
}
person(); //输出 window xl
实例对象new操作符--几个过程
1：创建一个对象
2：改变this的指向
3：实现原型链关系
4：将对象返回
14.微任务和宏任务
还没有及时补充（自行百度，常见的考题是promise 的执行流程和输出打印）
15.模拟promise,及打印顺序
then确实会返回一个promise，但是如果不手动return Promise，那么默认返回的promise状态就是resolved，值看你return的是啥了，不写return的话，值是undefined，return非promise，那么值就是这个非promise。而手动return Promise，那返回的promise状态就不一定是resolved了，因此就可以改变下一个then/catch调用的结果了。
16.dom0和dom2事件
老生长谈的问题，自行查阅资料
17.数组的方法
map --结果作为一个新的数组返回，并不改变之前的数组
forEach --循环没有返回值，直接改变之前的数组
filter --返回新数组，根据函数逻辑
every --将元素判断返回一个布尔值
some --和every有共通之处，部分判断，一个满足即可
concat --数组拼接
toString --数组转为字符串
join --返回字符串和toSting 的区别是可以设置元素之间的间隔
splice --（开始位置，删除元素的个数，元素）--万能方法可以实现增删改
18.数组的几种排序
1：冒泡排序
function sortA(array){
for(i=0;i<array.length-1; i++){
for(j=i+1; j<length;j++){
var bus = array[i]
if(bus> array[j]){
var min = array[j]
array[j] = bus
array[i] = min
}
}
}
return array
}
2.sort排序
var arr = [1,3,2,5]
arr.sort(function(a,b){
if(a<b){
return -1
} else if(a>b){
return 1
} else {
return 0
}
})
console.log(arr)
19.vue的修饰符
v-model修饰符
v-model.trim --自动过滤掉前后的空白字符
v-model.number --数字输入的时候，属性值将会实时的更新成number类型的值，输入其他非数字的字符的时候，属性值将不再变 化
v-on修饰符
@click.stop --阻止事件冒泡
@click.prevent --阻止事件的默认行为
@click.self --当事件是从事件绑定的元素本身触发时才触发回调
@click.one --绑定的事件只会被触发一次
键值修饰符
@keyup.enter
@keyup.keyCode --键值监听
20. 兄弟组件之间的传值
通过一个概念叫做中央时间总线
1：创建一个事件总线eventBus,作为通讯的桥梁
2：在需要传值的组件中this.$emit() --触发自定义事件
3：在需要接受的组件中this.$on() --监听自定义事件，并在回调中获取传过来的参数
具体实现：
1:在外部建立一个js文件bus.js
2:两个组件都被一个父组件引用
3：bus.$emit('send', 'string') --触发自定义事件
4：接受事件在created中bus.$on('send',function(data){
console.log(data)
}) --接受自定义事件
21.自适应布局
1:两栏布局：float+margin
左边定宽200px float：left
右边：margin-left:200px;
2:position + margin
父元素position:relative
左边：position： absolute 定宽200px
右边：position: margin-left:200px;22.flex布局
网上经典的案例-阮一峰的 色子 示例 ---自行百度
23.浏览器的弱缓存和强缓存
浏览器第一次请求资源时，必须下载所有的资源，然后根据响应的header内容来决定，如何缓存资源。可能采用的是强缓存，也可能是弱缓存
强缓存阶段：先在本地查找该资源，如果发现该资源，并且其他限制也没有问题(比如:缓存有效时间)，就命中强缓存，返回200，直接使用强缓存，并且不会发送请求到服务器
弱缓存阶段：在本地缓存中找到该资源，发送一个http请求到服务器，服务器判断这个资源没有被改动过，则返回304，让浏览器使用该资源。
缓存失败阶段(重新请求)：当服务器发现该资源被修改过，或者在本地没有找到该缓存资源，服务器则返回该资源的数据。
强弱缓存的区别
1：都是从缓存中获取资源
2：强缓存返回200，弱缓存返回304
3：强缓存不发送请求，弱缓存需要发送请求验证本地资源和远程是否一致
4：强缓存是利用expires让原始服务器为文件设置一个过期时间，在多长时间内文件被视为最新的文件
24.构造函数实例对象的实质
构造函数创建对象的额过程
1：创建一个空对象
2：构造函数中的this指向新的对象
3：设置原型链和继承关系
4：返回新的对象
25.防抖节流
防抖的概念：在事件被触发n秒之后进行回调，但是如果n秒之内继续触发的话重新开始计算，典型的就是搜索输入完毕n秒之后进行请求
节流的概念：在n秒之内只触发一次函数
26.css中的常用效果纪要
在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理
一.旋转 rotate
二.缩放 scale
三.倾斜 skew
四.移动 translate
五.基准点 transform-origin
六.多方法组合变形
用法：transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px);
transition过渡
27.vue中权限控制
实际项目中前端控制不可缺少
1：提高用户体验
2：
尚未完善总结0有时间进行补充
28.http请求的过程
1：域名解析
2：三次握手
3：建立连接，发起http请求
4：响应请求，浏览器得到html代码
5：解析代码，并请求代码中的请求
6：浏览器对页面进行渲染，呈现给用户
29：浏览器加载的过程 --暂未晚上
30：几种清除浮动的常用的方法
1：父级div定义伪类：after和zoom
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
.clearfix:after{
dispaly: block;
height:0;
overflow:hidden;
clear:both;
content:'';
}
2:额外标签法：在最后一个浮动标签后，添加一个标签，给其设置clear:both ---不推荐使用（添加没有意义的标签，没有语义化）
3：通过触发bfc的方式，实现清除浮动（overflow:hidden） ---不推荐使用（溢出元素被隐藏掉）
31:元素居中的几种方式
1：绝对定位加偏移 position: absolute,translate
2:绝对定位加margin
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
3:flex实现居中
父元素：
dispaly:flex;
justify-content:center;
align-items:center;
4: 使用table-cell进行居中
父元素：
display:table-cell;
vertical-align:middle;
子元素：
margin:0 auto;
32.js中toString()和toLocalString()区别
toString() ---返回的是字符换
toLocalString() --返回的是字符串，和地区对应
---------------------------
