【无标题】

1. 对于MVVM的理解

MVVM是一种软件架构模式，它将应用程序分为三个部分：

• 模型（Model）
• 视图（View）
• 视图模型（ViewModel）

其中：

• 模型表示应用程序的数据和业务逻辑，
• 视图表示用户界面
• 视图模型则是连接模型和视图的桥梁，负责将模型中的数据转换为视图可以显示的格式，并将视图中的用户操作转换为模型可以处理的格式。

MVVM的核心思想是数据绑定，即将视图和视图模型绑定在一起，使得视图中的数据和用户操作可以自动同步到视图模型中，而视图模型中的数据变化也可以自动同步到视图中。这种数据绑定的机制可以大大简化应用程序的开发和维护工作，提高开发效率和代码质量。

总之，MVVM是一种基于数据绑定的软件架构模式，它可以帮助开发人员更好地组织和管理应用程序的代码，提高开发效率和代码质量。

2. 请详细说下你对vue生命周期的理解

Vue中有许多内置函数，是随着组件生命周期阶段自动执行的 。我们可以通过钩子函数来在特定的某个生命周期的阶段执行特定的操作。
生命周期可以分为四个阶段：

1. 初始化阶段
   beforeCreate：组件实例创建前
   created：组件实例创建完毕
2. 挂载阶段
   beforeMount：挂在前
   mounted：挂载完毕
3. 更新阶段
   beforeUpdate：更新前的钩子
   updated：更新后的钩子
4. 卸载阶段
   beforeDestroy：组件销毁前
   destroyed：组件销毁完毕

3. Vue组件间的数据传递方式有哪些

1. Props：父组件通过props向子组件传递数据，子组件通过props接收数据。这种方式适用于父子组件之间的数据传递。
2. 自定义事件：子组件通过$emit触发自定义事件，父组件通过v-on监听自定义事件并处理数据。这种方式适用于子组件向父组件传递数据。
3. Vuex：Vuex是Vue的状态管理库，可以将数据存储在全局的store中，各个组件可以通过store来访问和修改数据。这种方式适用于多个组件之间需要共享数据的情况。
4. refs：父组件可以通过refs获取子组件的实例，从而直接访问和修改子组件的数据。这种方式适用于父组件需要直接操作子组件数据的情况。
5. parent和children：组件实例可以通过parent和children访问父组件和子组件的实例，从而直接访问和修改父子组件的数据。这种方式适用于父子组件之间需要直接通信的情况。
6. 消息订阅与发布。这种方式适用于任意组件间传值。

4. Vue的路由实现：hash模式 和 history模式原理

vue-router原理

Vue-router的原理可以分为两个部分：

• 路由匹配
• 路由跳转

1. 路由匹配
   路由匹配是指根据URL路径匹配到对应的路由规则，然后将路由规则中定义的参数传递给组件。Vue-router支持多种路由匹配模式，包括精确匹配、通配符匹配和正则表达式匹配
2. 路由跳转
   路由跳转是指根据路由规则跳转到对应的组件，并将组件渲染到页面上。Vue-router提供了多种路由跳转方式，包括编程式导航和声明式导航。

Hash模式

在hash模式下，Vue Router通过监听window对象的hashchange事件来实现路由切换。当URL的hash值发生变化时，Vue Router会根据新的hash值匹配对应的路由，并更新视图。

例如，当URL从http://example.com/#/home变为http://example.com/#/about时，Vue Router会根据新的hash值“#/about”匹配对应的路由，并更新视图。

History模式

在history模式下，Vue Router通过HTML5的History API来实现路由切换。具体来说，Vue Router使用pushState()方法或replaceState()方法来修改浏览器的历史记录，并更新视图。

例如，当URL从http://example.com/home变为http://example.com/about时，Vue Router会使用pushState()方法将新的路由路径“/about”添加到浏览器的历史记录中，并更新视图。

需要注意的是，在history模式下，浏览器刷新页面时会向服务器发送请求，因此需要服务器端的支持。服务器需要配置一个通配符路由，将所有请求都返回index.html文件，然后由Vue Router来处理路由。

5. vue路由的钩子函数有哪些

1. 全局前置路由守卫
   beforeEach((to,from,next)=>{})
2. 全局后置路由守卫
   afterEach((to,from)=>{})
3. 路路由独享守卫
   beforeEnter((to,from)=>{})
4. 组件内守卫
   1. beforeRouteEnter(to,from,next){} 在组件实例化前执行
   2. beforeRouteUpdate(to,from,next){} 在组件复用时执行
   3. beforeRouteLeave(to,from,next){} 在组件离开时执行

6. v-if 和 v-show 区别

1. 相同点：
   • v-if和v-show都是Vue.js中的指令
   • 用于根据条件显示或隐藏元素
2. 不同点：
   • v-if会根据条件完全销毁或重建元素
   • v-show则是通过改变元素的display样式来显示或隐藏元素
   • 需要频繁切换隐藏和显示，建议使用v-show
   • 如果需要对性能要求更高，只在特定条件下才显示元素，可使用v-if。

7. $route和$router的区别

1. $router是用来操作路由，$route是用来获取路由信息
2. $router是VueRouter的一个实例，他包含了所有的路由，包括路由的跳转方法，钩子函数等，也包含一些子对象（例如history）
3. $route是一个跳转的路由对象（路由信息对象），每一个路由都会有一个$route对象，是一个局部的对象。
   $router的用法

//常规方法
this.$router.push("/login");
//使用对象的形式 不带参数
this.$router.push({ path:"/login" });
//使用对象的形式，参数为地址栏上的参数
this.$router.push({ path:"/login",query:{username:"jack"} }); 
使用对象的形式 ，参数为params 不会显示在地址栏
this.$router.push({ name:'user' , params: {id:123} });

$route的介绍

//主要的属性有：
this.$route.path //字符串，等于当前路由对象的路径，会被解析为绝对路径，如/home/ews
 
this.$route.params //params 对象，包含路由中的动态片段和全匹配片段的键值对，不会拼接到路由的url后面
 
this.$route.query //qyery 对象，包含路由中查询参数的键值对。会拼接到路由url后面
 
this.$route.router //路由规则所属的路由器
 
this.$route.name 当前路由的名字，如果没有使用具体路径，则名字为空

8. 如何让CSS只在当前组件中起作用?

实现：在组件内的style标签生写上 scoped 属性
作用：当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，通过该属性，可以使得组件之间的样式不互相污染。
原理：
Vue中的scoped属性的效果主要是通过PostCss实现的。给一个组件中的所有dom添加了一个独一无二的动态属性，给css选择器额外添加一个对应的属性选择器，来选择组件中的dom,这种做法使得样式只作用于含有该属性的dom元素(组件内部的dom)。

9. 的作用是什么?

作用：keep-alive可以实现组件缓存，当组件切换时不会对当前组件进行卸载

比如有一个列表和一个详情，那么用户就会经常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面，那么就可以对列表组件使用进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染。

10. 在Vue中使用插件的步骤

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

11. 请列举出3个Vue中常用的生命周期钩子函数?

1. created —创建后
   此阶段可以做的事情：解决loading，发请求拿数据为mounted渲染做准备

12. 什么是Vue SSR

定义
Vue.js 是一个用于构建客户端应用的框架。默认情况下，Vue 组件的职责是在浏览器中生成和操作 DOM。然而，Vue 也支持将组件在服务端直接渲染成 HTML 字符串，作为服务端响应返回给浏览器，最后在浏览器端将静态的 HTML“激活”(hydrate) 为能够交互的客户端应用。

一个由服务端渲染的 Vue.js 应用也可以被认为是“同构的”(Isomorphic) 或“通用的”(Universal)，因为应用的大部分代码同时运行在服务端和客户端。

13. Proxy 相比于 defineProperty 的优势

1. Proxy 可以直接监听对象而不是属性(Object.defineProperty一次只能监视一个属性,如果要监视一个对象,那么需要遍历这个对象)
2. 可以直接监听数组的变化(Object.defineProperty需要对7个核心数组进行重写才能监视数组)
3. Proxy 有多达13中拦截方法，不限于apply,ownKeys,deleteProperty等等 这些是Object.defineProperty所不具备的
4. Proxy 返回的是一个新的对象，我们可以只操作新的对象来达到目的，而Object.defineProperty 只能遍历对象属性直接修

14. vuex是什么？怎么使用？哪种功能场景使用它？

vuex定义
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
使用

1. 安装vuex
2. 创建目录 store/index.js 创建store对象并导出store

import { createStore } from 'vuex'

export default createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

3. main.js 引入并使用

import store from './store'
app.use(store)

使用场景

1. 应用程序中存在多个组件需要访问和修改相同的状态数据。
2. 应用程序的状态管理变得越来越复杂，需要集中管理。
3. 应用程序需要实现一些高级的功能，如状态持久化、状态变化的历史记录、状态的异步处理等。

15. Vue2.x 响应式原理

Vue2.x的响应式原理是通过数据劫持（Object.defineProperty）来实现的。
具体来说，当一个Vue实例被创建时，Vue会对其data对象中的每个属性使用Object.defineProperty方法进行劫持，将其转换为getter和setter方法，从而实现对数据的监听和响应。

当数据发生变化时，setter方法会被触发，通知依赖于该数据的Watcher对象进行更新。Watcher对象会将更新通知给对应的组件，从而触发组件的重新渲染。

需要注意的是，Vue2.x的响应式原理只能监听对象和数组的变化，而不能监听新增或删除的属性。如果需要监听新增或删除的属性，可以使用Vue.set或Vue.delete方法。

总之，Vue2.x的响应式原理是通过数据劫持来实现的，可以监听对象和数组的变化，并通过Watcher对象和组件的重新渲染来实现响应式更新。

16. ES5、ES6和ES2015有什么区别?

1. ES5 是一个泛型名称（泛指 6.0 大版本以前的 JavaScript 标准的统称，概念范围基本等同于ECMAScript5.1版）
2. ES6 是一个泛型名称（泛指 6.0 版以后的 JavaScript 的下一代标准的统称，概念范围涵盖了 ES2015、ES2016、ES2017… 等等）
3. ES2015 则是正式版本名称，特指2015年发布的正式版本的语言标准（概念范围等同于ES6.0版）
   区别
   ES5、ES6和ES2015都是ECMAScript标准的版本，它们之间的区别如下：

• ES5是ECMAScript标准的第五个版本，于2009年发布。它引入了一些新的语言特性，如严格模式、JSON对象、数组方法等。

• ES6是ECMAScript标准的第六个版本，于2015年发布。它引入了许多新的语言特性和API，如：

  • 箭头函数
  • 模板字符串
  • 解构赋值
  • 类
  • 模块化

• ES2015是ES6的另一个名称，它是ECMAScript标准的2015年版本，与ES6的概念范围等同。ES2015引入了ES6的所有新特性和API，同时还包括一些修订和改进。

总之，ES5、ES6和ES2015都是ECMAScript标准的版本，它们之间的区别在于引入的新特性和API的不同，以及发布的时间和版本号的不同。

17. babel是什么，有什么作用?

定义
babel是一个编译器
作用
用于将ECMA2015+代码转换为向后兼容的javascript语法。
其原因在于目前浏览器并不能及时的兼容js的新语法，而开发过程中我们往往会选择es6、jsx、typescript进行开发，而浏览器并不能识别并执行这些代码，因此就必须将这些代码编译并转换成浏览器识别的代码，所以我们才会发现所有的项目构建工具都是使用babel

18. let有什么用，有了var为什么还要用let？

1. var是全局声明，let是块级作用的，只适用于当前代码块
2. var变量会发生变量提升，let则不会进行变量提升
3. var 会造成重复赋值，循环里的赋值可能会造成变量泄露至全局
4. let在一个块级作用只能赋一次值，并进行当前代码块的锁区，就是说当前块只有let声明的这个变量是有用的

19. 举一些ES6对String字符串类型做的常用升级优化?

1. 优化部分：
   ES6新增了字符串模板，在拼接大段字符串时，用反斜杠(`)取代以往的字符串相加的形式，能保留所有空格和换行，使得字符串拼接看起来更加直观，更加优雅。
2. 升级部分：
   ES6在String原型上新增了includes()方法，用于取代传统的只能用indexOf查找包含字符的方法(indexOf返回-1表示没查到不如includes方法返回false更明确，语义更清晰), 此外还新增了startsWith(), endsWith(), padStart(),padEnd(),repeat()等方法，可方便的用于查找，补全字符串。

20. 举一些ES6对Array数组类型做的常用升级优化

1. 优化部分：
   • 数组解构赋值。ES6可以直接以let [a,b,c] = [1,2,3]形式进行变量赋值，在声明较多变量时，不用再写很多let(var),且映射关系清晰，且支持赋默认值。
   • 扩展运算符。ES6新增的扩展运算符(…)(重要),可以轻松的实现数组和松散序列的相互转化，可以取代arguments对象和apply方法，轻松获取未知参数个数情况下的参数集合