Java每日面试题_05

1、MVVM中,MVVM分别表示什么?作用是什么?

MVVM是Model-View-ViewModel的简写。它的本质就是MVC的改进版。

主要目的是分离视图和模型，再通过ViewModel视图模型将V和M连接起来。

模型Model发生变化，通过MVVM框架自动更新视图View的状态。

视图View发生变化，通过MVVM框架自动更新模型Model的数据。

2、简述什么是单页，以及单页的优缺点

单页面应用：就是只有一个Web主页面的应用,是加载单个HTML页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

单页面的优点:

1. 用户体验好，速度快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小
2. 前后端分离
3. 页面效果会比较酷炫(比如切换页面内容时的转场动画)

单页面的缺点:

1. 不利于seo
2. 导航不可用，如果一定要导航需要自行实现前进、后退。(由于是单页面不能用浏览器前进后退功能，所以需要自己建立堆栈管理)
3. 初次加载时耗时多
4. 页面复杂度提高很多

扩展：

spa:

单页面应用,指只有一个主页面的应用,浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端。

seo:搜索引擎优化

3、Vue中的src文件夹一般都是放置哪些文件/文件夹?

src目录为前端开发的源码目录。

1. assets：文件夹用来放置静态资源目录
2. components:功能组件
3. views:页面组件
4. router:路由文件
5. store:vuex的数据
6. app.vue:首页，初始化页面
7. main.js：入口文件

4、简述Vue中的生命周期函数(钩子函数)以及作用?

Vue实例从创建到销毁的过程，就是生命周期。

生命周期钩子函数共8个，分别是:

1. beforeCreate：初始化前
2. created：初始化完成，一般完成"页面加载成功后"的相关操作
3. beforeMount：挂载前，双向数据绑定前
4. mounted：挂载完成，双向数据绑定完成
5. beforeUpdate：更新前
6. updated：更新完成
7. beforeDestroy：销毁前
8. destroyed：销毁完成

5、前后台分离，跨域问题如何解决?

1. 使用Nginx代理：Nginx统一程序入口，通过Nginx分发到不同的服务。
2. JSONP，通过<script>标签请求接口，通过回调函数的方式传递跨域数据。
3. CORS，一个W3C标准，全称是"跨域资源共享"(Cross-origin resource sharing),CORS需要浏览器和服务器同时支持。所有浏览器都支持该功能。服务器需要单独配置使用@CrossOrigin或全局配置类

Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器

6、Vue-router作用是什么

Vue Router 是Vue.js官方的路由管理器

作用是:

1. 通过<router-link>完成组件的切换
2. 通过this.$route完成组件的传参
3. 通过this.$router.push 完成组件的跳转

7、Vue中父子组件之间的传值是怎么实现的?

1. 父组件向子组件传递，子组件使用props接收父组件传递的数据(自定义属性)
2. 子组件向父组件传值，子组件通过$emit()触发父组件的事件，父组件通过v-on绑定的函数接收值。(自定义事件)
3. 非父组件之间传值，使用公共文件。

8、Vue中，路由如何传参，如何获取路由传递的参数?

1. 方式1：请求参数,/user?id=123

   路由的路径

   <router-link to="/user?id=1234"></router-link>

   参数的获取:this.$route.query.name

2. 方式2：路由参数 /user/1234

   路由的路径

   <router-link to="/user/1234"></router-link>

   路由的配置：{path:'/user/id'}

   参数的获得：this.$route.params.id

9、Vuex怎么实现数据共享的?

1. vue整合vuex,在main.js文件中,vue以组件的方式导入store.js

2. 将数据存放到store.js的state区域，任何位置都可以引用。

3. 通过stroe.js的mutations可以对state区域的数据进行更新。

   通过读写最终达到数据的共享。

10、Vue全家桶有哪些?

Vue两大核心思想：组件化和数据驱动。组件化：把整体拆分为各个可以复用的个体；数据驱动：通过数据变化直接影响dom展示，避免dom操作

1. Vue-cli是快速构建这个单页应用的脚手架。
2. vue-router路由，组件之间的切换。
3. Vuex数据管理。
4. axios是一个http请求包，vue官网推荐使用axios进行http调用。(ajax操作)

11、Vue的导航守卫是什么?有什么用?

vue-router提供的导航钩子主要用来拦截导航，让它完成跳转或取消。有多种方式可以在路由导航发送时执行钩子：全局的、单个路由独享的、组件级别的。

1. 全局钩子

   router.beforeEach注册一个全局的before钩子

2. 某个路由独享的钩子

   在路由配置上直接定义beforeEnter钩子

3. 组件内的钩子

   beforeRouterEnter、beforeRouteUpdate、beforeRouteLeave，在路由组件内直接定义路由导航钩子

12、Vuex的五大核心属性是什么?

Vuex是一个专门为Vue.js应用设计的状态管理架构。

Vue有五个核心概念,state,getter,mutations,actions,modules。

state=>基本数据

getters=>从基本数据派生的数据

mutations=>提交更改数据的方法,同步!

actions=>像一个装饰器，包裹mutations，使之可以异步。

modules=>模块化Vuex

13、var、let、const用法和区别

var是es3中定义变量的关键字，定义全局变量

let是es6中新增的关键字，定义局部变量

const是定义常量

14、字符串的方法有哪些?各代表什么意思?

indexOf：返回字符串的索引

lastIndexOf：返回字符串的最后的索引

substr(i,v)：从第i个索引开始截取v个长度的字符

substring(i,v)：从第i个位置截取到第v个位置(不包含v)

length：获取字符串长度

charAt(i)：获取第i个位置的字符

Includes：返回布尔值，表示是否找到了参数字符串

statsWith：返回布尔值，表示参数字符串是否在原字符串的头部

endsWith：返回布尔值，表示参数字符串是否在原字符串的尾部。

15、Vue中有哪些指令?

v-if：条件判断。当得到结果为true时，所在的元素才会被渲染

v-model：是双向绑定，视图(View)和模式(Model)之间会互相影响。

v-on：用于给页面元素绑定事件

v-for：遍历数组

v-show：v-show只是简单地切换元素的CSS属性display

v-bind：绑定class样式

16、Vue中有哪些事件修饰符，各代表什么作用?

.stop //停止触发，阻止冒泡修饰符

.prevent //阻止事件发生，阻止事件默认行为

.capture //捕获

.self //只点自己身上才运行

.once //只执行一次

17、什么是计算属性?你是如何理解计算属性的?

• 计算属性本质就是一个有返回值的方法，在页面渲染时，可以把这个方法当成一个变量来使用。
• data区域中的数据没有发生更改时，计算属性直接读取缓存。

18、什么是js的冒泡事件?

当前标签的某事件触发后，将依次触发当前标签父标签对应的事件，直到页面的跟标签。

19、import、export导入导出

ES6标准中,Module模块功能主要由两个命令构成：import和export。

export用于对外输出本模块(一个文件可以理解为一个模块)变量的接口

import用于在一个模块中加载另一个含有export接口的模块