GZZ__z的博客

1.什么是路由懒加载？整个网页默认是刚打开就去加载所有页面，路由懒加载就是只加载你当前点击的那个模块。按需去加载路由对应的资源，提高首屏加载速度（tip:首页不用设置懒加载，而且一个页面加载过后再次访问不会重复加载）。实现原理：将路由相关的组件，不再直接导入了，而是改写成异步组件的写法，只有当函数被调用的时候，才去加载对应的组件内容。2.传统路由配置：import Vue from 'vue'import VueRouter from 'vue-router'import Logi

1.认识环境变量---端口配置首先要知道端口配置是在哪里配置的？在vue.config.js中配置的，vue.config.js 就是vue项目相关的编译，配置，打包，启动服务相关的配置文件，它的核心在于webpack,相当于改良版的webpack如图，是开发环境服务端口的位置:我们看到上面的 process.env.port实际上是一个nodejs服务下的环境变量，该变量在哪里设置呢？在项目下, 我们发现了.env.development和.env.production两个文件.

1.首先得知道什么是mock数据呢？mock：假的前端程序员提到的mock数据的含义是：真的假数据 真的：符合接口规范要求的。 假数据：数据是人为创建出来的，不是真正的业务数据。 2.那mock的使用场景是什么呢？后端接口的开发速度跟不上前端的进度， 而前端要实现业务还必须依赖数据，前端为了保证开发进度就需要自己mock数据 ，保证业务能正常开发3.mock一般是如何实现的呢？本地启mock服务器：自己用express写接口 本地用专门的mock服务2 线上的m

axios基于promise用于浏览器和node.js的http客户端支持浏览器和node.js支持promise能拦截请求和响应自动转换JSON数据能转换请求和响应数据axios的拦截器原理如下：axios作为网络请求的第三方工具, 可以进行请求和响应的拦截axios 全局配置：# 配置公共的请求头 axios.defaults.baseURL = 'https://api.example.com';# 配置 超时时间axios.defaults..

学习网站国图公共开课：中国国家图书馆推出的一个高质量免费在线学习网站oeasy：视频教程网站医学微视:以视频的方式分享各种医学知识世卫组织:权威靠谱的医学知识、医学数据、医学资料和医学资源的综合学习网站大学资源网:完全免费并且功能非常强大的学习网站中国数字科技馆:国家级公益性科普服务平台优优教程网:设计软件学习网站Esltower:是一个完全免费的高质量英语学习网站WikiHow:综合技能聚合网站壹课堂:在线视频教程网站Ehow:生活技巧教程分享网站语文迷:语文知识综合学习网站 ...

定义：Vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时 发布消息给订阅者，触发相应的监听回调。具体步骤：一、我们为每个vue属性用Object.defineProperty()实现数据劫持，为每个属性分配一个订阅者集合的管理数组dep；二、在编译的时候在该属性的数组dep中添加订阅者，v-model会添加一个订阅者，{{}}也会，v-bind也会，只要用到该属性的指令理论上

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载 Dom→渲染、更新→渲染、卸载等一系列过程，我们称这 是 Vue 的生命周期。一、开始创建、初始化数据、编译模板beforeCreate 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配 置之前被调用。created 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观 测 (data observer)， 属性和方法的运算，watch/ev

出现跨域的主要原因就是发送ajax请求返回数据时受到浏览器的同源策略的限制。我所知道的解决跨域的方案有四种：第一种解决方案: 使用 Vue-cli 脚手架搭建项目时在项目中创建vue.config.js文件。vue2中使用proxy配置；vue3中使用proxyTable配置。第二种解决方案：反向代理因为客户端请求服务端的数据是存在跨域问题的，而服务器和服务器之间可以相互请求数据，是没有跨域的概念（如果服务器没有设置禁止跨域的权限问题），也就是说，可以配置一个代理的服务器可以请求另一个服.

我在vue踩过的坑：第一个就是路由变化但页面数据却没刷新，是因为依赖路由的params参数写在created生命周期里了，相同路由二次甚至多次加载的关系，没有达到监听，退出页面再进入另一个页面并不会运行created钩子函数，所以数据还是第一次进入的数据并没有更新，可以用watch监听路由是否发生变化或者用watch监听是从什么路由跳转过来的第二个就是给对象添加属性的时候，直接通过给 data 里面的对象添加属性 然后赋值，新添加的属性并不是响应式的，可以通过 Vue.set(对象，属性，值)这

我在vue中使用插件分为三步：第一步先用import引入vue1.import Vue from ‘vue’ 第二步引入要使用的组件名2.import 组件 from ‘组件包名’ 第三步通过vue.use()调用3.Vue.use(组件)

Vue实现动画有两种方法：第一种：把要做动画的元素添加到transition标签中，其中name可以定义前缀，然后在style里添加动画样式第二种：用animate.css第三方库来实现动画，第一步引入库，第二步在transition里写入动画对应的类，animated可以在下边写：duration定义事件，离开时间，进入时间。这样就可以不用在样式里边写入内容...

我一般会从三个层面优化vue项目：第一个代码层面的优化：1.对于图片过多的页面，为了加快页面加载速度，在项目中使用 Vue 的 vue-lazyload 插件2.对于路由过多，加载的资源过多的情况下，就把不同路由对应的组件分割成不同的代码块，使用路由懒加载3.还可以利用keep-alive将不活动的组件缓存起来。在组件切换过程中将状态保留在内存中，防止重复渲染dom，减少加载时间及性能消耗第二个从webpack层面的优化：1.在请求较大的图片资源的时候，加载会很慢，这时候我们可以用.

vue-router默认hash模式，在路由加载的时候，项目中的url会自带#，使用URL的hash来模拟一个完整的URL，于是当URL改变时，页面不会重新加载。如果不想要这种默认带#的hash模式，可以用路由的history模式，这种模式充分的利用history.pushState API来完成URL跳转而无需重新加载页面。注意：当我们启用 history 模式的时候，由于我们的项目是一个单页面应用，所以在路由跳转的时候，就会出现访问不到静态资源而出现 404 的情况，这时候就需要服务端增加...

在组件中将comments选项设置为true<template comments> ...</template>comments 类型：boolean 默认值：false 限制：这个选项只在完整构建版本中的浏览器内编译时可用。 详细： 当设为true时，将会保留且渲染模板中的 HTML 注释。默认行为是舍弃它们。 类型：boolean 默认值：false 限制：这个选项只在完整...

详细步骤：整体逻辑分为三个部分：解析器(parse) - 将模板字符串转换成element ASTs优化器(optimize) - 对AST进行静态节点标记，主要用来做虚拟DOM的渲染优化代码生成器(generate) - 使用element ASTs生成render函数代码字符串总结：首先通过parse将template解析成AST,其次optimize对解析出来的AST进行标记，最后generate将优化后的AST转换成可执行的代码（AST(abstract syn...

在Vue中，我们可以使用v-if和v-show来控制元素或模板的渲染，而v-if和v-show也属于Vue的内部常用的指令（条件渲染）。v-if和v-show都是通过判断绑定数据的true\false来展示的一，Vue中“v-if”和“v-sh”的主要区别是：1、“v-show”只编译一次；而“v-if”不停地销毁和创建2、“v-if”更适合于带有权限的操作，渲染时判断权限数据3、v-show更适合于日常使用，可以减少数据的渲染，减少不必要的操作二，本质的区别：vue-sho.

一，vue常用指令1.v-if ：v-if 后面的是一个表达式或者也可以是返回true或false的表达式。 且值为true和fasle false的话就会被注释 v-show是给一个display：none的属性 让它不显示！ true就正常显示2.v-else：必须和v-if一起用才可以 不能单独用 而且必须在v-if下面 中间有别的标签也会报错3.v-else-if：这个比较简单，直接看代码<div id="app"> <p>输入的

如果将props定义为数组，有如下几个缺点：1.无法进行数据类型的限制2.无法对数据进行自定义的校验解决：将props定义为对象对象类型：通过对象的方式定义props成员，可以为每个prop成员制定规则(类型，校验...),常用的如下 ：一，单一类型限制：通过type属性限制类型类型要指定为构造函数类型，不要加引号，常见类型有：String | Number | Boolean | Array | Object | Function props: { id:.

背景：为了达成`不同的帐号登陆系统后能看到不同的页面，能执行不同的功能`的目标，我们有很多种解决方案，**RBAC**(Role-Based Access control)权限模型 ，也就是基于角色的权限分配解决方案目标：不同账号登录系统后看到不同的页面, 能执行不同的功能一，权限设置权限:在一个系统内是否具有做某个操作的权利权限分为两个级别：1. 菜单权限:是否有权限访问某个菜单2.按钮权限:是否有权限操作 页面上的某个按钮功能二，业务逻辑对于权限数据来说,有两个级别的设置：1....

前提：如果后端给到我们前端的是一个数字类型的状态码(1, 2)，那我们就要对后端给的状态码做一些格式化处理，每一个状态码都会有对应的中文说明。我们通过枚举的方式转换成文字1.找到枚举数据存放的文件夹，在组件中导入使用（1:正式，2：非正式）2.用find从hireType中 通过id找到对应的元素的value format(typeNum) { console.log(typeNum) // typeNum:1(id) const it = Emplo..

1.forEach配合includes创建新数组，然后循环旧数组，用includes 判断每次forEach循环的元素是否存在于新数组中，如果没有就把当前元素添加到新数组中代码： var arr = [1,2,2,3,4,4,5,4] newArr=[] arr.forEach((item)=>{ newArr.includes(item) ? '' : newArr.push(item) }) ..

vue中的slot主要分三种 ：匿名插槽，具名插槽，作用域插槽一，匿名插槽：语法：<slot></slot>1.没有为插槽指定名称2.通过slot标签可以添加匿名插槽3.在使用组件的时候，组件中的内容会填充到所有匿名插槽的位置，所以在封装组件的时候，匿名插槽一般只有一个4.匿名插槽可以设置默认的内容，如果没有传入内容就使用默认内容，如果传入了，就会进行覆盖二，具名插槽语法：<slot name="名称"></slot>.

1.HTTP（HyperText Transfer Protocol：超文本传输协议）是一种用于分布式、协作式和超媒体信息系统的应用层协议。 简单来说就是一种发布和接收 HTML 页面的方法，被用于在 Web 浏览器和网站服务器之间传递信息。1.1 HTTP 默认工作在 TCP 协议 80 端口，用户访问网站http://打头的都是标准 HTTP 服务1.2 注意：HTTP 协议以明文方式发送内容，不提供任何方式的数据加密，如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其..

一，Token失效的主动介入开门的钥匙不是一直有效的，如果一直有效，会有安全风险，所以我们尝试在客户端进行一下token的时间检查具体业务图如下：二，Token失效的被动处理token作为用户的关键令牌信息不是长久有效的，一般都会有一个失效时间(由后端来决定什么时长后失效)，如果超过失效时间，当前token就不能再作为用户标识请求数据了，这时候我们需要做一些额外的失效处理具体业务图如下：...

一，侦听器基本概念：可以侦听指定名称的属性值的变化，当属性值变化的时候自动的触发侦听器，进行相应的业务处理二，简单侦听:(直接侦听常规属性值的变化)1.函数名称必须和属性名称完全一致2.不能人为调用3.没有返回值，如果你想使用处理结果，必须将结果赋值给data中的成员，再进行使用4.watch是一个单独的选项语法：watch:{ 属性名称(新值，旧值){ }}三，深度侦听：1.deep（深度侦听）：默认情况下，侦听器无法侦听对象的属性值的变化，如.

1.主页面布局：2.页面图解: