（适趣AI）Vue笔试题

📑前言

本文主要是【Vue】——（适趣AI）Vue笔试题的文章，如果有什么需要改进的地方还请大佬指出⛺️

🎬作者简介：大家好，我是听风与他🥇
☁️博客首页：CSDN主页听风与他
🌄每日一句：狠狠沉淀，顶峰相见

- 📑前言
- 1.请简述Vue.js的生命周期函数及其执行顺序
- 2.Vue.js中的v-bind指令和v-model指令有什么区别?
- 3.简述Vue.js的组件通信方式及其优缺点。
- - 3.1 props
  - 3.2 provide inject
  - 3.3 Vuex
- 4.Vue.js如何实现父子组件之间的数据传递
- 5.请简述Vue.js中的响应式原理。
- 6.如何在Vue.js中实现路由跳转?
- 7.Vue.js中的computed和watch有什么区别?
- 8.Vue.js中的v-for指令和v-if指令有什么区别
- 9.请简述Vue.js中的mixins和extends的作用及其区别。
- - mixins
  - extends
  - 区别
- 10.Vue.js中的keep-alive组件有什么作用? 如何使用
- 📑文章末尾

1.请简述Vue.js的生命周期函数及其执行顺序

Vue生命周期函数有8个。
Vue生命周期函数有四个阶段：
- 1.实例创建之前/之后
- 2.组件挂载之前/之后
- 3.数据改变视图之前/之后
- 4.实例销毁之前/之后。

顺序:

beforeCreate，created
beforeMount,mounted
beforeUpdate,updated
beforeDestory,destoryed

扩展:每个钩子可以做什么:

1.实例创建之前/之后:

beforeCreate(实例创建之前):每个页面都是一个Vue实例，这时实例还没创建，所以data还不知道，也不能用watch监听，这时data和methods的钩子函数都不能使用。
created(实例创建之后):实例已经创建完，可以得到data，调用watch,但是页面还是空白的，是最早可以使用data和methods的钩子函数。

2.组件挂载之前/之后:

beforeMount(组件挂载之前)：页面挂载前，这时节点还没渲染完成。
mounted（组件挂载之后）: 页面挂载完成，页面的内容已经渲染出了，也可以访问到dom，此时模版渲染完成。

created和mounted的区别：

created：实例创建完成之后,最早可以使用data和methods的钩子函数
mounted: 组件挂载之后，此时模版渲染完成，挂载的节点。
created和mounted都可以请求axios

3.数据改变视图更新之前/之后:

beforeUpdate(数据改变更新视图之前): 数据改变更新视图之前，就是虚拟DOM打补丁之前，这时访问到的DOM还有原有的DOM。
updated（数据改变视图更新之后）：数据改变视图更新之后。

4.实例销毁之前/之后：

beforeDestory（实例销毁之前）：在destory阶段，对data的改变不会再触发周期函数，说明此时Vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在，是最后一次可以使用data和methods的钩子函数。
destoryed(实例销毁之后):实例已经被完全销毁。

执行顺序:

2.Vue.js中的v-bind指令和v-model指令有什么区别?

v-bind是一个单向数据绑定，映射关系：Model->View，我们不需要额外的DOM操作，只需要进行Model的操作就可以实现视图的联动更新。
v-model是一个双向数据绑定，映射关系：View接受的数据传给model，model的数据再传给view。把model绑定到view的同时也将view绑定到model上，这样就既可以通过更新model来实现view的自动更新，也可以通过view来实现model数据的更新。所以，当我们用javascript代码更新model时，view就会自动更新，反之，如果用户更新了view，model的数据也自动被更新了。

3.简述Vue.js的组件通信方式及其优缺点。

3.1 props

props通信方式是大家常见的通信类型，也是父子组件通讯的常用方式，用法是直接在子组件标签中绑定属性和方法，用props拿到声明的属性。对于父组件的方法，可以通过this.$emit触发
优点: props传递数据的优点显而易见，可以对props数据进行数据计算、数据监听等处理，十分灵活方便，但这里单单只是父子一层。
缺点：子组件虽然不能直接对父组件prop进行重新赋值，但父组件是引用类型的时候，子组件可以修改父组件的props下面的属性。

3.2 provide inject

此方法是在父组件上通过provide 将方法，属性，或者是自身实例暴露出去，子孙组件、插槽组件，甚至是子孙组件的插槽组件，通过inject把父辈provide引进来。提供给自己使用，很经典的应用的案例就是element-ui中el-form和el-form-item

3.3 Vuex

vuex算是vue中处理复杂组件通信的最佳方案，毕竟vue和vuex一个娘胎里出来的。而且vuex底层也是用vue实现的。
优点:1.根本解决复杂组件的通信问题 2.支持异步组件通信
缺点:流程相比较稍微复杂。

4.Vue.js如何实现父子组件之间的数据传递

第一种：父组件->子组件

父组件通过 :area方式，将areaData的数据传递给子组件，子组件通过props接收父组件传递的数据。

第二种: 子组件 ->父组件

子组件通过this.$emit（‘方法名’，‘数据’)将数据传递给父组件，父组件执行@change=‘handleChange’,handleChange方法的参数step,就是子组件传递过来的数据。

5.请简述Vue.js中的响应式原理。

vue3响应式原理

vue3.x为数据响应式，是通过proxy实现的。

相关设计模式
- 观察者模式(Observer pattern)：指的是在对象间定义一个一对多（被观察者与多个观察者）的关联，当一个对象改变了状态，所有其他相关对象都会被通知并且自动刷新。
- 发布订阅模式(Publish-subscribepattern)：可认为是为观察者模式解耦的进阶版本。
- 在发布者和订阅者之间添加消息中心，所有的消息均通过消息中心管理，而发布者与订阅者不会直接联系，实现了两者的解耦。

6.如何在Vue.js中实现路由跳转?

1.router-link （实现跳转最简单的方法）

<router-link to='需要跳转到的页面的路径'>

2.this.$router.push(‘vue路由’)

3.this.router.replace(‘vue路由’)

7.Vue.js中的computed和watch有什么区别?

在vue.js中，computed和watch是两个常用的属性，用于处理数据的监听和响应。

1.computed属性: computed属性用于定义一个计算属性，它根据其他属性的值计算出一个新的值。计算属性是基于他们的依赖进行缓存的，只有当依赖发生变化时，计算属性才会重新计算。

new Vue({
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: function() {
      return this.firstName + ' ' + this.lastName;
    }
  }
});

2.watch属性：watch属性用于监听一个属性的变化，并在变化发生时执行响应的操作。与computed不同，watch属性是一个对象，需要为需要监听的属性提供一个处理函数。
```
new Vue({
  data: {
    firstName: 'John',
    lastName: 'Doe',
    fullName: ''
  },
  watch: {
    firstName: function(newVal, oldVal) {
      this.fullName = newVal + ' ' + this.lastName;
    },
    lastName: function(newVal, oldVal) {
      this.fullName = this.firstName + ' ' + newVal;
    }
  }
});
```
computed和watch都可以用于监听属性的变化并执行相应的操作

computed和watch的区别
- computed是基于它们的依赖进行缓存的，只有当依赖发生变化时，计算属性才会重新计算；而watch则是在属性变化时立即执行相应的操作。
- computed适用于那些需要根据其他属性计算出一个新值的场景；而watch适用于那些需要在属性变化时执行异步或开销较大的操作的场景。
- computed可以像属性一样直接访问，而不需要调用函数；而watch则需要定义处理函数，并在函数中执行相应的操作。

8.Vue.js中的v-for指令和v-if指令有什么区别

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

9.请简述Vue.js中的mixins和extends的作用及其区别。

mixins

mixins选项接受一个混入对象的数组。这些混入对象可以像正常的实例对象一样包含实例选项。这些选项将会被合并到最终的选项中，使用的是和Vue.extend()一样的选项合并逻辑。

mixins的几个规则:
- 一、触发生命周期钩子函数时，先触发mixins组件中的钩子，再调用组件自身的函数。
- 二、当mixins数组中有watch，混入的组件中也存在watch，而且watch中的key相同时，混入组件中的watch会先触发，而后再是组件中的watch触发
- 三、虽然也能在建立mixin时添加data、template属性，但当组件自身也拥有此属性时以本身为准，从这一点也能看出制做者的用心（扩充）。
- 四、data、methods内函数、components和directives等键值对格式的对象均以组件自身或实例为准，组件自身没有定义才会去mixins混入的组件中去找。
- 五、watch，mixins数组中的组件和组件自身的watch会合并在一个数据中，mixins中的组件中的watch会先运行，而后再是组件自己的watch
- 六、mixins选项合并：当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。数据对象在内部会进行递归合并，在有同名的keys时以组件数据优先。
extends
- 允许声明扩展另一个组件（可以是一个简单的选项对象或构造函数），而无需使用Vue.extend,这主要是为了便于扩展单文件组件。
- extends与mixins相似；合并规则和mixins一致，extends容许声明扩展另外一个组件（能够是一个简单的选项对象或构造函数），而无需使用Vue.extend。这主要是为了便于扩展单文件组件。
- mixins和extends是为了扩展组件，均可以理解为继承。

区别

1.mixins接收对象数组（可理解为多继承）,extends接收的是对象（可理解成单继承）
优先级>extends>mixins，继承钩子函数的时候，是不进行覆盖的，extends的钩子函数先触发，而后再是mixins的钩子函数触发，最后就是组件自身的钩子函数触发。
mixins类似于面向切面的编程(AOP),extends类似于面向对象的编程。