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() --返回的是字符串,和地区对应
---------------------------