后海 0_o
后海 0_o

Vue2 面试题

认识自己的无知 愚昧，接纳自己，然后一点点改变


一、Vue 是什么？

Vue2 面试题_第1张图片

1. Web 发展历史

⑴. 静态页

最早的网页是没有数据库的，可以理解成就是一张可以在网络上浏览的报纸，直到CGI技术的出现通过 CGI Perl 运行一小段代码与数据库或文件系统进行交互

Vue2 面试题_第2张图片

⑵. 服务端渲染

ASP，JSP大家应该都不会太陌生，最早出现于 2005 年左右，先后出现了微软的 ASP 和 Java Server Pages [JSP] 等技术,取代了 CGI ，增强了 WEB 与服务端的交互的安全性，类似于下面这样，其实就是Java + HTML

<%@
	page
	language="java"
	contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%> 
	<!DOCTYPE html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>JSP demo</title>
			</head>
			<body>
				<img src="http://localhost:8080/web05_session/1.jpg" width=200 height=100 />
			</body>
		</html>

⑶. 前端框架的出现

随着移动设备的普及，Jquery的出现，以及SPA（Single Page Application 单页面应用）的雏形，Backbone EmberJS AngularJS 这样一批前端框架随之出现，但当时SPA的路不好走，例如SEO问题，SPA 过多的页面、复杂场景下 View 的绑定等，都没有很好的处理经过这几年的飞速发展，节约了开发人员大量的精力、降低了开发者和开发过程的门槛，极大提升了开发效率和迭代速度


⑷. 前端的百家争鸣

Vue2 面试题_第3张图片

2. Vue 是什么？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
——这里引用了 Vue 的官方文档介绍


3. Vue 核心特性

⑴. 数据驱动（MVVM)

Vue2 面试题_第4张图片

  • Model：模型层，负责处理业务逻辑以及和服务器端进行交互
  • View：视图层：负责将数据模型转化为UI展示出来，可以简单的理解为HTML页面
  • ViewModel：视图模型层，用来连接Model和View，是Model和View之间的通信桥梁

⑵. 组件化
  • 在Vue中每一个.vue文件都可以视为一个组件
  • 优势：降低整个系统的耦合度；便于调试；高维护性

⑶. 指令系统

指令 (Directives) 是带有 v- 前缀的特殊属性；
作用：将其产生的连带影响，响应式地作用于 DOM
常用的指令：条件渲染指令 v-if、列表渲染指令v-for、属性绑定指令v-bind、事件绑定指令v-on、双向数据绑定指令v-model


4. Vue 跟传统开发（Jquery）的区别

  • Vue所有的界面事件，都是只去操作数据（MVVM），Jquery操作DOM
  • Vue所有界面的变动，都是根据数据自动绑定出来的，Jquery操作DOM

5. Vue 和React对比

待扩展

⑴. 相同点
  • 都有组件化思想
  • 都支持服务器端渲染
  • 都有Virtual DOM（虚拟dom）
  • 数据驱动视图
  • 都有支持native的方案：Vue的weex、React的React native
  • 都有自己的构建工具：Vue的vue-cli、React的Create React App

⑵. 不同点
  • 数据流向的不同。react从诞生开始就推崇单向数据流，而Vue是双向数据流
  • 数据变化的实现原理不同。react使用的是不可变数据，而Vue使用的是可变的数据
  • 组件化通信的不同。react中我们通过使用回调函数来进行通信的，而Vue中子组件向父组件传递消息有两种方式：事件和回调函数
  • diff算法不同。react主要使用diff队列保存需要更新哪些DOM，得到patch树，再统一操作批量更新DOM。Vue 使用双向指针，边对比，边更新DOM


二、SPA（single-page application）单页面应用

Vue2 面试题_第5张图片

1. 什么是 SPA？

单页应用SPA是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，这种方法避免了页面之间切换，打断用户体验在单页应用中，所有必要的代码（HTML、JavaScript和CSS）都通过单个页面的加载而检索，或者根据需要（通常是为响应用户操作）动态装载适当的资源并添加到页面页面在任何时间点都不会重新加载，也不会将控制转移到其他页面


2. SPA和MPA的区别

多页应用MPA（MultiPage-page application），翻译过来就是多页应用在MPA中，每个页面都是一个主页面，都是独立的当我们在访问另一个页面的时候，都需要重新加载html、css、js文件，公共文件则根据需求按需加载


单页面应用（SPA） 多页面应用（MPA）
组成 12341 right-aligned 文本居右
刷新方式 12341 right-aligned 文本居右
url模式 12341 right-aligned 文本居右
SEO搜索引擎优化 12341 right-aligned 文本居右
数据传递 12341 right-aligned 文本居右
页面切换 12341 right-aligned 文本居右
维护成本 12341 right-aligned 文本居右

单页应用优缺点

优点：

  • 具有桌面应用的即时性、网站的可移植性和可访问性
  • 用户体验好、快，内容的改变不需要重新加载整个页面
  • 良好的前后端分离，分工更明确

缺点：

  • 不利于搜索引擎的抓取
  • 首次渲染速度相对较慢

3. 实现一个SPA

原理：

  • 监听地址栏中hash变化驱动界面变化
  • 用pushsate记录浏览器的历史，驱动界面发送变化

Vue2 面试题_第6张图片

4. 如何给SPA做SEO

SEO优化之后会延伸，这里仅对 SPA 的 SEO 做介绍

⑴. SSR服务端渲染

将组件或页面通过服务器生成html，再返回给浏览器，如nuxt.js

⑵. 静态化

通过程序将动态页面抓取并保存为静态页面

⑶. 使用Phantomjs针对爬虫处理

通过Nginx配置，判断访问来源是否为爬虫，如果是则搜索引擎的爬虫请求会转发到一个node server，再通过PhantomJS来解析完整的HTML，返回给爬虫



三、v-show和v-if有什么区别？使用场景分别是什么？

Vue2 面试题_第7张图片

1. v-show与v-if的共同点

语法 和 作用效果（控制元素的显影）是相同的


2. v-show与v-if的区别

  • 控制手段不同
    v-show隐藏则是为该元素添加css--display:none，dom元素依旧还在。
    v-if显示隐藏是将dom元素整个添加或删除

  • 编译过程不同
    v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；
    v-show只是简单的基于css切换

  • 编译条件不同
    v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染

  • 生命周期
    v-show 由false变为true的时候不会触发组件的生命周期
    v-if由false变为true的时候，触发组件的beforeCreate、create、beforeMount、mounted钩子，由true变为false的时候触发组件的beforeDestory、destoryed方法

  • 性能消耗
    v-if有更高的切换消耗；
    v-show有更高的初始渲染消耗；


3. v-show与v-if原理分析

大致流程：

  • 将模板template转为ast结构的JS对象
  • 用ast得到的JS对象拼装render和staticRenderFns函数
  • render和staticRenderFns函数被调用后生成虚拟VNODE节点，该节点包含创建DOM节点所需信息
  • vm.patch函数通过虚拟DOM算法利用VNODE节点创建真实DOM节点

v-show：
有transition就执行transition，没有就直接设置display属性

v-if：
返回一个node节点，render函数通过表达式的值来决定是否生成DOM


4. v-show与v-if的使用场景

v-if 与 v-show 都能控制dom元素在页面的显示

v-if 相比 v-show 开销更大的（直接操作dom节点增加与删除），如果在运行时条件很少改变，则使用 v-if 较好

如果需要非常频繁地切换，则使用 v-show 较好



四、Vue实例挂载的过程

Vue2 面试题_第8张图片

new Vue()这个过程中究竟做了些什么？
过程中是如何完成数据的绑定，又是如何将数据渲染到视图的等等


结论：

  • new Vue的时候调用会调用_init方法
    定义 s e t 、 set、 set、get 、 d e l e t e 、 delete、 delete、watch 等方法
    定义 o n 、 on、 on、off、 e m i t 、 emit、 emit、off等事件
    定义 _update、 f o r c e U p d a t e 、 forceUpdate、 forceUpdate、destroy生命周期
  • 调用 mount 进行页面的挂载
  • 挂载的时候主要是通过mountComponent方法
  • 定义updateComponent更新函数
  • 执行render生成虚拟DOM
  • _update将虚拟DOM生成真实DOM结构，并且渲染到页面中


五、vue生命周期的理解？

Vue2 面试题_第9张图片

1. 生命周期是什么

Vue中实例从创建到销毁的过程就是生命周期，即指从创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程我们可以把组件比喻成工厂里面的一条流水线，每个工人（生命周期）站在各自的岗位，当任务流转到工人身边的时候，工人就开始工作；
PS：在Vue生命周期钩子会自动绑定 this 上下文到实例中，因此你可以访问数据，对 property 和方法进行运算这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())


2. 生命周期有哪些

Vue生命周期总共可以分为8个阶段：创建前后, 载入前后,更新前后,销毁前销毁后，以及一些特殊场景的生命周期

生命周期 描述 使用场景
beforeCreate 组件实例被创建之初 执行时组件实例还未创建，通常用于插件开发中执行一些初始化任务
created 组件实例已经完全创建 组件初始化完毕，各种数据可以使用，常用于异步数据获取
beforeMount 组件挂载之前 未执行渲染、更新，dom未创建
mounted 组件挂载到实例上去之后 初始化结束，dom已创建，可用于获取访问数据和dom元素
beforeUpdate 组件数据发生变化，更新之前 更新前，可用于获取更新前各种状态
updated 组件数据更新之后 更新后，所有状态已是最新
beforeDestroy 组件实例销毁之前 销毁前，可用于一些定时器或订阅的取消
destroyed 组件实例销毁之后 组件已销毁，作用同上
activated keep-alive 缓存的组件激活时 -
deactivated keep-alive 缓存的组件停用时调用 -
errorCaptured 捕获一个来自子孙组件的错误时被调用 -

3. 生命周期整体流程

Vue2 面试题_第10张图片
beforeCreate => created

  • 初始化vue实例，进行数据观测

created

  • 完成数据观测，属性与方法的运算，watch、event事件回调的配置
  • 可调用methods中的方法，访问和修改data数据触发响应式渲染dom，可通过computed和watch完成数据计算
  • 此时vm.$el 并没有被创建

created => beforeMount

  • 判断是否存在el选项，若不存在则停止编译，直到调用vm.$mount(el)才会继续编译
  • 优先级：render > template > outerHTML
  • vm.el获取到的是挂载DOM的

beforeMount

  • 在此阶段可获取到vm.el
  • 此阶段vm.el虽已完成DOM初始化，但并未挂载在el选项上

beforeMount => mounted

  • 此阶段vm.el完成挂载，vm.$el生成的DOM替换了el选项所对应的DOM

mounted

  • vm.el已完成DOM的挂载与渲染，此刻打印vm.$el，发现之前的挂载点及内容已被替换成新的DOM

beforeUpdate

  • 更新的数据必须是被渲染在模板上的（el、template、render之一）
  • 此时view层还未更新
  • 若在beforeUpdate中再次修改数据，不会再次触发更新方法

updated

  • 完成view层的更新
  • 若在updated中再次修改数据，会再次触发更新方法（beforeUpdate、updated）

beforeDestroy

  • 实例被销毁前调用，此时实例属性与方法仍可访问

destroyed

  • 完全销毁一个实例。可清理它与其它实例的连接，解绑它的全部指令及事件监听器
  • 并不能清除DOM，仅仅销毁实例

4. 数据请求在created和mouted的区别

created是在组件实例一旦创建完成的时候立刻调用，这时候页面dom节点并未生成
mounted是在页面dom节点渲染完毕之后就立刻执行，触发时机上created是比mounted要更早
两者相同点：都能拿到实例对象的属性和方法讨论这个问题本质就是触发的时机，放在mounted请求有可能导致页面闪动（页面dom结构已经生成），但如果在页面加载前完成则不会，出现此情况建议：放在created生命周期当中



六、v-if和v-for的优先级是什么？

Vue2 面试题_第11张图片

1. 作用

  • v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染
  • v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组或者对象，而 item 则是被迭代的数组元素的别名
  • 在 v-for 的时候，建议设置key值，并且保证每个key值是独一无二的，这便于diff算法进行优化

2. 优先级

  • v-for优先级比v-if高

3. 注意事项

  • 永远不要把 v-if 和 v-for 同时用在同一个元素上，带来性能方面的浪费（每次渲染都会先循环再进行条件判断）

  • 如果避免出现这种情况，则在外层嵌套template（页面渲染不生成dom节点），在这一层进行v-if判断，然后在内部进行v-for循环

    <template v-if="isShow">
    <p v-for="item in items">
</template>

  • 如果条件出现在循环内部，可通过计算属性computed提前过滤掉那些不需要显示的项

    computed: {
    items: function() {
      return this.list.filter(function (item) {
        return item.isShow
      })
    }
}


七、SPA首屏加载速度慢的怎么解决？

Vue2 面试题_第12张图片

1. 什么是首屏加载

首屏时间（First Contentful Paint），指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前视窗需要的内容


计算首屏时间

利用performance.timing提供的数据：
Vue2 面试题_第13张图片
通过DOMContentLoad或者performance来计算出首屏时间

// 方案一：
document.addEventListener('DOMContentLoaded', (event) => {
    console.log('first contentful painting');
});
// 方案二：
performance.getEntriesByName("first-contentful-paint")[0].startTime

// performance.getEntriesByName("first-contentful-paint")[0]
// 会返回一个 PerformancePaintTiming的实例，结构如下：
{
  name: "first-contentful-paint",
  entryType: "paint",
  startTime: 507.80000002123415,
  duration: 0,
};

2. 加载慢的原因

  • 网络延时问题
  • 资源文件体积是否过大
  • 资源是否重复发送请求去加载了
  • 加载脚本的时候，渲染内容堵塞了

3. 解决方案

总的来讲可以分成两大部分 ：资源加载优化 和 页面渲染优化

Vue2 面试题_第14张图片

  • 减小入口文件积
  • 静态资源本地缓存
  • UI框架按需加载
  • 图片资源的压缩
  • 组件重复打包
  • 开启GZip压缩
  • 使用SSR

⑴. 减小入口文件体积

常用的手段是路由懒加载，把不同路由对应的组件分割成不同的代码块，待路由被请求的时候会单独打包路由，使得入口文件变小，加载速度大大增加
Vue2 面试题_第15张图片

在vue-router配置路由的时候，采用动态加载路由的形式

routes:[ 
    path: 'Blogs',
    name: 'ShowBlogs',
    component: () => import('./components/ShowBlogs.vue')
]

以函数的形式加载路由，这样就可以把各自的路由文件分别打包，只有在解析给定的路由时，才会加载路由组件

⑵. 静态资源本地缓存

后端返回资源问题：

  • 采用HTTP缓存，设置Cache-Control，Last-Modified，Etag等响应头
  • 采用Service Worker离线缓存

前端合理利用localStorage

⑶. UI框架按需加载

在日常使用UI框架，例如element-UI、或者antd，我们经常性直接引用整个UI库

import ElementUI from 'element-ui'
Vue.use(ElementUI)

但实际上我用到的组件只有按钮，分页，表格，输入与警告 所以我们要按需引用

import { Button, Input, Pagination, Table, TableColumn, MessageBox } from 'element-ui';
Vue.use(Button)
Vue.use(Input)
Vue.use(Pagination)

⑷. 组件重复打包

假设A.js文件是一个常用的库，现在有多个路由使用了A.js文件，这就造成了重复下载

解决方案：在webpack的config文件中，修改CommonsChunkPlugin的配置；minChunks: 3表示会把使用3次及以上的包抽离出来，放进公共依赖文件，避免了重复加载组件

⑸. 图片资源的压缩

图片资源虽然不在编码过程中，但它却是对页面性能影响最大的因素，对于所有的图片资源，我们可以进行适当的压缩

对页面上使用到的icon，可以使用在线字体图标，或者雪碧图，将众多小图标合并到同一张图上，用以减轻http请求压力。

⑹. 开启GZip压缩

拆完包之后，我们再用gzip做一下压缩 安装compression-webpack-plugin

nmp i compression-webpack-plugin -D

在vue.congig.js中引入并修改webpack配置

const CompressionPlugin = require('compression-webpack-plugin')

configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
            config.mode = 'production'
            return {
                plugins: [new CompressionPlugin({
                    test: /\.js$|\.html$|\.css/, //匹配文件名
                    threshold: 10240, //对超过10k的数据进行压缩
                    deleteOriginalAssets: false //是否删除原文件
                })]
            }
        }

在服务器我们也要做相应的配置 如果发送请求的浏览器支持gzip，就发送给它gzip格式的文件 我的服务器是用express框架搭建的 只要安装一下compression就能使用

const compression = require('compression')
app.use(compression())  // 在其他中间件使用之前调用

⑺. 使用SSR

SSR（Server side ），也就是服务端渲染，组件或页面通过服务器生成html字符串，再发送到浏览器

从头搭建一个服务端渲染是很复杂的，vue应用建议使用Nuxt.js实现服务端渲染



八、为什么data属性是一个函数而不是一个对象？

Vue2 面试题_第16张图片

1. 实例和组件定义data的区别

vue实例的时候定义data属性既可以是一个对象，也可以是一个函数

const app = new Vue({
    el:"#app",
    // 对象格式
    data:{
        foo:"foo"
    },
    // 函数格式
    data(){
        return {
             foo:"foo"
        }
    }
})

组件中定义data属性，只能是一个函数

如果为组件data直接定义为一个对象，则会得到警告信息
在这里插入图片描述

返回的data应该是一个函数在每一个组件实例中

2. 组件data定义函数与对象的区别

  • 采用对象的形式，会导致组件 A、B共用了同一个内存地址，A修改的内容，同样对B产生了影响

  • 如果我们采用函数的形式，则不会出现这种情况（函数返回的对象内存地址并不相同）

  • vue组件可能会有很多个实例，采用函数返回一个全新data形式，使每个实例对象的数据不会受到其他实例对象数据的污染

3. 组件data定义函数与对象的区别

  • 根实例对象data可以是对象也可以是函数（根实例是单例），不会产生数据污染情况
  • 组件实例对象data必须为函数，目的是为了防止多个组件实例对象之间共用一个data，产生数据污染。采用函数的形式，initData时会将其作为工厂函数都会返回全新data对象


九、动态给vue的data添加一个新的属性时会发生什么？怎样解决？

1. 直接添加属性的问题

定义一个p标签，通过v-for指令进行遍历
然后给botton标签绑定点击事件，我们预期点击按钮时，数据新增一个属性，界面也 新增一行

<p v-for="(value,key) in item" :key="key">
    {{ value }}
</p>
<button @click="addProperty">动态添加新属性</button>

实例化一个vue实例，定义data属性和methods方法

const app = new Vue({
    el:"#app",
   	data:()=>{
       	item:{
            oldProperty:"旧属性"
        }
    },
    methods:{
        addProperty(){
            this.items.newProperty = "新属性"  // 为items添加新属性
            console.log(this.items)  // 输出带有newProperty的items
        }
    }
})

点击按钮，发现结果不及预期，数据虽然更新了（console打印出了新属性），但页面并没有更新

2. 原理分析

vue2是用过Object.defineProperty实现数据响应式
当我们访问foo属性或者设置foo值的时候都能够触发setter与getter
但是我们为obj添加新属性的时候，却无法触发事件属性的拦截
原因是一开始obj的foo属性被设成了响应式数据，而bar是后面新增的属性，并没有通过Object.defineProperty设置成响应式数据


3. 解决方案

Vue 不允许在已经创建的实例上动态添加新的响应式属性，若想实现数据与视图同步更新，可采取下面三种解决方案：

  • Vue.set()
  • Object.assign()
  • $forcecUpdated()
⑴. Vue.set()

Vue.set( target, propertyName/index, value )

参数：

  • Object | Array} target
  • {string | number} propertyName/index
  • {any} value

这里无非再次调用defineReactive方法，实现新增属性的响应式，关于defineReactive方法，内部还是通过Object.defineProperty实现属性拦截

⑵. Object.assign()

直接使用Object.assign()添加到对象的新属性不会触发更新

应创建一个新的对象，合并原对象和混入对象的属性

this.someObject = Object.assign({},this.someObject,{newProperty1:1,newProperty2:2 ...})
⑶. $forceUpdate

如果你发现你自己需要在 Vue中做一次强制更新，99.9% 的情况，是你在某个地方做错了事

$forceUpdate迫使Vue 实例重新渲染

PS：仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。


使用场景：

  • 如果为对象添加少量的新属性，可以直接采用Vue.set()
  • 如果需要为新对象添加大量的新属性，则通过Object.assign()创建新对象
  • 如果你实在不知道怎么操作时，可采取$forceUpdate()进行强制刷新 (不建议)

PS：vue3是用过proxy实现数据响应式的，直接动态添加新属性仍可以实现数据响应式



十、Vue中组件和插件有什么区别？

Vue2 面试题_第17张图片

1. 组件是什么

组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式，在Vue中每一个.vue文件都可以视为一个组件

组件的优势

  • 降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求，例如输入框，可以替换为日历、时间、范围等组件作具体的实现
  • 调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或者根据报错的组件快速定位问题，之所以能够快速定位，是因为每个组件之间低耦合，职责单一，所以逻辑会比分析整个系统要简单
  • 提高可维护性，由于每个组件的职责单一，并且组件在系统中是被复用的，所以对代码进行优化可获得系统的整体升级

2. 插件是什么

插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制；一般有下面几种：

  • 添加全局方法或者属性。如: vue-custom-element
  • 添加全局资源：指令/过滤器/过渡等。如 vue-touch
  • 通过全局混入来添加一些组件选项。如vue-router
  • 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
  • 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如vue-router

3. 两者的区别

两者的区别主要表现在以下几个方面：

  • 编写形式
  • 注册形式
  • 使用场景
⑴. 编写形式

编写组件

编写一个组件，可以有很多方式，我们最常见的就是vue单文件的这种格式，每一个.vue文件我们都可以看成是一个组件

vue文件标准格式

<template>
template>
<script>
export default{ 
    ...
}
script>
<style>
style>

我们还可以通过template属性来编写一个组件，如果组件内容多，我们可以在外部定义template组件内容，如果组件内容并不多，我们可直接写在template属性上

<template id="testComponent">     // 组件显示的内容
    <div>component!div>   
template>

Vue.component('componentA',{ 
    template: '#testComponent'  
    template: `<div>componentdiv>`  // 组件内容少可以通过这种形式
})

编写插件
vue插件的实现应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或 property
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }

  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })

  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

⑵. 注册形式

组件注册

vue组件注册主要分为全局注册与局部注册

全局注册通过Vue.component方法，第一个参数为组件的名称，第二个参数为传入的配置项

Vue.component('my-component-name', { /* ... */ })

局部注册只需在用到的地方通过components属性注册一个组件

const component1 = {...} // 定义一个组件

export default {
	components:{
		component1   // 局部注册
	}
}

插件注册
插件的注册通过Vue.use()的方式进行注册（安装），第一个参数为插件的名字，第二个参数是可选择的配置项

Vue.use(插件名字,{ /* ... */} )

注意的是：注册插件的时候，需要在调用 new Vue() 启动应用之前完成
Vue.use会自动阻止多次注册相同插件，只会注册一次


⑶. 使用场景

组件 (Component) 是用来构成你的 App 的业务模块，它的目标是 App.vue

插件 (Plugin) 是用来增强你的技术栈的功能模块，它的目标是 Vue 本身

简单来说，插件就是指对Vue的功能的增强或补充



十一、Vue组件之间的通信方式都有哪些？

Vue2 面试题_第18张图片

1. 组件间通信的概念

广义上，任何信息的交通都是通信组件间通信即指组件(.vue)通过某种方式来传递信息以达到某个目的；举个栗子我们在使用UI框架中的table组件，可能会往table组件中传入某些数据，这个本质就形成了组件之间的通信

2. 组件间通信解决了什么

每个组件之间的都有独自的作用域，组件间的数据是无法共享的。但实际开发工作中我们常常需要让组件之间共享数据，这也是组件通信的目的要让它们互相之间能进行通讯，这样才能构成一个有机的完整系统

3. 组件间通信解决了什么

组件间通信的分类可以分成以下：

  • 父子组件之间的通信
  • 兄弟组件之间的通信
  • 祖孙与后代组件之间的通信
  • 非关系组件间之间的通信

关系图:
Vue2 面试题_第19张图片

4. 组件间通信的方案

整理vue中8种常规的通信方案

  • 通过 props 传递
  • 通过 $emit 触发自定义事件
  • 使用 ref
  • EventBus
  • p a r e n t 或 parent 或 parent或root
  • attrs 与 listeners
  • Provide 与 Inject
  • Vuex
  • props

总结：

  • 父子关系的组件数据传递选择 props 与 $emit进行传递，也可选择ref
  • 兄弟关系的组件数据传递可选择bus，其次可以选择$parent进行传递
  • 祖先与后代组件数据传递可选择attrs与listeners或者 Provide与 Inject
  • 复杂关系的组件数据传递可以通过vuex存放共享的变量

⑴. props传递数据
  • 适用场景：父组件传递数据给子组件
  • 子组件设置props属性，定义接收父组件传递过来的参数
  • 父组件在使用子组件标签中通过字面量来传递值

Children.vue

props:{  
    // 字符串形式  
 name:String // 接收的类型参数  
    // 对象形式  
    age:{    
        type:Number, // 接收的类型为数值  
        defaule:18,  // 默认值为18  
       require:true // age属性必须传递  
    }  
}

Father.vue组件

<Children name="jack" age=18 />

⑵. $emit 触发自定义事件
  • 适用场景：子组件传递数据给父组件
  • 子组件通过 e m i t 触 发 自 定 义 事 件 ， emit触发自定义事件， emit触发自定义事件，emit第二个参数为传递的数值
  • 父组件绑定监听器获取到子组件传递过来的参数

Chilfen.vue

this.$emit('add', good)

Father.vue

<Children @add="cartAdd($event)" />

⑶. ref
  • 父组件在使用子组件的时候设置ref
  • 父组件通过设置子组件ref来获取数据

父组件

<Children ref="foo" />  
  
this.$refs.foo  // 获取子组件实例，通过子组件实例我们就能拿到对应的数据

⑷. EventBus
  • 使用场景：兄弟组件传值
  • 创建一个中央事件总线EventBus
  • 兄弟组件通过 e m i t 触 发 自 定 义 事 件 ， emit触发自定义事件， emit触发自定义事件，emit第二个参数为传递的数值
  • 另一个兄弟组件通过$on监听自定义事件

Bus.js

// 创建一个中央时间总线类  
class Bus {  
  constructor() {  
    this.callbacks = {};   // 存放事件的名字  
  }  
  $on(name, fn) {  
    this.callbacks[name] = this.callbacks[name] || [];  
    this.callbacks[name].push(fn);  
  }  
  $emit(name, args) {  
    if (this.callbacks[name]) {  
      this.callbacks[name].forEach((cb) => cb(args));  
    }  
  }  
}  
  
// main.js  
Vue.prototype.$bus = new Bus() // 将$bus挂载到vue实例的原型上  
// 另一种方式  
Vue.prototype.$bus = new Vue() // Vue已经实现了Bus的功能

Children1.vue

this.$bus.$emit('foo')

Children2.vue

this.$bus.$on('foo', this.handle)

⑸. p a r e n t 或 parent 或 parent或 root

通过共同祖辈 p a r e n t 或 者 parent或者 parent或者root搭建通信桥连

兄弟组件
this.$parent.on('add',this.add)

另一个兄弟组件
this.$parent.emit('add')

⑹. a t t r s 与 attrs 与 attrs与 listeners
  • 适用场景：祖先传递数据给子孙
  • 设置批量向下传属性$attrs和 $listeners
  • 包含了父级作用域中不作为 prop 被识别 (且获取) 的特性绑定 ( class 和 style 除外)。
  • 可以通过 v-bind="$attrs" 传⼊内部组件
// child：并未在props中声明foo  
<p>{{$attrs.foo}}</p>  
  
// parent  
<HelloWorld foo="foo"/>  


// 给Grandson隔代传值，communication/index.vue  
<Child2 msg="lalala" @some-event="onSomeEvent"></Child2>  
  
// Child2做展开  
<Grandson v-bind="$attrs" v-on="$listeners"></Grandson>  
  
// Grandson使⽤  
<div @click="$emit('some-event', 'msg from grandson')">  
{{msg}}  
</div>

⑺. provide 与 inject
  • 祖先组件定义provide属性，返回传递的值
  • 在后代组件通过inject接收组件传递过来的值

祖先组件

provide(){  
    return {  
        foo:'foo'  
    }  
}

后代组件

inject:['foo'] // 获取到祖先组件传递过来的值

⑻. vuex
  • 适用场景: 复杂关系的组件数据传递
  • Vuex作用相当于一个用来存储共享变量的容器

Vue2 面试题_第20张图片

  • state用来存放共享变量的地方
  • getter，可以增加一个getter派生状态，(相当于store中的计算属性），用来获得共享变量的值
  • mutations用来存放修改state的方法。
  • actions也是用来存放修改state的方法，不过action是在mutations的基础上进行。常用来做一些异步操作


十二、双向数据绑定是什么？

Vue2 面试题_第21张图片

1. 什么是双向绑定

先从单向绑定切入单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新双向绑定就很容易联想到了，在单向绑定的基础上，用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定举个栗子
Vue2 面试题_第22张图片

当用户填写表单时，View的状态就被更新了，如果此时可以自动更新Model的状态，那就相当于我们把Model和View做了双向绑定关系图如下
Vue2 面试题_第23张图片

2. 双向绑定的原理是什么

双向绑定由三个重要部分构成
数据层（Model）：应用的数据及业务逻辑
视图层（View）：应用的展示效果，各类UI组件
业务逻辑层（ViewModel）：框架封装的核心，它负责将数据与视图关联起来


理解ViewModel

  • 数据变化后更新视图
  • 视图变化后更新数据

两个主要部分组成：

  • 监听器（Observer）：对所有数据的属性进行监听
  • 解析器（Compiler）：对每个元素节点的指令进行扫描跟解析,根据指令模板替换数据,以及绑定相应的更新函数

3. 实现双向绑定

Vue2 面试题_第24张图片

  1. new Vue()首先执行初始化，对data执行响应化处理，这个过程发生Observe中
  2. 同时对模板执行编译，找到其中动态绑定的数据，从data中获取并初始化视图，这个过程发生在Compile中
  3. 同时定义⼀个更新函数和Watcher，将来对应数据变化时Watcher会调用更新函数
  4. 由于data的某个key在⼀个视图中可能出现多次，所以每个key都需要⼀个管家Dep来管理多个Watcher
  5. 将来data中数据⼀旦发生变化，会首先找到对应的Dep，通知所有Watcher执行更新函数


十三、Vue中的$nextTick有什么作用？

Vue2 面试题_第25张图片

1. NextTick是什么

官方对其的定义： 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM

可以理解成，Vue 在更新 DOM 时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新


为什么要有nexttick

{{num}}
for(let i=0; i<100000; i++){
    num = i
}

如果没有 nextTick 更新机制，那么 num 每次更新值都会触发视图更新(上面这段代码也就是会更新10万次视图)，有了nextTick机制，只需要更新一次，所以nextTick本质是一种优化策略

2. 使用场景

如果想要在修改数据后立刻得到更新后的DOM结构，可以使用Vue.nextTick()

第一个参数为：回调函数（可以获取最近的DOM结构）

第二个参数为：执行函数上下文

// 修改数据
vm.message = '修改后的值'
// DOM 还没有更新
console.log(vm.$el.textContent) // 原始的值
Vue.nextTick(function () {
  // DOM 更新了
  console.log(vm.$el.textContent) // 修改后的值
})

组件内使用 vm. n e x t T i c k ( ) 实 例 方 法 只 需 要 通 过 t h i s . nextTick() 实例方法只需要通过this. nextTick()实例方法只需要通过this.nextTick()，并且回调函数中的 this 将自动绑定到当前的 Vue 实例上

this.message = '修改后的值'
console.log(this.$el.textContent) // => '原始的值'
this.$nextTick(function () {
    console.log(this.$el.textContent) // => '修改后的值'
})

$nextTick() 会返回一个 Promise 对象，可以是用async/await完成相同作用的事情

this.message = '修改后的值'
console.log(this.$el.textContent) // => '原始的值'
await this.$nextTick()
console.log(this.$el.textContent) // => '修改后的值'

3. 实现原理

callbacks也就是异步操作队列
callbacks新增回调函数后又执行了timerFunc函数，pending是用来标识同一个时间只能执行一次

  1. 把回调函数放入callbacks等待执行
  2. 将执行函数放到微任务或者宏任务中
  3. 事件循环到了微任务或者宏任务，执行函数依次执行callbacks中的回调


十四、你对vue的mixin的理解，有什么应用场景？

Vue2 面试题_第26张图片

1. mixin是什么

Mixin是面向对象程序设计语言中的类，提供了方法的实现。
其他类可以访问mixin类的方法而不必成为其子类
Mixin类通常作为功能模块使用，在需要该功能时“混入”，有利于代码复用又避免了多继承的复杂

Vue中的mixin

官方定义：mixin（混入），提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。

本质其实就是一个js对象，它可以包含我们组件中任意功能选项，如data、components、methods、created、computed等等

我们只要将共用的功能以对象的方式传入 mixins选项中，当组件使用 mixins对象时所有mixins对象的选项都将被混入该组件本身的选项中来

在Vue中我们可以局部混入跟全局混入

局部混入
定义一个mixin对象，有组件options的data、methods属性

var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

组件通过mixins属性调用mixin对象

Vue.component('componentA',{
  mixins: [myMixin]
})

该组件在使用的时候，混合了mixin里面的方法，在自动执行create生命钩子，执行hello方法

全局混入
通过Vue.mixin()进行全局的混入

Vue.mixin({
  created: function () {
      console.log("全局混入")
    }
})

使用全局混入需要特别注意，因为它会影响到每一个组件实例（包括第三方组件）

注意事项：
当组件存在与mixin对象相同的选项的时候，进行递归合并的时候组件的选项会覆盖mixin的选项
但是如果相同选项为生命周期钩子的时候，会合并成一个数组，先执行mixin的钩子，再执行组件的钩子

2. 使用场景

在日常的开发中，我们经常会遇到在不同的组件中经常会需要用到一些相同或者相似的代码，这些代码的功能相对独立
这时，可以通过Vue的mixin功能将相同或者相似的代码提出来


3. 源码分析

  1. 优先递归处理 mixins
  2. 先遍历合并parent 中的key，调用mergeField方法进行合并，然后保存在变量options
  3. 再遍历 child，合并补上 parent 中没有的key，调用mergeField方法进行合并，保存在变量options
  4. 通过 mergeField 函数进行了合并

Vue的几种类型的合并策略

  • 替换型策略有props、methods、inject、computed，就是将新的同名参数替代旧的参数
  • 合并型策略是data, 通过set方法进行合并和重新赋值
  • 队列型策略有生命周期函数和watch，原理是将函数存入一个数组，然后正序遍历依次执行
  • 叠加型有component、directives、filters，通过原型链进行层层的叠加


十五、说说你对slot的理解？slot使用场景有哪些？

Vue2 面试题_第27张图片

1. slot是什么

在HTML中 slot 元素 ，作为 Web Components 技术套件的一部分，是Web组件内的一个占位符
该占位符可以在后期使用自己的标记语言填充

Vue2 面试题_第28张图片
Slot 艺名插槽，花名“占坑”，我们可以理解为solt在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中slot位置），作为承载分发内容的出口

可以将其类比为插卡式的FC游戏机，游戏机暴露卡槽（插槽）让用户插入不同的游戏磁条（自定义内容）

2. 使用场景

  • 通过插槽可以让用户可以拓展组件，去更好地复用组件和对其做定制化处理
  • 如果父组件在使用到一个复用组件的时候，获取这个组件在不同的地方有少量的更改，如果去重写组件是一件不明智的事情
  • 通过slot插槽向组件内部指定位置传递内容，完成这个复用组件在不同场景的应用
  • 比如布局组件、表格列、下拉选、弹框显示内容等

3. 分类

slot可以分来以下三种：

  • 默认插槽
  • 具名插槽
  • 作用域插槽
⑴. 默认插槽

子组件用标签来确定渲染的位置，标签里面可以放DOM结构，当父组件使用的时候没有往插槽传入内容，标签内DOM结构就会显示在页面

父组件在使用的时候，直接在子组件的标签内写入内容即可

子组件Child.vue

<template>
    <slot>
      <p>插槽后备的内容</p>
    </slot>
</template>

父组件

<Child>
  <div>默认插槽</div>  
</Child>

⑵. 具名插槽

子组件用name属性来表示插槽的名字，不传为默认插槽

父组件中在使用时在默认插槽的基础上加上slot属性，值为子组件插槽name属性值

子组件Child.vue

<template>
    <slot>插槽后备的内容</slot>
  <slot name="content">插槽后备的内容</slot>
</template>

父组件

<child>
    <template v-slot:default>具名插槽</template>
    <!-- 具名插槽⽤插槽名做参数 -->
    <template v-slot:content>内容...</template>
</child>

⑶. 作用域插槽

子组件在作用域上绑定属性来将子组件的信息传给父组件使用，这些属性会被挂在父组件v-slot接受的对象上

父组件中在使用时通过v-slot:（简写：#）获取子组件的信息，在内容中使用

子组件Child.vue

<template> 
  <slot name="footer" testProps="子组件的值">
          <h3>没传footer插槽</h3>
    </slot>
</template>

父组件

<child> 
    <!-- 把v-slot的值指定为作⽤域上下⽂对象 -->
    <template v-slot:default="slotProps">
      来⾃⼦组件数据：{{slotProps.testProps}}
    </template>
  <template #default="slotProps">
      来⾃⼦组件数据：{{slotProps.testProps}}
    </template>
</child>
  • v-slot属性只能在上使用，但在只有默认插槽时可以在组件标签上使用
  • 默认插槽名为default，可以省略default直接写v-slot
  • 缩写为#时不能不写参数，写成#default
  • 可以通过解构获取v-slot={user}，还可以重命名v-slot="{user: newName}“和定义默认值v-slot=”{user = ‘默认值’}"


十六、Vue.observable你有了解过吗？说说看

Vue2 面试题_第29张图片

1. Observable 是什么

Observable 翻译过来我们可以理解成可观察的；Vue.observable，让一个对象变成响应式数据。Vue 内部会用它来处理 data 函数返回的对象

返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器

Vue.observable({ count : 1})

其作用等同于

new vue({ count : 1})

在 Vue 2.x 中，被传入的对象会直接被 Vue.observable 变更，它和被返回的对象是同一个对象

在 Vue 3.x 中，则会返回一个可响应的代理，而对源对象直接进行变更仍然是不可响应的

2. 使用场景

在非父子组件通信时，可以使用通常的bus或者使用vuex，但是实现的功能不是太复杂，而使用上面两个又有点繁琐。这时，observable就是一个很好的选择

创建一个js文件

// 引入vue
import Vue from 'vue
// 创建state对象，使用observable让state对象可响应
export let state = Vue.observable({
  name: '张三',
  'age': 38
})
// 创建对应的方法
export let mutations = {
  changeName(name) {
    state.name = name
  },
  setAge(age) {
    state.age = age
  }
}

在.vue文件中直接使用即可

<template>
  <div>
    姓名：{{ name }}
    年龄：{{ age }}
    <button @click="changeName('李四')">改变姓名</button>
    <button @click="setAge(18)">改变年龄</button>
  </div>
</template>
import { state, mutations } from '@/store
export default {
  // 在计算属性中拿到值
  computed: {
    name() {
      return state.name
    },
    age() {
      return state.age
    }
  },
  // 调用mutations里面的方法，更新数据
  methods: {
    changeName: mutations.changeName,
    setAge: mutations.setAge
  }
}


十七、你知道vue中key的原理吗？说说你对它的理解

Vue2 面试题_第30张图片

1. Key是什么

开始之前，我们先还原两个实际工作场景

  1. 当我们在使用v-for时，需要给单元加上key

    <ul>
    <li v-for="item in items" :key="item.id">...</li>
</ul>

  2. 用+new Date()生成的时间戳作为key，手动强制触发重新渲染

    <Comp :key="+new Date()" />

场景背后的逻辑

key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确， 更快的找到对应的vnode节点

当我们在使用v-for时，需要给单元加上key

  • 如果不用key，Vue会采用就地复地原则：最小化element的移动，并且会尝试尽最大程度在同适当的地方对相同类型的element，做patch或者reuse。
  • 如果使用了key，Vue会根据keys的顺序记录element，曾经拥有了key的element如果不再出现的话，会被直接remove或者destoryed

用+new Date()生成的时间戳作为key，手动强制触发重新渲染

  • 当拥有新值的rerender作为key时，拥有了新key的Comp出现了，那么旧key Comp会被移除，新key Comp触发渲染

2. 设置key与不设置key区别

设置key能够大大减少对页面的DOM操作，提高了diff效率

设置key值一定能提高diff效率吗？
其实不然，文档中也明确表示

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素

这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出

建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升



十八、说说你对keep-alive的理解是什么？

Vue2 面试题_第31张图片

1. Keep-alive 是什么

keep-alive是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM

keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们

keep-alive可以设置以下props属性：

  • include - 字符串或正则表达式。只有名称匹配的组件会被缓存
  • exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存
  • max - 数字。最多可以缓存多少组件实例

关于keep-alive的基本用法：

<keep-alive>
  <component :is="view"></component>
</keep-alive>

使用includes和exclude：

<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)，匿名组件不能被匹配

设置了 keep-alive 缓存的组件，会多出两个生命周期钩子（activated与deactivated）：

  • 首次进入组件时：beforeRouteEnter > beforeCreate > created> mounted > activated > … … > beforeRouteLeave > deactivated
  • 再次进入组件时：beforeRouteEnter >activated > … … > beforeRouteLeave > deactivated

2. 使用场景

使用原则：当我们在某些场景下不需要让页面重新加载时我们可以使用keepalive

举个栗子:

当我们从首页–>列表页–>商详页–>再返回，这时候列表页应该是需要keep-alive

从首页–>列表页–>商详页–>返回到列表页(需要缓存)–>返回到首页(需要缓存)–>再次进入列表页(不需要缓存)，这时候可以按需来控制页面的keep-alive

在路由中设置keepAlive属性判断是否需要缓存

{
  path: 'list',
  name: 'itemList', // 列表页
  component (resolve) {
    require(['@/pages/item/list'], resolve)
 },
 meta: {
  keepAlive: true,
  title: '列表页'
 }
}

使用

<div id="app" class='wrapper'>
    <keep-alive>
        <!-- 需要缓存的视图组件 --> 
        <router-view v-if="$route.meta.keepAlive"></router-view>
     </keep-alive>
      <!-- 不需要缓存的视图组件 -->
     <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>

3. 原理分析

keep-alive是vue中内置的一个组件

4. 思考题：缓存后如何获取数据

解决方案可以有以下两种： beforeRouteEnter、actived

beforeRouteEnter
每次组件渲染的时候，都会执行beforeRouteEnter

beforeRouteEnter(to, from, next){
    next(vm=>{
        console.log(vm)
        // 每次进入路由执行
        vm.getData()  // 获取数据
    })
},

actived
在keep-alive缓存的组件被激活的时候，都会执行actived钩子

activated(){
   this.getData() // 获取数据
},


十九、Vue常用的修饰符有哪些有什么应用场景

Vue2 面试题_第32张图片

1. 修饰符是什么

在程序世界里，修饰符是用于限定类型以及类型成员的声明的一种符号

在Vue中，修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理

vue中修饰符分为以下五种：

  • 表单修饰符
  • 事件修饰符
  • 鼠标按键修饰符
  • 键值修饰符
  • v-bind修饰符

2. 修饰符的作用

⑴. 表单修饰符

在我们填写表单的时候用得最多的是input标签，指令用得最多的是v-model

关于表单的修饰符有如下：

  • lazy
  • trim
  • number

lazy
在我们填完信息，光标离开标签的时候，才会将值赋予给value，也就是在change事件之后再进行信息同步

<input type="text" v-model.lazy="value">
<p>{{value}}</p>

trim
自动过滤用户输入的首空格字符，而中间的空格不会过滤

<input type="text" v-model.trim="value">

number
自动将用户的输入值转为数值类型，但如果这个值无法被parseFloat解析，则会返回原来的值

<input v-model.number="age" type="number">

⑵. 事件修饰符

事件修饰符是对事件捕获以及目标进行了处理，有如下修饰符：

  • stop
  • prevent
  • self
  • once
  • capture
  • passive
  • native

stop
阻止了事件冒泡，相当于调用了event.stopPropagation方法

<div @click="shout(2)">
  <button @click.stop="shout(1)">ok</button>
</div>
//只输出1

prevent
阻止了事件的默认行为，相当于调用了event.preventDefault方法

<form v-on:submit.prevent="onSubmit"></form>

self
只当在 event.target 是当前元素自身时触发处理函数

<div v-on:click.self="doThat">...</div>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击

once
绑定了事件以后只能触发一次，第二次就不会触发

<button @click.once="shout(1)">ok</button>

capture
使事件触发从包含这个元素的顶层开始往下触发

<div @click.capture="shout(1)">
    obj1
<div @click.capture="shout(2)">
    obj2
<div @click="shout(3)">
    obj3
<div @click="shout(4)">
    obj4
</div>
</div>
</div>
</div>
// 输出结构: 1 2 4 3

passive
在移动端，当我们在监听元素滚动事件的时候，会一直触发onscroll事件会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll事件整了一个.lazy修饰符

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

不要把 .passive 和 .prevent 一起使用,因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。
passive 会告诉浏览器你不想阻止事件的默认行为

native
让组件变成像html内置标签那样监听根元素的原生事件，否则组件上使用 v-on 只会监听自定义事件

<my-component v-on:click.native="doSomething"></my-component>

使用.native修饰符来操作普通HTML标签是会令事件失效的


⑶. 鼠标按钮修饰符

鼠标按钮修饰符针对的就是左键、右键、中键点击，有如下：

  • left 左键点击
  • right 右键点击
  • middle 中键点击
<button @click.left="shout(1)">ok</button>
<button @click.right="shout(1)">ok</button>
<button @click.middle="shout(1)">ok</button>

⑷. 键盘修饰符

键盘修饰符是用来修饰键盘事件（onkeyup，onkeydown）的，keyCode存在很多，但vue为我们提供了别名，分为以下两种：

  • 普通键（enter、tab、delete、space、esc、up…）
  • 系统修饰键（ctrl、alt、meta、shift…）
// 只有按键为keyCode的时候才触发
<input type="text" @keyup.keyCode="shout()">

还可以通过以下方式自定义一些全局的键盘码别名

Vue.config.keyCodes.f2 = 113

⑸. v-bind修饰符

v-bind修饰符主要是为属性进行操作，用来分别有如下：

  • async
  • prop
  • camel

async
能对props进行一个双向绑定

//父组件
<comp :myMessage.sync="bar"></comp> 
//子组件
this.$emit('update:myMessage',params);

以上这种方法相当于以下的简写

//父亲组件
<comp :myMessage="bar" @update:myMessage="func"></comp>
func(e){
 this.bar = e;
}
//子组件js
func2(){
  this.$emit('update:myMessage',params);
}
  • 使用sync的时候，子组件传递的事件名格式必须为update:value，其中value必须与子组件中props中声明的名称完全一致
  • 注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用
  • 将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync=”{ title: doc.title }”，是无法正常工作的

props
设置自定义标签属性，避免暴露数据，防止污染HTML结构

<input id="uid" title="title1" value="1" :index.prop="index">

camel
将命名变为驼峰命名法，如将view-Box属性名转换为 viewBox

<svg :viewBox="viewBox"></svg>

3. 应用场景

根据每一个修饰符的功能，我们可以得到以下修饰符的应用场景：

  • .stop：阻止事件冒泡
  • .native：绑定原生事件
  • .once：事件只执行一次
  • .self ：将事件绑定在自身身上，相当于阻止事件冒泡
  • .prevent：阻止默认事件
  • .caption：用于事件捕获
  • .once：只触发一次
  • .keyCode：监听特定键盘按下
  • .right：右键


二十、你有写过自定义指令吗？自定义指令的应用场景有哪些？

Vue2 面试题_第33张图片

1. 什么是指令

指令系统是计算机硬件的语言系统，也叫机器语言，它是系统程序员看到的计算机的主要属性。因此指令系统表征了计算机的基本功能决定了机器所要求的能力

  • 在vue中提供了一套为数据驱动视图更为方便的操作，这些操作被称为指令系统
  • 我们看到的v-开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能
  • 除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令

指令使用的几种方式：

//会实例化一个指令，但这个指令没有参数 
`v-xxx`

// -- 将值传到指令中
`v-xxx="value"`  

// -- 将字符串传入到指令中，如`v-html="'
内容
'"`
`v-xxx="'string'"` 

// -- 传参数（`arg`），如`v-bind:class="className"`
`v-xxx:arg="value"` 

// -- 使用修饰符（`modifier`）
`v-xxx:arg.modifier="value"`

2. 如何实现

注册一个自定义指令有全局注册与局部注册

全局注册主要是通过Vue.directive方法进行注册

Vue.directive第一个参数是指令的名字（不需要写上v-前缀），第二个参数可以是对象数据，也可以是一个指令函数

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()  // 页面加载完成之后自动让输入框获取到焦点的小功能
  }
})

局部注册通过在组件options选项中设置directive属性

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus() // 页面加载完成之后自动让输入框获取到焦点的小功能
    }
  }
}

然后你可以在模板中任何元素上使用新的 v-focus property，如下：

<input v-focus />

自定义指令也像组件那样存在钩子函数：

  • bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
  • inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
  • update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
  • componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用
  • unbind：只调用一次，指令与元素解绑时调用

所有的钩子函数的参数都有以下：

  • el：指令所绑定的元素，可以用来直接操作 DOM
  • binding：一个对象，包含以下 property：
    • name：指令名，不包括 v- 前缀。
    • value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
    • oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
    • expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
    • arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
    • modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }
  • vnode：Vue 编译生成的虚拟节点
  • oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用

除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行

举个栗子：

<div v-demo="{ color: 'white', text: 'hello!' }"></div>
<script>
    Vue.directive('demo', function (el, binding) {
    console.log(binding.value.color) // "white"
    console.log(binding.value.text)  // "hello!"
    })
</script>

3. 应用场景

使用自定义指令可以满足我们日常一些场景，这里给出几个自定义指令的案例：

  • 防抖
  • 图片懒加载
  • 一键 Copy的功能
⑴. 输入框防抖

防抖这种情况设置一个v-throttle自定义指令来实现

举个例子：

// 1.设置v-throttle自定义指令
Vue.directive('throttle', {
  bind: (el, binding) => {
    let throttleTime = binding.value; // 防抖时间
    if (!throttleTime) { // 用户若不设置防抖时间，则默认2s
      throttleTime = 2000;
    }
    let cbFun;
    el.addEventListener('click', event => {
      if (!cbFun) { // 第一次执行
        cbFun = setTimeout(() => {
          cbFun = null;
        }, throttleTime);
      } else {
        event && event.stopImmediatePropagation();
      }
    }, true);
  },
});
// 2.为button标签设置v-throttle自定义指令
<button @click="sayHello" v-throttle>提交</button>

⑵. 图片懒加载

设置一个v-lazy自定义指令完成图片懒加载

const LazyLoad = {
    // install方法
    install(Vue,options){
    	  // 代替图片的loading图
        let defaultSrc = options.default;
        Vue.directive('lazy',{
            bind(el,binding){
                LazyLoad.init(el,binding.value,defaultSrc);
            },
            inserted(el){
                // 兼容处理
                if('IntersectionObserver' in window){
                    LazyLoad.observe(el);
                }else{
                    LazyLoad.listenerScroll(el);
                }
                
            },
        })
    },
    // 初始化
    init(el,val,def){
        // data-src 储存真实src
        el.setAttribute('data-src',val);
        // 设置src为loading图
        el.setAttribute('src',def);
    },
    // 利用IntersectionObserver监听el
    observe(el){
        let io = new IntersectionObserver(entries => {
            let realSrc = el.dataset.src;
            if(entries[0].isIntersecting){
                if(realSrc){
                    el.src = realSrc;
                    el.removeAttribute('data-src');
                }
            }
        });
        io.observe(el);
    },
    // 监听scroll事件
    listenerScroll(el){
        let handler = LazyLoad.throttle(LazyLoad.load,300);
        LazyLoad.load(el);
        window.addEventListener('scroll',() => {
            handler(el);
        });
    },
    // 加载真实图片
    load(el){
        let windowHeight = document.documentElement.clientHeight
        let elTop = el.getBoundingClientRect().top;
        let elBtm = el.getBoundingClientRect().bottom;
        let realSrc = el.dataset.src;
        if(elTop - windowHeight<0&&elBtm > 0){
            if(realSrc){
                el.src = realSrc;
                el.removeAttribute('data-src');
            }
        }
    },
    // 节流
    throttle(fn,delay){
        let timer; 
        let prevTime;
        return function(...args){
            let currTime = Date.now();
            let context = this;
            if(!prevTime) prevTime = currTime;
            clearTimeout(timer);
            
            if(currTime - prevTime > delay){
                prevTime = currTime;
                fn.apply(context,args);
                clearTimeout(timer);
                return;
            }

            timer = setTimeout(function(){
                prevTime = Date.now();
                timer = null;
                fn.apply(context,args);
            },delay);
        }
    }

}
export default LazyLoad;

⑶. 一键 Copy的功能
import { Message } from 'ant-design-vue';

const vCopy = { //
  /*
    bind 钩子函数，第一次绑定时调用，可以在这里做初始化设置
    el: 作用的 dom 对象
    value: 传给指令的值，也就是我们要 copy 的值
  */
  bind(el, { value }) {
    el.$value = value; // 用一个全局属性来存传进来的值，因为这个值在别的钩子函数里还会用到
    el.handler = () => {
      if (!el.$value) {
      // 值为空的时候，给出提示，我这里的提示是用的 ant-design-vue 的提示，你们随意
        Message.warning('无复制内容');
        return;
      }
      // 动态创建 textarea 标签
      const textarea = document.createElement('textarea');
      // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域
      textarea.readOnly = 'readonly';
      textarea.style.position = 'absolute';
      textarea.style.left = '-9999px';
      // 将要 copy 的值赋给 textarea 标签的 value 属性
      textarea.value = el.$value;
      // 将 textarea 插入到 body 中
      document.body.appendChild(textarea);
      // 选中值并复制
      textarea.select();
      // textarea.setSelectionRange(0, textarea.value.length);
      const result = document.execCommand('Copy');
      if (result) {
        Message.success('复制成功');
      }
      document.body.removeChild(textarea);
    };
    // 绑定点击事件，就是所谓的一键 copy 啦
    el.addEventListener('click', el.handler);
  },
  // 当传进来的值更新的时候触发
  componentUpdated(el, { value }) {
    el.$value = value;
  },
  // 指令与元素解绑的时候，移除事件绑定
  unbind(el) {
    el.removeEventListener('click', el.handler);
  },
};

export default vCopy;

关于自定义指令还有很多应用场景，如：拖拽指令、页面水印、权限校验等等应用场景



二十一、Vue中的过滤器了解吗？过滤器的应用场景有哪些？

Vue2 面试题_第34张图片

1. 是什么

  • 过滤器（filter）是输送介质管道上不可缺少的一种装置，就是把一些不必要的东西过滤掉
  • 过滤器实质不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用处理，我们也可以理解其为一个纯函数
  • Vue 允许你自定义过滤器，可被用于一些常见的文本格式化
  • ps: Vue3中已废弃filter

2. 如何用

vue中的过滤器可以用在两个地方：双花括号插值和 v-bind 表达式，过滤器应该被添加在 JavaScript表达式的尾部，由“管道”符号指示：

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

  • 部过滤器优先于全局过滤器被调用
  • 一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右

3. 应用场景

平时开发中，需要用到过滤器的地方有很多，比如单位转换、数字打点、文本格式化、时间格式化之类的等

比如我们要实现将30000 => 30,000，这时候我们就需要使用过滤器

Vue.filter('toThousandFilter', function (value) {
     if (!value) return ''
     value = value.toString()
     return .replace(str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g, '$1,')
})

4. 原理分析

  • 在编译阶段通过parseFilters将过滤器编译成函数调用（串联过滤器则是一个嵌套的函数调用，前一个过滤器执行的结果是后一个过滤器函数的参数）
  • 编译后通过调用resolveFilter函数找到对应过滤器并返回结果
  • 执行结果作为参数传递给toString函数，而toString执行后，其结果会保存在Vnode的text属性中，渲染到视图


二十二、什么是虚拟DOM？如何实现一个虚拟DOM？说说你的思路

Vue2 面试题_第35张图片

1. 什么是虚拟DOM

  • 虚拟 DOM （Virtual DOM ）这个概念相信大家都不陌生，从 React 到 Vue ，虚拟 DOM 为这两个框架都带来了跨平台的能力（React-Native 和 Weex）
  • 实际上它只是一层对真实DOM的抽象，以JavaScript 对象 (VNode 节点) 作为基础的树，用对象的属性来描述节点，最终可以通过一系列操作使这棵树映射到真实环境上
  • 在Javascript对象中，虚拟DOM 表现为一个 Object对象。并且最少包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性，不同框架对这三个属性的名命可能会有差别
  • 创建虚拟DOM就是为了更好将虚拟的节点渲染到页面视图中，所以虚拟DOM对象的节点与真实DOM的属性一一照应

定义真实DOM:

<div id="app">
    <p class="p">节点内容</p>
    <h3>{{ foo }}</h3>
</div>

实例化vue

const app = new Vue({
    el:"#app",
    data:{
        foo:"foo"
    }
})

观察render的render，我们能得到虚拟DOM

(function anonymous(
) {
	with(this){return _c('div',{attrs:{"id":"app"}},[_c('p',{staticClass:"p"},
					  [_v("节点内容")]),_v(" "),_c('h3',[_v(_s(foo))])])}})

通过VNode，vue可以对这颗抽象树进行创建节点,删除节点以及修改节点的操作， 经过diff算法得出一些需要修改的最小单位,再更新视图，减少了dom操作，提高了性能

2. 为什么需要虚拟DOM

  • DOM是很慢的，其元素非常庞大，页面的性能问题，大部分都是由DOM操作引起的
  • 很多人认为虚拟 DOM 最大的优势是 diff 算法，减少 JavaScript 操作真实 DOM 的带来的性能消耗。虽然这一个虚拟 DOM 带来的一个优势，但并不是全部。
  • 虚拟 DOM 最大的优势在于抽象了原本的渲染过程，实现了跨平台的能力，而不仅仅局限于浏览器的 DOM，可以是安卓和 IOS 的原生组件，可以是近期很火热的小程序，也可以是各种GUI

3. 如何实现虚拟DOM

createElement 创建 VNode 的过程，每个 VNode 有 children，children 每个元素也是一个VNode，这样就形成了一个虚拟树结构，用于描述真实的DOM树结构

createComponent生成VNode的三个关键流程：

  1. 构造子类构造函数Ctor
  2. installComponentHooks安装组件钩子函数
  3. 实例化 vnode


二十三、你了解vue的diff算法吗？说说看

Vue2 面试题_第36张图片

1. 是什么

diff 算法是一种通过同层的树节点进行比较的高效算法

其有两个特点：

  • 比较只会在同层级进行, 不会跨层级比较
  • 在diff比较的过程中，循环从两边向中间比较

diff 算法在很多场景下都有应用，在 vue 中，作用于虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较

2. 比较方式

diff整体策略为：深度优先，同层比较

  • 比较只会在同层级进行, 不会跨层级比较
    Vue2 面试题_第37张图片

  • 比较的过程中，循环从两边向中间收拢
    Vue2 面试题_第38张图片

3. 原理分析

当数据发生改变时，set方法会调用Dep.notify通知所有订阅者Watcher，订阅者就会调用patch给真实的DOM打补丁，更新相应的视图

总结：

  • 当数据发生改变时，订阅者watcher就会调用patch给真实的DOM打补丁
  • 通过isSameVnode进行判断，相同则调用patchVnode方法
  • patchVnode做了以下操作：
    • 找到对应的真实dom，称为el
    • 如果都有都有文本节点且不相等，将el文本节点设置为Vnode的文本节点
    • 如果oldVnode有子节点而VNode没有，则删除el子节点
    • 如果oldVnode没有子节点而VNode有，则将VNode的子节点真实化后添加到el
    • 如果两者都有子节点，则执行updateChildren函数比较子节点
  • updateChildren主要做了以下操作：
    • 设置新旧VNode的头尾指针
    • 新旧头尾指针进行比较，循环向中间靠拢，根据情况调用patchVnode进行patch重复流程、调用createElem创建一个新节点，从哈希表寻找 key一致的VNode 节点再分情况操作


二十四、Vue项目中有封装过axios吗？主要是封装哪方面的？

Vue2 面试题_第39张图片

1. axios是什么

axios 是一个轻量的 HTTP客户端

基于 XMLHttpRequest 服务来执行 HTTP 请求，支持丰富的配置，支持 Promise，支持浏览器端和 Node.js 端。自Vue2.0起，尤大宣布取消对 vue-resource 的官方推荐，转而推荐 axios。现在 axios 已经成为大部分 Vue 开发者的首选

特性

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换JSON 数据
  • 客户端支持防御XSRF

基本使用

// 项目中安装
npm install axios --S
// cdn 引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
// 导入
import axios from 'axios'

发送请求

axios({        
  url:'xxx',    // 设置请求的地址
  method:"GET", // 设置请求方法
  params:{      // get请求使用params进行参数凭借,如果是post请求用data
    type: '',
    page: 1
  }
}).then(res => {  
  // res为后端返回的数据
  console.log(res);   
})

并发请求axios.all([])

function getUserAccount() {
    return axios.get('/user/12345');
}

function getUserPermissions() {
    return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
    .then(axios.spread(function (res1, res2) { 
    // res1第一个请求的返回的内容，res2第二个请求返回的内容
    // 两个请求都执行完成才会执行
}));

2. 为什么要封装

axios 的 API 很友好，你完全可以很轻松地在项目中直接使用。

不过随着项目规模增大，如果每发起一次HTTP请求，就要把这些比如设置超时时间、设置请求头、根据项目环境判断使用哪个请求地址、错误处理等等操作，都需要写一遍

这种重复劳动不仅浪费时间，而且让代码变得冗余不堪，难以维护。为了提高我们的代码质量，我们应该在项目中二次封装一下 axios 再使用

3. 如何封装

封装的同时，你需要和 后端协商好一些约定，请求头，状态码，请求超时时间…

  • 设置接口请求前缀：根据开发、测试、生产环境的不同，前缀需要加以区分
  • 请求头 : 来实现一些具体的业务，必须携带一些参数才可以请求(例如：会员业务)
  • 状态码: 根据接口返回的不同status ， 来执行不同的业务，这块需要和后端约定好
  • 请求方法：根据get、post等方法进行一个再次封装，使用起来更为方便
  • 请求拦截器: 根据请求的请求头设定，来决定哪些请求可以访问
  • 响应拦截器： 这块就是根据 后端`返回来的状态码判定执行不同业务

设置接口请求前缀

利用node环境变量来作判断，用来区分开发、测试、生产环境

if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = 'http://dev.xxx.com'
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = 'http://prod.xxx.com'
}

在本地调试的时候，还需要在vue.config.js文件中配置devServer实现代理转发，从而实现跨域

devServer: {
    proxy: {
      '/proxyApi': {
        target: 'http://dev.xxx.com',
        changeOrigin: true,
        pathRewrite: {
          '/proxyApi': ''
        }
      }
    }
  }

设置请求头与超时时间

大部分情况下，请求头都是固定的，只有少部分情况下，会需要一些特殊的请求头，这里将普适性的请求头作为基础配置。当需要特殊请求头时，将特殊请求头作为参数传入，覆盖基础配置

const service = axios.create({
    ...
    timeout: 30000,  // 请求 30s 超时
	  headers: {
        get: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
          // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
        },
        post: {
          'Content-Type': 'application/json;charset=utf-8'
          // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
        }
  },
})

封装请求方法
先引入封装好的方法，在要调用的接口重新封装成一个方法暴露出去

// get 请求
export function httpGet({
  url,
  params = {}
}) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params
    }).then((res) => {
      resolve(res.data)
    }).catch(err => {
      reject(err)
    })
  })
}

// post
// post请求
export function httpPost({
  url,
  data = {},
  params = {}
}) {
  return new Promise((resolve, reject) => {
    axios({
      url,
      method: 'post',
      transformRequest: [function (data) {
        let ret = ''
        for (let it in data) {
          ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        }
        return ret
      }],
      // 发送的数据
      data,
      // url参数
      params

    }).then(res => {
      resolve(res.data)
    })
  })
}

把封装的方法放在一个api.js文件中

import { httpGet, httpPost } from './http'
export const getorglist = (params = {}) => httpGet({ url: 'apps/api/org/list', params })

页面中就能直接调用

// .vue
import { getorglist } from '@/assets/js/api'

getorglist({ id: 200 }).then(res => {
  console.log(res)
})

这样可以把api统一管理起来，以后维护修改只需要在api.js文件操作即可

请求拦截器
请求拦截器可以在每个请求里加上token，做了统一处理后维护起来也方便

// 请求拦截器
axios.interceptors.request.use(
  config => {
    // 每次发送请求之前判断是否存在token
    // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况，此处token一般是用户完成登录后储存到localstorage里的
    token && (config.headers.Authorization = token)
    return config
  },
  error => {
    return Promise.error(error)
  })

响应拦截器
响应拦截器可以在接收到响应后先做一层操作，如根据状态码判断登录状态、授权

// 响应拦截器
axios.interceptors.response.use(response => {
  // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
  // 否则的话抛出错误
  if (response.status === 200) {
    if (response.data.code === 511) {
      // 未授权调取授权接口
    } else if (response.data.code === 510) {
      // 未登录跳转登录页
    } else {
      return Promise.resolve(response)
    }
  } else {
    return Promise.reject(response)
  }
}, error => {
  // 我们可以在这里对异常状态作统一处理
  if (error.response.status) {
    // 处理请求失败的情况
    // 对不同返回码对相应处理
    return Promise.reject(error.response)
  }
})

总结：

  • 封装是编程中很有意义的手段，简单的axios封装，就可以让我们可以领略到它的魅力
  • 封装 axios 没有一个绝对的标准，只要你的封装可以满足你的项目需求，并且用起来方便，那就是一个好的封装方案


二十五、SSR解决了什么问题？有做过SSR吗？你是怎么做的？

Vue2 面试题_第40张图片

1. 是什么

Server-Side Rendering 我们称其为SSR，意为服务端渲染
指由服务侧完成页面的 HTML 结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程

先来看看Web3个阶段的发展史：

  • 传统服务端渲染SSR
  • 单页面应用SPA
  • 服务端渲染SSR

⑴. 传统web开发

网页内容在服务端渲染完成，⼀次性传输到浏览器

Vue2 面试题_第41张图片

打开页面查看源码，浏览器拿到的是全部的dom结构


⑵. 单页应用SPA

单页应用优秀的用户体验，使其逐渐成为主流，页面内容由JS渲染出来，这种方式称为客户端渲染

Vue2 面试题_第42张图片

打开页面查看源码，浏览器拿到的仅有宿主元素#app，并没有内容


⑶. 服务端渲染SSR

SSR解决方案，后端渲染出完整的首屏的dom结构返回，前端拿到的内容包括首屏及完整spa结构，应用激活后依然按照spa方式运行

Vue2 面试题_第43张图片
Vue官方对SSR的解释：

Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序
服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"，因为应用程序的大部分代码都可以在服务器和客户端上运行

  • Vue SSR是一个在SPA上进行改良的服务端渲染
  • 通过Vue SSR渲染的页面，需要在客户端激活才能实现交互
  • Vue SSR将包含两部分：服务端渲染的首屏，包含交互的SPA

2. 是什么

SSR主要解决了以下两种问题：

  • seo：搜索引擎优先爬取页面HTML结构，使用ssr时，服务端已经生成了和业务想关联的HTML，有利于seo
  • 首屏呈现渲染：用户无需等待页面所有js加载完成就可以看到页面视图（压力来到了服务器，所以需要权衡哪些用服务端渲染，哪些交给客户端）

但是使用SSR同样存在以下的缺点：

  • 复杂度：整个项目的复杂度
  • 库的支持性，代码兼容
  • 性能问题
    • 每个请求都是n个实例的创建，不然会污染，消耗会变得很大
    • 缓存 node serve、 nginx判断当前用户有没有过期，如果没过期的话就缓存，用刚刚的结果。
    • 降级：监控cpu、内存占用过多，就spa，返回单个的壳
  • 服务器负载变大，相对于前后端分离务器只需要提供静态资源来说，服务器负载更大，所以要慎重使用

所以在我们选择是否使用SSR前，我们需要慎重问问自己这些问题：

  • 需要SEO的页面是否只是少数几个，这些是否可以使用预渲染（Prerender SPA Plugin）实现
  • 首屏的请求响应逻辑是否复杂，数据返回是否大量且缓慢

3. 如何实现

  • 对于同构开发，我们依然使用webpack打包，我们要解决两个问题：服务端首屏渲染和客户端激活
  • 这里需要生成一个服务器bundle文件用于服务端首屏渲染和一个客户端bundle文件用于客户端激活
    Vue2 面试题_第44张图片
    总结：
  • 使用ssr不存在单例模式，每次用户请求都会创建一个新的vue实例
  • 实现ssr需要实现服务端首屏渲染和客户端激活
  • 服务端异步获取数据asyncData可以分为首屏异步获取和切换组件获取
    • 首屏异步获取数据，在服务端预渲染的时候就应该已经完成
    • 切换组件通过mixin混入，在beforeMount钩子完成数据获取


二十六、说下你的vue项目的目录结构，如果是大型项目你该怎么划分结构和划分组件呢？

Vue2 面试题_第45张图片

1. 为什么要划分

使用vue构建项目，项目结构清晰会提高开发效率，熟悉项目的各种配置同样会让开发效率更高

  • 在划分项目结构的时候，需要遵循一些基本的原则：
  • 文件夹和文件夹内部文件的语义一致性
  • 单一入口/出口
  • 就近原则，紧耦合的文件应该放到一起，且应以相对路径引用
  • 公共的文件应该以绝对路径的方式从根目录引用
  • /src 外的文件不应该被引入

⑴. 文件夹和文件夹内部文件的语义一致性

我们的目录结构都会有一个文件夹是按照路由模块来划分的，如pages文件夹，这个文件夹里面应该包含我们项目所有的路由模块，并且仅应该包含路由模块，而不应该有别的其他的非路由模块的文件夹
这样做的好处在于一眼就从 pages文件夹看出这个项目的路由有哪些


⑵. 单一入口/出口

举个例子，在pages文件夹里面存在一个seller文件夹，这时候seller 文件夹应该作为一个独立的模块由外部引入，并且 seller/index.js 应该作为外部引入 seller 模块的唯一入口

// 错误用法
import sellerReducer from 'src/pages/seller/reducer'

// 正确用法
import { reducer as sellerReducer } from 'src/pages/seller'

这样做的好处在于，无论你的模块文件夹内部有多乱，外部引用的时候，都是从一个入口文件引入，这样就很好的实现了隔离，如果后续有重构需求，你就会发现这种方式的优点


⑶. 就近原则，紧耦合的文件应该放到一起，且应以相对路径引用

使用相对路径可以保证模块内部的独立性

// 正确用法
import styles from './index.module.scss'
// 错误用法
import styles from 'src/pages/seller/index.module.scss'

⑷. 公共的文件应该以绝对路径的方式从根目录引用

公共指的是多个路由模块共用，如一些公共的组件，我们可以放在src/components下

在使用到的页面中，采用绝对路径的形式引用

// 错误用法
import Input from '../../components/input'
// 正确用法
import Input from 'src/components/input'

同样的，如果我们需要对文件夹结构进行调整。将 /src/components/input 变成 /src/components/new/input，如果使用绝对路径，只需要全局搜索替换

再加上绝对路径有全局的语义，相对路径有独立模块的语义


⑸. /src 外的文件不应该被引入

vue-cli脚手架已经帮我们做了相关的约束了，正常我们的前端项目都会有个src文件夹，里面放着所有的项目需要的资源，js,css, png, svg 等等。src 外会放一些项目配置，依赖，环境等文件

这样的好处是方便划分项目代码文件和配置文件

3. 目录结构

单页面目录结构

project
│  .browserslistrc
│  .env.production
│  .eslintrc.js
│  .gitignore
│  babel.config.js
│  package-lock.json
│  package.json
│  README.md
│  vue.config.js
│  yarn-error.log
│  yarn.lock
│
├─public
│      favicon.ico
│      index.html
│
|-- src
    |-- components
        |-- input
            |-- index.js
            |-- index.module.scss
    |-- pages
        |-- seller
            |-- components
                |-- input
                    |-- index.js
                    |-- index.module.scss
            |-- reducer.js
            |-- saga.js
            |-- index.js
            |-- index.module.scss
        |-- buyer
            |-- index.js
        |-- index.js

多页面目录结构

my-vue-test:.
│  .browserslistrc
│  .env.production
│  .eslintrc.js
│  .gitignore
│  babel.config.js
│  package-lock.json
│  package.json
│  README.md
│  vue.config.js
│  yarn-error.log
│  yarn.lock
│
├─public
│      favicon.ico
│      index.html
│
└─src
    ├─apis //接口文件根据页面或实例模块化
    │      index.js
    │      login.js
    │
    ├─components //全局公共组件
    │  └─header
    │          index.less
    │          index.vue
    │
    ├─config //配置（环境变量配置不同passid等）
    │      env.js
    │      index.js
    │
    ├─contant //常量
    │      index.js
    │
    ├─images //图片
    │      logo.png
    │
    ├─pages //多页面vue项目，不同的实例
    │  ├─index //主实例
    │  │  │  index.js
    │  │  │  index.vue
    │  │  │  main.js
    │  │  │  router.js
    │  │  │  store.js
    │  │  │
    │  │  ├─components //业务组件
    │  │  └─pages //此实例中的各个路由
    │  │      ├─amenu
    │  │      │      index.vue
    │  │      │
    │  │      └─bmenu
    │  │              index.vue
    │  │
    │  └─login //另一个实例
    │          index.js
    │          index.vue
    │          main.js
    │
    ├─scripts //包含各种常用配置，工具函数
    │  │  map.js
    │  │
    │  └─utils
    │          helper.js
    │
    ├─store //vuex仓库
    │  │  index.js
    │  │
    │  ├─index
    │  │      actions.js
    │  │      getters.js
    │  │      index.js
    │  │      mutation-types.js
    │  │      mutations.js
    │  │      state.js
    │  │
    │  └─user
    │          actions.js
    │          getters.js
    │          index.js
    │          mutation-types.js
    │          mutations.js
    │          state.js
    │
    └─styles //样式统一配置
        │  components.less
        │
        ├─animation
        │      index.less
        │      slide.less
        │
        ├─base
        │      index.less
        │      style.less
        │      var.less
        │      widget.less
        │
        └─common
                index.less
                reset.less
                style.less
                transition.less

总结：
项目的目录结构很重要，因为目录结构能体现很多东西，怎么规划目录结构可能每个人有自己的理解，但是按照一定的规范去进行目录的设计，能让项目整个架构看起来更为简洁，更加易用



二十七、vue要做权限管理该怎么做？如果控制到按钮级别的权限怎么做？

Vue2 面试题_第46张图片

1. 是什么

权限是对特定资源的访问许可，所谓权限控制，也就是确保用户只能访问到被分配的资源

而前端权限归根结底是请求的发起权，请求的发起可能有下面两种形式触发：

  • 页面加载触发
  • 页面上的按钮点击触发

总的来说，所有的请求发起都触发自前端路由或视图

所以我们可以从这两方面入手，对触发权限的源头进行控制，最终要实现的目标是：

  • 路由方面，用户登录后只能看到自己有权访问的导航菜单，也只能访问自己有权访问的路由地址，否则将跳转 4xx 提示页
  • 视图方面，用户只能看到自己有权浏览的内容和有权操作的控件
  • 最后再加上请求控制作为最后一道防线，路由可能配置失误，按钮可能忘了加权限，这种时候请求控制可以用来兜底，越权请求将在前端被拦截

2. 如何做

前端权限控制可以分为四个方面：

  • 接口权限
  • 按钮权限
  • 菜单权限
  • 路由权限

⑴. 接口权限

接口权限目前一般采用jwt的形式来验证，没有通过的话一般返回401，跳转到登录页面重新进行登录

登录完拿到token，将token存起来，通过axios请求拦截器进行拦截，每次请求的时候头部携带token

⑵. 路由权限控制
  • 初始化即挂载全部路由，并且在路由上标记相应的权限信息，每次路由跳转前做校验
  • 初始化的时候先挂载不需要权限控制的路由，比如登录页，404等错误页。如果用户通过URL进行强制访问，则会直接进入404，相当于从源头上做了控制
    登录后，获取用户的权限信息，然后筛选有权限访问的路由，在全局路由守卫里进行调用addRoutes添加路由

⑶. 菜单权限

菜单权限可以理解成将页面与理由进行解耦

  • 菜单与路由分离，菜单由后端返回
  • 菜单和路由都由后端返回

⑷. 按钮权限
  • 按钮权限也可以用v-if判断
  • 通过自定义指令进行按钮权限的判断


二十八、Vue项目中你是如何解决跨域的呢？

Vue2 面试题_第47张图片

1. 跨域是什么

跨域本质是浏览器基于同源策略的一种安全手段
同源策略（Sameoriginpolicy），是一种约定，它是浏览器最核心也最基本的安全功能

所谓同源（即指在同一个域）具有以下三个相同点

  • 协议相同（protocol）
  • 主机相同（host）
  • 端口相同（port）

反之非同源请求，也就是协议、端口、主机其中一项不相同的时候，这时候就会产生跨域

一定要注意跨域是浏览器的限制，你用抓包工具抓取接口数据，是可以看到接口已经把数据返回回来了，只是浏览器的限制，你获取不到数据。用postman请求接口能够请求到数据。这些再次印证了跨域是浏览器的限制。


2. 如何解决

解决跨域的方法有很多，下面列举了三种：

  • JSONP
  • CORS
  • Proxy
⑴. CORS

CORS （Cross-Origin Resource Sharing，跨域资源共享）是一个系统，它由一系列传输的HTTP头组成，这些HTTP头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应

CORS 实现起来非常方便，只需要增加一些 HTTP 头，让服务器能声明允许的访问来源

只要后端实现了 CORS，就实现了跨域
Vue2 面试题_第48张图片


⑵. Proxy

代理（Proxy）也称网络代理，是一种特殊的网络服务，允许一个（一般为客户端）通过这个服务与另一个网络终端（一般为服务器）进行非直接的连接。一些网关、路由器等网络设备具备网络代理功能。一般认为代理服务有利于保障网络终端的隐私或安全，防止攻击

方案一：

如果是通过vue-cli脚手架工具搭建项目，我们可以通过webpack为我们起一个本地服务器作为请求的代理对象

通过该服务器转发请求至目标服务器，得到结果再转发给前端，但是最终发布上线时如果web应用和接口服务器不在一起仍会跨域

在vue.config.js文件，新增以下代码

amodule.exports = {
    devServer: {
        host: '127.0.0.1',
        port: 8084,
        open: true,// vue项目启动时自动打开浏览器
        proxy: {
            '/api': { // '/api'是代理标识，用于告诉node，url前面是/api的就是使用代理的
                target: "http://xxx.xxx.xx.xx:8080", //目标地址，一般是指后台服务器地址
                changeOrigin: true, //是否跨域
                pathRewrite: { // pathRewrite 的作用是把实际Request Url中的'/api'用""代替
                    '^/api': "" 
                }
            }
        }
    }
}

通过axios发送请求中，配置请求的根路径

axios.defaults.baseURL = '/api'

方案二：
此外，还可通过服务端实现代理请求转发

以express框架为例

var express = require('express');
const proxy = require('http-proxy-middleware')
const app = express()
app.use(express.static(__dirname + '/'))
app.use('/api', proxy({ target: 'http://localhost:4000', changeOrigin: false
                      }));
module.exports = app

方案三：
通过配置nginx实现代理

server {
    listen    80;
    # server_name www.josephxia.com;
    location / {
        root  /var/www/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
    location /api {
        proxy_pass  http://127.0.0.1:3000;
        proxy_redirect   off;
        proxy_set_header  Host       $host;
        proxy_set_header  X-Real-IP     $remote_addr;
        proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
    }
}


二十九、vue项目本地开发完成后部署到服务器后报404是什么原因呢？

Vue2 面试题_第49张图片

1. 如何部署

前后端分离开发模式下，前后端是独立布署的，前端只需要将最后的构建物上传至目标服务器的web容器指定的静态目录下即可

我们知道vue项目在构建后，是生成一系列的静态文件

常规布署我们只需要将这个目录上传至目标服务器即可

// scp 上传 user为主机登录用户，host为主机外网ip, xx为web容器静态资源路径
scp dist.zip user@host:/xx/xx/xx

让web容器跑起来，以nginx为例

server {
  listen  80;
  server_name  www.xxx.com;

  location / {
    index  /data/dist/index.html;
  }
}

配置完成记得重启nginx

// 检查配置是否正确
nginx -t 

// 平滑重启
nginx -s reload

操作完后就可以在浏览器输入域名进行访问了

当然上面只是提到最简单也是最直接的一种布署方式

什么自动化，镜像，容器，流水线布署，本质也是将这套逻辑抽象，隔离，用程序来代替重复性的劳动，本文不展开

2. 404问题

我们先还原一下场景：

vue项目在本地时运行正常，但部署到服务器中，刷新页面，出现了404错误
先定位一下，HTTP 404 错误意味着链接指向的资源不存在

问题在于为什么不存在？且为什么只有history模式下会出现这个问题？

⑴. 为什么history模式下有问题

Vue是属于单页应用（single-page application）

而SPA是一种网络应用程序或网站的模型，所有用户交互是通过动态重写当前页面，前面我们也看到了，不管我们应用有多少页面，构建物都只会产出一个index.html

现在，我们回头来看一下我们的nginx配置

server {
  listen  80;
  server_name  www.xxx.com;

  location / {
    index  /data/dist/index.html;
  }
}

可以根据 nginx 配置得出，当我们在地址栏输入 www.xxx.com 时，这时会打开我们 dist 目录下的 index.html 文件，然后我们在跳转路由进入到 www.xxx.com/login

关键在这里，当我们在 website.com/login 页执行刷新操作，nginx location 是没有相关配置的，所以就会出现 404 的情况


⑵. 为什么hash模式下没有问题

router hash 模式我们都知道是用符号#表示的，如 website.com/#/login, hash 的值为 #/login

它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对服务端完全没有影响，因此改变 hash 不会重新加载页面

hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 website.com/#/login 只有 website.com 会被包含在请求中 ，因此对于服务端来说，即使没有配置location，也不会返回404错误


3. 解决方案

看到这里我相信大部分同学都能想到怎么解决问题了，

产生问题的本质是因为我们的路由是通过JS来执行视图切换的，

当我们进入到子路由时刷新页面，web容器没有相对应的页面此时会出现404

所以我们只需要配置将任意页面都重定向到 index.html，把路由交由前端处理

对nginx配置文件.conf修改，添加try_files $uri $uri/ /index.html;

server {
  listen  80;
  server_name  www.xxx.com;

  location / {
    index  /data/dist/index.html;
    try_files $uri $uri/ /index.html;
  }
}

修改完配置文件后记得配置的更新

nginx -s reload

这么做以后，你的服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件

为了避免这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})

关于后端配置方案还有：Apache、nodejs等，思想是一致的，这里就不展开述说了



三十、你是怎么处理vue项目中的错误的？

Vue2 面试题_第50张图片

1. 错误类型

在Vue 中，则是定义了一套对应的错误处理规则给到使用者，且在源代码级别，对部分必要的过程做了一定的错误处理。

主要的错误来源包括：

  • 后端接口错误
  • 代码中本身逻辑错误

2. 如何处理

⑴. 后端接口错误

通过axios的interceptor实现网络请求的response先进行一层拦截

apiClient.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    if (error.response.status == 401) {
      router.push({ name: "Login" });
    } else {
      message.error("出错了");
      return Promise.reject(error);
    }
  }
);

⑵. 代码逻辑问题

全局设置错误处理

设置全局错误处理函数

Vue.config.errorHandler = function (err, vm, info) {
  // handle error
  // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
  // 只在 2.2.0+ 可用
}

生命周期钩子

errorCaptured是 2.5.0 新增的一个生命钩子函数，当捕获到一个来自子孙组件的错误时被调用

(err: Error, vm: Component, info: string) => ?boolean

此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播

参考官网，错误传播规则如下：

  • 默认情况下，如果全局的 config.errorHandler 被定义，所有的错误仍会发送它，因此这些错误仍然会向单一的分析服务的地方进行汇报
  • 如果一个组件的继承或父级从属链路中存在多个 errorCaptured 钩子，则它们将会被相同的错误逐个唤起。
  • 如果此 errorCaptured 钩子自身抛出了一个错误，则这个新错误和原本被捕获的错误都会发送给全局的 config.errorHandler
  • 一个 errorCaptured 钩子能够返回 false 以阻止错误继续向上传播。本质上是说“这个错误已经被搞定了且应该被忽略”。它会阻止其它任何会被这个错误唤起的 errorCaptured 钩子和全局的 config.errorHandler

  • handleError在需要捕获异常的地方调用，首先获取到报错的组件，之后递归查找当前组件的父组件，依次调用errorCaptured 方法，在遍历调用完所有 errorCaptured 方法或errorCaptured 方法有报错时，调用 globalHandleError 方法
  • globalHandleError调用全局的 errorHandler 方法，再通过logError判断环境输出错误信息
  • invokeWithErrorHandling更好的处理异步错误信息
  • logError判断环境，选择不同的抛错方式。非生产环境下，调用warn方法处理错误



未完待续…

你可能感兴趣的:(前端面试题,前端)

  • 代码审计学习路线 白帽子技术分享 python网络安全代码审计
    学习代码审计分以下四部分一.编程语言1.前端语言html/javascript/dom元素使用，主要是为了挖掘xss漏洞，jquery主要写一些涉及到CSRF脚本使用的或者DOM型XSS，JSON劫持等2.后端语言基础语法要知道，例如变量类型,常量,数组(python是列表,元组,字典)，对象,类的调用,引用等，MVC设计模式要清楚,因为大部分目标程序都是基于MVC写的，包括不限于php，pyth
  • 前端——vue代码结构 Alisazxy 前端
    默认代码结构README.md---项目说明文件package.json---定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。package-lock.json---会自动为npm修改node_modules树或任何操作而生成package.jsonLICENSE---开源协议index.html---项目默认首页模板.postcssrc.js---是对pos
  • Webpack 模块加载、动态引入机制源码解读 AIGC小陈 正则表达式javascript开发语言react.js前端
    今天的文章简单探讨一下Vue和React的不同。本人Vue2和React都用过，但不熟悉Vue3，没用它做过项目。其实我对这两大框架也没有认真钻研过它们的细节，也就是工作上用它们写一些简单业务，或偶尔看看相关的博客文章，但还是有一些浅显的认识的，写下来记录一下。Vue和React都是用于构建UI界面的流行框架。它们的哲学也有很多相似的地方，我们可以认为这些特性是流行前端框架的一个趋势。它们是：组件
  • 探索前端可观察性：如何使用Telemetry提高用户体验 桂月二二 前端ux
    随着前端应用变得日益复杂，可观察性（Observability）在前端开发中的重要性正逐步显现。通过实现Telemetry（遥测）功能，开发者能够收集、分析应用的运行数据，从而更好地了解用户行为、定位问题，并持续优化用户体验。什么是Telemetry？**Telemetry（遥测）**是指通过自动化手段远程采集系统或应用运行时的状态数据和行为信息。这些数据通常包括性能指标、错误日志、用户交互事件等
  • npm启动前端项目时报错（vue) error:0308010C:digital envelope routines::unsupported 华如锦 开发本地环境配置jsjava前端npmvue.jsnode.jsjava
    vue启动项目时，npmrunserve报下面的错：error:0308010C:digitalenveloperoutines::unsupportedatnewHash(node:internal/crypto/hash:67:19)atObject.createHash(node:crypto:133:10)atFSReqCallback.readFileAfterClose[asoncom
  • JavaScript-黑马程序员-前端零基础 羊羊的代码笔记本 javascript前端html
    目录1.初识JavaScript1.1浏览器执行js1.2js的组成1.3js三种书写方式1.4JavaScript输入输出语句2.变量2.1变量是一个装东西的容器2.2变量是使用2.3更新变量2.4声明多个变量1.初识JavaScript是一种高级编程语言1.1浏览器执行js浏览器分成两部分：渲染引擎和js引擎渲染引擎：用来解析HTML和CSS，俗称内核js引擎：也称为js解释器。用来读取网页中
  • .net core + vue 搭建前后端分离的框架 战族狼魂 C#.netcore
    目录步骤一：创建.NETCore后端项目步骤二：创建Vue.js前端项目步骤三：集成后端和前端项目步骤一：创建.NETCore后端项目安装.NETCoreSDK：确保你的开发环境中已安装了最新版本的.NETCoreSDK。你可以从.NET下载页面获取最新版本。创建.NETCoreWebAPI项目：在命令行或者通过VisualStudio等集成开发环境，创建一个新的.NETCoreWebAPI项目。
  • 前后端交互的方式能分为几种 阿贾克斯的黎明 javajava
    前后端交互主要可以分为以下几类：**一、HTTP请求交互**1.GET请求：用于从服务器获取资源，通常将参数放在URL中进行传递。特点是简单、快速，但不太适合传递大量数据或敏感信息，因为参数会在URL中显示。GET请求：用于获取商品列表、商品详情、用户订单状态等信息。例如，用户浏览商品页面时，前端通过GET请求从服务器获取商品的图片、价格、描述等数据进行展示。2.POST请求：用于向服务器提交数据
  • Vue3 结合 .NetCore WebApi 前后端分离跨域请求简易实例 醉の虾 .netcorevue.js前端
    1、本地安装Vue3环境参考：VUE3中文文档-快速上手注意：初始安装vue时，需要安装router，否则后续也要安装2、安装axios组件比如：npminstallaxios@latest或pnpminstallaxios@latest3、设置跨域请求代理打开vue3项目根目录的vite.config.js文件，插入跨域请求设置这样实现的效果，假设你的前端域名是http://localhost:
  • （尚硅谷 Java 学习 B 站大学版）Day 13 面向对象 方法 亢从文_Jackson java学习开发语言
    4-5类的成员之二：方法（Method）一、“万事万物皆对象”**：（理解）1、在Java语言范畴中，我们都将功能、结构等封装到类中，通过类的实例化，来调用具体的功能结构>Scanner,String等>文件：File>网络资源：URL2、涉及到java语言与前端html、后端数据库交互时，前后端的结构在Java层面交互时，都体现为类、对象二、内存解析说明1、引用类型的变量，只可能存储两类值：nu
  • 跨平台的客户端gui到底是选“原生”还是web 扎量丙不要犟 前端rustjavascripttaurielectronqtc++
    我们讨论的是客户端的“前端”gui部分是选“原生”还是“web”，而不是讨论客户端用“js”还是“原生”。为什么这么说呢？我们应该把客户端也分为“前端”和“后端”，如果客户端没有“后端”，那么不在讨论范围。我们看一下“前端”的定义：（Front-End）通常指与用户直接交互的部分，即用户看到、操作并与之互动的界面。它涵盖了视觉设计、交互逻辑，主要关注用户体验（UserExperience,UX）和
  • 首度揭秘：这款GitHub 3400星的播放器是如何开发出来的 字节跳动技术范儿 java编程语言字节跳动人工智能软件开发
    在字节跳动，有这样一支技术团队：他们开源的项目在GitHub摘得3400多颗星，除了字节跳动，不少其他互联网公司也在用他们的产品；他们经历过不少极限操作，《囧妈》2020年春节期间网络首播的一套技术解决方案，他们在36小时内就完成了；他们拥有交叉领域稀有技能，据说是「前端里最懂多媒体的，多媒体里最懂前端的」。他们，就是字节跳动的web多媒体团队。GitHub3400星的前端开源播放器Web多媒体团
  • Web 开发入门：从前端到后端的全栈开发探索 HelloZheQ 前端
    Web开发是指创建和维护通过网络浏览器访问的应用程序。Web开发涉及到的领域非常广泛，涵盖了前端、后端、数据库等多个技术栈。在这篇文章中，我们将详细介绍Web开发的基本概念、前端和后端的技术、全栈开发的特点以及如何开始从事Web开发。1.Web开发简介Web开发是构建和维护网站或Web应用程序的过程，分为前端开发、后端开发和全栈开发。前端开发负责用户界面和交互体验，后端开发负责服务器端的逻辑处理、
  • 微前端框架qiankun剖析 浮游本尊 前端框架前端javascript
    一、single-spa简介要了解qiankun的实现机制，那我们不得不从其底层依赖的single-spa说起。随着微前端的发展，我们看到在这个领域之中出现了各式各样的工具包和框架来帮助我们方便快捷的实现自己的微前端应用。在发展早期，single-spa可以说是独树一帜，为我们提供了一种简便的微前端路由工具，大大降低了实现一个微前端应用的成本。我们来看一下一个典型single-spa微前端应用的架
  • 前端调试技巧：从 Console 到 Chrome DevTools 的进阶指南 技术出海录 人工智能前端React
    作为前端开发者，你可能每天都在和Bug打交道。有时候一个简单的问题可能会耗费几个小时，而掌握正确的调试技巧可以大大提高解决问题的效率。今天，我就来分享一些在实际工作中常用的调试技巧。Console的高级用法除了常见的console.log，Console还有很多强大的功能：//1.使用console.table展示数组或对象constusers=[{id:1,name:'Alice',role:'
  • 深入剖析 HTML5 新特性：语义化标签和表单控件完全指南 吴师兄大模型 html5前端html语义化标签表单控件HTML5编程
    系列文章目录01-从零开始学HTML：构建网页的基本框架与技巧02-HTML常见文本标签解析：从基础到进阶的全面指南03-HTML从入门到精通：链接与图像标签全解析04-HTML列表标签全解析：无序与有序列表的深度应用05-HTML表格标签全面解析：从基础到高级优化技巧06-HTML表单深度解析：GET和POST提交方法07-HTML表单控件类型大全：文本框、密码框、文件上传全掌握08-前端表单验
  • 手写防抖、节流函数 不点外卖 前端javascript
    是什么本质上是优化高频率执行代码的一种手段如：浏览器的resize、scroll、keypress、mousemove等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能为了优化体验，需要对这类事件进行调用次数的限制，对此我们就可以采用防抖（debounce）和节流（throttle）的方式来减少调用频率#定义防抖函数防抖是指在事件被触发n秒后再执行回调，如果在这n秒内
  • JavaScript中的防抖节流函数为什么要用call或apply去执行fn EuForth javascript开发语言ecmascriptJavaScript
    防抖（Debounce）和节流（Throttle）是前端开发中常用的性能优化技术，它们可以限制函数的执行频率，有效地控制事件触发的次数。在实际应用中，经常会将防抖节流函数与回调函数一起使用，以避免频繁触发导致的性能问题。在JavaScript中，有时我们会使用call或apply方法来执行回调函数。本文将详细解释防抖节流函数为什么要用call或apply去执行回调函数，并提供相应的源代码示例。了解
  • Tauri应用开发实践指南（5）—Tauri 集成本地数据库 前端徐徐 Tauri应用开发实践指南数据库前端
    本文首发于微信公众号：前端徐徐。欢迎关注，获取更多前端技能分享。前言Tauri是一个构建跨平台桌面应用程序的框架，利用Web技术构建前端，并使用Rust构建后端。它以其小巧的体积和高性能受到开发者的欢迎。在开发过程中，我们常常需要数据本地持久化，所以会需要与本地数据库进行交互。方案比较在Tauri中集成本地数据库有多种方案，常见的包括：SQLite通过直接绑定使用第三方数据库库Tauri插件：ta
  • iconv-lite：一个库搞定所有字符编码问题？ 前端徐徐 宝藏工具electron
    本文首发同名微信公众号：前端徐徐大家好，我是徐徐。今天跟大家分享一款强大的字符编码转换库：iconv-lite。前言在全球化的开发环境中，处理不同字符编码已成为许多应用程序的关键需求。无论你是在开发需要支持多语言的应用，还是需要处理来自不同源的文本数据，一个高效且可靠的字符编码转换工具可以大大提升你的开发效率。今天，我们要介绍的是iconv-lite这个纯JavaScript实现的字符编码转换库，
  • Tauri应用开发实践指南（1）— Tauri 怎么样 前端徐徐 Tauri应用开发实践指南前端前端框架
    本文首发于微信公众号：前端徐徐。欢迎关注，获取更多前端技能分享。Tarui是什么Tauri是一个用于构建针对所有主要桌面和移动平台的小型、高速二进制文件的框架。开发人员可以集成任何能编译为HTML、JavaScript和CSS的前端框架来构建用户体验,同时在需要时利用诸如Rust、Swift和Kotlin等语言进行后端逻辑开发。官网：https://tauri.appTarui架构Tauri的整体
  • javascript-前后端交互模式-简介 gaog2zh #javascirptjavascript前后端交互
    javascript-前后端交互模式-简介目录文章目录1、相关知识2、异步接口调用方式3、URL地址2.1、传统形式的URL2.2、Restful风格的URL2.2.1、http请求方式2.2.3、示例：***后记***：内容图示0-1：随着前后端分离，前后端交互技术不断更新，下面我们看下前后端交互相关知识。1、相关知识前端通过相关接口发送请求，后端接收请求，处理返回响应结果，前端接收响应结果，完
  • axios 登录后设置header_axios如何利用promise无痛刷新token weixin_39648430 axios登录后设置header
    需求最近遇到个需求：前端登录后，后端返回token和token有效时间，当token过期时要求用旧token去获取新的token，前端需要做到无痛刷新token，即请求刷新token时要做到用户无感知。需求解析当用户发起一个请求时，判断token是否已过期，若已过期则先调refreshToken接口，拿到新的token后再继续执行之前的请求。这个问题的难点在于：当同时发起多个请求，而刷新token
  • 一文解锁 NVM：Node版本随意切换不再发愁 一个小白的小白人 前端nvmnode.js前端node.js
    前言搞前端开发的朋友肯定都对Node.js不陌生，它在咱们的工作里，就像得力助手，没了它，很多工作都没法顺利开展。但Node.js更新得那叫一个快，新特性、新优化不断冒出来。这就好比你本来开着一辆顺手的车，开得正稳呢，突然厂家说出了新款，性能更强，功能更多，你心里肯定痒痒，想试试新的。可实际情况是，每个项目就像不同的乘客，需求不一样。我之前做一个老项目维护，它就像个念旧的乘客，只认Node.js的
  • 前端必知必会-Vue 简介 编程岁月 vue.js前端javascript
    文章目录Vue简介Vue是一个JavaScript框架为什么要学习Vue？OptionsAPI我的第一页文本插值文本插值中的JavaScript总结Vue简介Vue是一个JavaScript框架。可以使用标记将其添加到HTML页面。Vue使用指令扩展HTML属性，并使用表达式将数据绑定到HTML。Vue是一个JavaScript框架Vue是一个用JavaScript编写的前端JavaScript框
  • axios如何利用promise无痛刷新token 前端 贾公子 前端
    目录需求需求解析实现思路方法一：方法二：两种方法对比实现封装axios基本骨架instance.interceptors.response.use拦截实现问题和优化如何防止多次刷新token同时发起两个或以上的请求时，其他接口如何重试最后完整代码需求最近遇到个需求：前端登录后，后端返回token和token有效时间，当token过期时要求用旧token去获取新的token，前端需要做到无痛刷新to
  • 图书管理系统 Axios 源码__获取图书列表 还是鼠鼠 javascriptbootstrapajax前端
    目录核心功能源码介绍1.获取图书列表技术要点适用人群本项目是一个基于HTML+Bootstrap+JavaScript+Axios开发的图书管理系统，可用于添加、编辑、删除和管理图书信息，适合前端开发者学习前端交互设计、Axios数据请求以及Bootstrap样式布局。核心功能图书列表渲染通过Axios发送GET请求获取服务器上的图书数据。渲染数据到HTML表格，展示书籍的名称、作者、出版社等信息
  • Qwen 模型自动构建知识图谱，生成病例 + 评价指标优化策略 2301_79306982 ai千问语言模型人工智能
    关于数据库和检索方式的选择AIMedicalConsultantforVisualQuestionAnswering(VQA)系统：更适合在前端使用向量数据库（如FAISS）结合关系型数据库来实现图像和文本的检索与存储。因为在VQA场景中，你需要对患者上传的图像或文本症状进行语义向量化，以便快速查找相似病例或相关医学图像内容；同时用关系型数据库维护患者基础信息和简单的交互记录即可。AI-Power
  • 28岁开始零基础学前端，这些血的教训你一定要避免 2501_90336583 前端
    写了一个Vue动态表单组件，发布到NPM上。模仿Vue1.0版本写了一个MiniVue，这让我对Vue的理解达到了源码级别。写了几篇关于Vue的文章。计算机理论知识计算机理论知识决定了一个程序员的天花板（在国内还得加上英语）。数据结构与算法算法看了《剑指offer题解》、《Leetcode题解》这两本书，还是挺有用的，也有刷到的题面试正好碰上了的。编译原理、计算机原理由于编译原理和计算机原理是看的
  • Sentinel 实现 pull 模式规则持久化 我心向阳iu #SentinelJava面试知识点精讲sentineljava数据库
    文章目录导言规则管理模式pull模式push模式Sentinelpull模式规则持久化一、修改服务1.引入依赖2.配置nacos地址二、修改sentinel-dashboard源码2.修改nacos依赖3.添加nacos支持4.修改nacos地址5.配置nacos数据源6.修改前端页面7.重新编译、打包项目8.启动导言sentinel的所有规则默认都是内存存储，重启后所有规则都会丢失。在生产环境下
  • jdk tomcat 环境变量配置 Array_06 javajdktomcat
    Win7 下如何配置java环境变量 1。准备jdk包，win7系统，tomcat安装包（均上网下载即可） 2。进行对jdk的安装，尽量为默认路径（但要记住啊！！以防以后配置用。。。） 3。分别配置高级环境变量。   电脑-->右击属性-->高级环境变量-->环境变量。 分别配置 : path    &nbs
  • Spring调SDK包报java.lang.NoSuchFieldError错误 bijian1013 javaspring
            在工作中调另一个系统的SDK包，出现如下java.lang.NoSuchFieldError错误。 org.springframework.web.util.NestedServletException: Handler processing failed; nested exception is java.l
  • LeetCode[位运算] - #136 数组中的单一数 Cwind java题解位运算LeetCodeAlgorithm
    原题链接：#136 Single Number 要求： 给定一个整型数组，其中除了一个元素之外，每个元素都出现两次。找出这个元素 注意：算法的时间复杂度应为O(n)，最好不使用额外的内存空间 难度：中等 分析： 题目限定了线性的时间复杂度，同时不使用额外的空间，即要求只遍历数组一遍得出结果。由于异或运算 n XOR n = 0, n XOR 0 = n，故将数组中的每个元素进
  • qq登陆界面开发 15700786134 qq
    今天我们来开发一个qq登陆界面，首先写一个界面程序，一个界面首先是一个Frame对象，即是一个窗体。然后在这个窗体上放置其他组件。代码如下： public class First {         public void initul(){        jf=ne
  • Linux的程序包管理器RPM 被触发 linux
    在早期我们使用源代码的方式来安装软件时，都需要先把源程序代码编译成可执行的二进制安装程序，然后进行安装。这就意味着每次安装软件都需要经过预处理-->编译-->汇编-->链接-->生成安装文件--> 安装，这个复杂而艰辛的过程。为简化安装步骤，便于广大用户的安装部署程序，程序提供商就在特定的系统上面编译好相关程序的安装文件并进行打包，提供给大家下载，我们只需要根据自己的
  • socket通信遇到EOFException 肆无忌惮_ EOFException
    java.io.EOFException at java.io.ObjectInputStream$PeekInputStream.readFully(ObjectInputStream.java:2281) at java.io.ObjectInputStream$BlockDataInputStream.readShort(ObjectInputStream.java:
  • 基于spring的web项目定时操作 知了ing javaWeb
    废话不多说，直接上代码，很简单 配置一下项目启动就行 1，web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="h
  • 树形结构的数据库表Schema设计 矮蛋蛋 schema
    原文地址： http://blog.csdn.net/MONKEY_D_MENG/article/details/6647488     程序设计过程中，我们常常用树形结构来表征某些数据的关联关系，如企业上下级部门、栏目结构、商品分类等等，通常而言，这些树状结构需要借助于数据库完成持久化。然而目前的各种基于关系的数据库，都是以二维表的形式记录存储数据信息，
  • maven将jar包和源码一起打包到本地仓库 alleni123 maven
    http://stackoverflow.com/questions/4031987/how-to-upload-sources-to-local-maven-repository <project> ... <build> <plugins> <plugin> <groupI
  • java IO操作 与 File 获取文件或文件夹的大小，可读，等属性！！！ 百合不是茶
    类 File File是指文件和目录路径名的抽象表示形式。 1，何为文件： 标准文件（txt doc mp3...） 目录文件（文件夹） 虚拟内存文件   2，File类中有可以创建文件的 createNewFile（）方法,在创建新文件的时候需要try{} catch(）{}因为可能会抛出异常；也有可以判断文件是否是一个标准文件的方法isFile();这些防抖都
  • Spring注入有继承关系的类（2） bijian1013 javaspring
    被注入类的父类有相应的属性，Spring可以直接注入相应的属性，如下所例：1.AClass类 package com.bijian.spring.test4; public class AClass { private String a; private String b; public String getA() { retu
  • 30岁转型期你能否成为成功人士 bijian1013 成长励志
            很多人由于年轻时走了弯路，到了30岁一事无成，这样的例子大有人在。但同样也有一些人，整个职业生涯都发展得很优秀，到了30岁已经成为职场的精英阶层。由于做猎头的原因，我们接触很多30岁左右的经理人，发现他们在职业发展道路上往往有很多致命的问题。在30岁之前，他们的职业生涯表现很优秀，但从30岁到40岁这一段，很多人
  • 【Velocity四】Velocity与Java互操作 bit1129 velocity
    Velocity出现的目的用于简化基于MVC的web应用开发，用于替代JSP标签技术，那么Velocity如何访问Java代码.本篇继续以Velocity三http://bit1129.iteye.com/blog/2106142中的例子为基础，      POJO    package com.tom.servlets; public
  • 【Hive十一】Hive数据倾斜优化 bit1129 hive
    什么是Hive数据倾斜问题   操作：join,group by,count distinct 现象：任务进度长时间维持在99%（或100%），查看任务监控页面，发现只有少量（1个或几个）reduce子任务未完成；查看未完成的子任务，可以看到本地读写数据量积累非常大，通常超过10GB可以认定为发生数据倾斜。 原因：key分布不均匀 倾斜度衡量：平均记录数超过50w且
  • 在nginx中集成lua脚本：添加自定义Http头，封IP等 ronin47 nginx lua csrf
    Lua是一个可以嵌入到Nginx配置文件中的动态脚本语言，从而可以在Nginx请求处理的任何阶段执行各种Lua代码。刚开始我们只是用Lua 把请求路由到后端服务器，但是它对我们架构的作用超出了我们的预期。下面就讲讲我们所做的工作。 强制搜索引擎只索引mixlr.com Google把子域名当作完全独立的网站，我们不希望爬虫抓取子域名的页面，降低我们的Page rank。 location /{
  • java-3.求子数组的最大和 bylijinnan java
    package beautyOfCoding; public class MaxSubArraySum { /** * 3.求子数组的最大和 题目描述： 输入一个整形数组，数组里有正数也有负数。 数组中连续的一个或多个整数组成一个子数组，每个子数组都有一个和。 求所有子数组的和的最大值。要求时间复杂度为O(n)。 例如输入的数组为1, -2, 3, 10, -4,
  • Netty源码学习-FileRegion bylijinnan javanetty
    今天看org.jboss.netty.example.http.file.HttpStaticFileServerHandler.java 可以直接往channel里面写入一个FileRegion对象，而不需要相应的encoder： //pipeline（没有诸如“FileRegionEncoder”的handler）： public ChannelPipeline ge
  • 使用ZeroClipboard解决跨浏览器复制到剪贴板的问题 cngolon 跨浏览器复制到粘贴板Zero Clipboard
    Zero Clipboard的实现原理 Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上，这样其实点击的不是按钮而是 Flash ，这样将需要的内容传入Flash，再通过Flash的复制功能把传入的内容复制到剪贴板。 Zero Clipboard的安装方法 首先需要下载 Zero Clipboard的压缩包，解压后把文件夹中两个文件：ZeroClipboard.js
  • 单例模式 cuishikuan 单例模式
    第一种（懒汉，线程不安全）： public class Singleton {   2     private static Singleton instance;   3     pri
  • spring+websocket的使用 dalan_123
    一、spring配置文件 <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"    xmlns:xsi="http://www.w3.or
  • 细节问题：ZEROFILL的用法范围。 dcj3sjt126com mysql
    1、zerofill把月份中的一位数字比如1，2，3等加前导0 mysql> CREATE TABLE t1 (year YEAR(4), month INT(2) UNSIGNED ZEROFILL,    -> day
  • Android开发10——Activity的跳转与传值 dcj3sjt126com Android开发
    Activity跳转与传值，主要是通过Intent类，Intent的作用是激活组件和附带数据。   一、Activity跳转 方法一Intent intent = new Intent(A.this, B.class); startActivity(intent)   方法二Intent intent = new Intent();intent.setCla
  • jdbc 得到表结构、主键 eksliang jdbc 得到表结构、主键
    转自博客：http://blog.csdn.net/ocean1010/article/details/7266042 假设有个con DatabaseMetaData dbmd = con.getMetaData(); rs = dbmd.getColumns(con.getCatalog(), schema, tableName, null); rs.getSt
  • Android 应用程序开关GPS gqdy365 android
    要在应用程序中操作GPS开关需要权限： <uses-permission android:name="android.permission.WRITE_SECURE_SETTINGS" /> 但在配置文件中添加此权限之后会报错，无法再eclipse里面正常编译，怎么办？ 1、方法一：将项目放到Android源码中编译； 2、方法二：网上有人说cl
  • Windows上调试MapReduce zhiquanliu mapreduce
    1.下载hadoop2x-eclipse-plugin https://github.com/winghc/hadoop2x-eclipse-plugin.git 把 hadoop2.6.0-eclipse-plugin.jar 放到eclipse plugin 目录中。 2.下载 hadoop2.6_x64_.zip http://dl.iteye.com/topics/download/d2b
  • 如何看待一些知名博客推广软文的行为？ justjavac 博客
    本文来自我在知乎上的一个回答：http://www.zhihu.com/question/23431810/answer/24588621 互联网上的两种典型心态： 当初求种像条狗，如今撸完嫌人丑 当初搜贴像条犬，如今读完嫌人软 你为啥感觉不舒服呢？ 难道非得要作者把自己的劳动成果免费给你用，你才舒服？ 就如同 Google 关闭了 Gooled Reader，那是
  • sql优化总结 macroli sql
    为了是自己对sql优化有更好的原则性，在这里做一下总结，个人原则如有不对请多多指教。谢谢！   要知道一个简单的sql语句执行效率，就要有查看方式，一遍更好的进行优化。   一、简单的统计语句执行时间 declare @d datetime ---定义一个datetime的变量set @d=getdate() ---获取查询语句开始前的时间select user_id
  • Linux Oracle中常遇到的一些问题及命令总结 超声波 oraclelinux
    1.linux更改主机名   (1)#hostname oracledb　　　　临时修改主机名 (2) vi /etc/sysconfig/network 　　修改hostname (3) vi /etc/hosts　　　　　　　　修改IP对应的主机名   2.linux重启oracle实例及监听的各种方法 （注意操作的顺序应该是先监听，后数据库实例） &nbs
  • hive函数大全及使用示例 superlxw1234 hadoophive函数
      具体说明及示例参 见附件文档。     文档目录：   目录 一、关系运算： 4 1. 等值比较: = 4 2. 不等值比较: <> 4 3. 小于比较: < 4 4. 小于等于比较: <= 4 5. 大于比较: > 5 6. 大于等于比较: >= 5 7. 空值判断: IS NULL 5
  • Spring 4.2新特性-使用@Order调整配置类加载顺序 wiselyman spring 4
    4.1 @Order Spring 4.2 利用@Order控制配置类的加载顺序 4.2 演示 两个演示bean package com.wisely.spring4_2.order; public class Demo1Service { } package com.wisely.spring4_2.order; public class
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他