ES6和vue的周测

周测1

1. Vue-router 有那几种路由模式？他们的区别是什么？

hash模式和history模式。

Hash模式：在hash模式下，浏览器地址栏上的链接会包含一个#号，这个#号后面的内容被称为hash值。这种模式的特点是在进行http请求时，不会包含hash值内容，同时，当改变hash值时，页面不会被刷新。

History模式：而在history模式下，URL看起来像正常的URL，更美观，也更易于分享。但是，在使用HTML5 history模式时，需要服务器端的支持。如果服务器没有正确配置，可能导致页面无法访问。

2. Vuex有那几种属性？

Vuex具有五个核心属性：state、getters、mutations、actions和modules。
3. State：这是Vuex的基本数据，被用来存储变量，即应用的状态信息。
4. Getters：这是从基本数据（state）派生出来的数据，相当于store的计算属性。Getter的返回值会根据它的依赖被缓存起来，只有当它的依赖值发生了改变时才会被重新计算。
5. Mutations：这是提交更新数据的方法，必须是同步的。每个Mutation都有一个字符串的事件类型和一个回调函数作为参数。这个回调函数就是实际进行状态更改的地方，并且它会接受state作为第一个参数，提交载荷作为第二个参数。
6. Actions：Actions类似于Mutations，但它提交的是mutation，而不是直接变更状态。Action可以包含任意异步操作。
7. Modules：如果你的store变得非常复杂，你可以使用模块来拆分你的store。

3. Vuex中actions和mutations的区别？

在Vuex中，actions和mutations都用于改变状态。
Actions主要用于响应组件中的动作，它可以进行异步操作，比如向后台提交数据或者接收后台的数据。
Mutations则主要用于操作修改数据，它必须是同步的，每个Mutation都有一个字符串的事件类型和一个回调函数作为参数，这个回调函数就是实际进行状态更改的地方，并且它会接受state作为第一个参数。
此外，Actions通过commit()来触发Mutations中函数的调用，以间接更新state。

4. Vue的父组件和子组件生命周期函钩子函数的执行顺序？

在Vue中，父组件和子组件的生命周期钩子函数执行顺序如下：

1. 父组件的beforeCreate -> 父组件的created -> 父组件的beforeMount -> 父组件的mounted -> 子组件的beforeCreate -> 子组件的created -> 子组件的beforeMount -> 子组件的mounted。

2. 如果子组件被更新了，那么子组件的updated钩子函数会在父组件的updated之前执行。

3. 如果父组件被销毁了，那么父组件的所有beforeDestroy和destroyed钩子函数会先于子组件的beforeDestroy和destroyed钩子函数执行。

4. 如果子组件被销毁了，那么子组件的所有beforeDestroy和destroyed钩子函数会先于父组件的beforeDestroy和destroyed钩子函数执行。

5. 在什么阶段才能访问操作DOM？

mounted()

6. 组件中data为什么是一个函数？

为了保证组件间的数据独立性和避免状态混乱
原因：
Vue组件具有高度的可复用性，如果data被定义成一个对象，那么所有实例化的组件都会共享同一份数据，这可能导致状态混乱并引发不可预见的问题。其次，通过将data定义为一个函数，可以在每次组件复用时返回一份全新的数据，实现数据的隔离，使得每个组件有自己的私有数据空间。当某一处复用的地方组件内data数据被改变时，不会影响到其他复用地方组件的data数据

7. 怎么样理解Vue的单向数据流？

父组件单方向将数据流向它的子组件

8. computed和watch的区别和运用场景？

计算属性（computed）适用于一个数据受多个数据影响，需要处理复杂的逻辑或多个属性影响一个属性的变化时使用的场景。
观察属性（watch）则适用于一个数据影响多个数据，或者需要在数据变化时执行异步操作或者开销较大的操作时使用的场景

9. class和style如何动态绑定？

:class="{ 类名: 布尔值}"

10. v-show与v-if的区别？

v-show只是简单地切换元素的CSS display属性为none或block
v-if则是将元素从DOM树中完全移除或插入。
因此，v-show的开销比v-if小，但频繁切换会导致页面闪烁

11. Vue生命周期的理解？

生命周期是指Vue实例从创建到销毁的整个过程。这包括了组件的创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程。

Vue的生命周期可以分为8个阶段：

beforeCreate（创建前）：在实例初始化之后，但在数据观测和事件/回调函数绑定之前触发。
created（创建后）：在实例创建完成后立即触发。这个阶段可以进行一些数据获取的操作，例如发起Ajax请求。
beforeMount（载入前）：在DOM元素被挂载之前触发。
mounted（载入后）：在DOM元素被挂载之后触发。这个阶段可以对DOM进行操作。
beforeUpdate（更新前）：在数据更新之前触发，但是发生在虚拟DOM重新渲染和打补丁之前。
updated（更新后）：在数据更新之后触发。
beforeDestroy（销毁前）：在实例销毁之前触发。这个阶段可以进行一些清理工作，例如取消定时器。
destroyed（销毁后）：在实例销毁之后触发。这个时候，组件已经被完全清除。

12. 在项目中如何实现路由的嵌套？

安装vue-router 
编写router/index.js文件并在main.js中导入
使用<router-view>渲染对应的路由

13. $route和 $router的区别？

$route看作是一个获取当前路由信息的工具，而$router则是一个进行路由操作的工具

14. 如何实现一个自定义组件？

1.编写一个.vue文件 
<template>标签来定义组件的HTML结构
<style>标签来定义组件的样式
<script>标签来定义组件的数据、方法、生命周期等
2.在需要使用的地方 引入 ----import
3.components: {} 注册 

15. mvvm的原理？

一句话：数据驱动视图

响应式，双向数据绑定，即MVVM。是指数据层（Model）-视图层（View）-数据视图（ViewModel）的响应式框架。

1.修改View层，Model对应数据发生变化。

2.Model数据变化，不需要查找DOM，直接更新View。

16. var let const之间的区别？

变量提升：var声明的变量存在变量提升，即无论在哪里声明，都会被提升到当前作用域的顶部。而let和const声明的变量不存在变量提升。

块级作用域：let声明的变量具有块级作用域，只在声明它的代码块内有效。这意味着外部语句块无法访问它。与此不同，var声明的变量具有函数作用域。

重复声明：使用let在同一个作用域中重复声明同一个变量会报错，因为这样会导致该变量被重新赋值。而var允许在相同作用域中多次声明同一个变量，后面的声明会覆盖前面的声明。

全局作用域：在全局作用域中使用var声明的变量会挂载到window对象上（在浏览器环境中）或global对象上（在Node.js环境中）。这可能会导致意外的全局变量污染。而使用let和const声明的变量不会自动成为全局变量。

常量声明：const声明的是常量，一旦定义就不能修改其值。与let不同，const声明的常量必须初始化值。

ES6兼容性：Var是在ES6出现之前使用的，而let和const是在ES6及以后的版本中引入的，因此后者提供了更多的特性和更好的安全性。

17. 使用箭头函数应该注意什么？

箭头函数会改变函数内 this 的指向与上级作用域中的this指向保持一致。
不可用当做构造函数，也就是说不能用new调用。
不能在里边使用 arguments 对象

18. ES6的模板字符串有那些新特性？

定义多行字符串：可以使用反引号来定义多行字符串，使得代码更加清晰和易读。
字符串插值：在模板字符串中，可以直接嵌入表达式，这些表达式会在运行时被计算并转换为字符串。如果需要在字符串中插入变量，则可以使用${}符号来实现。例如，let name = "John"; console.log(Hello, ${name}!); 这段代码会输出Hello, John!。
简化拼接操作：与传统的字符串拼接方式相比，模板字符串提供了更简洁的方法

19. Promise构造函数是同步执行还是异步执行，then方法呢？

**Promise构造函数**是**同步执行**的，这意味着它会立即执行并返回一个Promise对象。
构造函数中的主要业务流程都在传入的executor函数中进行。
而**then方法**是**异步执行**的，它返回的是一个新的Promise对象。需要注意的是，尽管then方法本身是异步的，但then方法中的内容是通过微任务队列来异步执行的。

20. promise有几种状态？什么时候会进入catch？

Promise对象有三种状态：
进行中（pending）：这是Promise对象刚创建时的状态，表示异步操作正在进行中。
已完成（Fulfilled）：当异步操作成功完成时，Promise状态变为Fulfilled。在这状态下，Promise会执行后续的成功处理函数（then）。
拒绝（Rejected）：当异步操作失败或出错时，Promise状态变为Rejected。
**什么时候会进入catch**:
在Promise的链式调用中，如果某个promise被rejected，那么与其相关的then方法中的回调函数将不会执行，并且会立即跳到下一个catch方法中处理错误。如果then方法中没有指定用于处理错误（即rejected状态）的回调函数，那么错误将会被传递到最近的一个catch方法中进行处理。