2020前端VUE面试题二

Myth丶恋晨 2022-10-28 03:59 208阅读 0赞

## 1、vue与react的区别 ##

vue和react的区别
    
    两者本质的区别：模板和组件化的区别
    
    Vue本质是MVVM框架，由MVC发展而来；
    
    React是前端组件化框架，由后端组件化发展而来；
    
    Vue使用模板
    
    React使用JSX
    
    React本身就是组件化
    
    Vue是在MVVM上扩展的
    
    共同点：都支持组件化，都是数据驱动视图

## 2、vue生命周期 ##

生命周期函数

组件的创建（1次）

beforeCreate()  在这个钩子执行的时候，只有实例本身的一些事件和生命周期函数
    
    created()	在这钩子函数执行的时候，data和methods中的数据已经能够使用了 最早使用data中的数据
    
    组件的挂载（1次）
    
    beforeMount() 在这个钩子执行的时候,已经在内存中渲染好模板，但是还没有输出页面上
    
    这个时候指令已经解析完毕
    
    mounted() 在这个钩子执行的时候 页面和内存已经同步 mounted是最早操作dom节点的函数
    
    组件的运行（0到n次）
    
    beforeUpdate()  当data中的数据发生改变的时候会被调用，这个函数中内存已经发生改变，但是页面还是旧的
    
    updated() 内存中的数据已经和页面同步起来
    
    组件的销毁
    
    beforeDestroy() data中的数据还是能用的  一般情况下用来释放内存 比如清楚定时器
    
    destroyed()	组件已经不复存在

还有三种不常用的生命周期知道就行平时用不到 **1、activated(组件激活时) 2、deactivated(组件未激活时) 3、errorCaptured(错误调用)**

## 3、created()和mounted()的区别 ##

created()最早使用data中的数据 mounted()最早操作dom节点的函数

## 4、vue中data为什么必须是一个函数 ##

data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，不会相互影响。Object是引用数据类型，如果不用function返回，每个组件的data都是内存的同一个地址，一个数据改变了其他也改变了。

## 5、watch、computed和methods的区别 ##

computed 计算属性 计算结果会缓存,只有当依赖值改变才会重新计算
    
    watch 监听属性 一个值的改变  需要另一个值的改变而改变,结果不会缓存
    
    methods 事件方法 调用一次，执行一次,结果不会缓存

## 6、vue组件通信 ##

**第一种：父传子：主要通过 props 来实现的**
    
    具体实现：父组件通过 import 引入子组件，并注册，在子组件标签
    
    上添加要传递的属性，子组件通过 props 接收，接收有两种形式一是通过数
    
    组形式[‘要接收的属性’ ]，二是通过对象形式{ }来接收，对象形式可以
    
    设置要传递的数据类型和默认值，而数组只是简单的接收

--------------------

**第二种：子传父：主要通过$emit 来实现**
    
    具体实现：子组件通过通过绑定事件触发函数，在其中设置
    
    this.$emit(‘要派发的自定义事件’，要传递的值)，$emit 中有两个参数一
    
    是要派发的自定义事件，第二个参数是要传递的值

--------------------

**第三种：兄弟之间传值有两种方法：**
    
    方法一：通过 event bus 实现
    
    具体实现:创建一个空的 vue 并暴露出去，这个作为公共的 bus,即当
    
    作两个组件的桥梁，在两个兄弟组件中分别引入刚才创建的 bus，在组件 A
    
    中通过 bus.$emit（’自定义事件名’，要发送的值）发送数据，在组件 B
    
    中通过 bus.$on（‘自定义事件名‘,function(v) { //v 即为要接收的值 }）接
    
    收数据

## 方法二：通过 vuex 实现 ##

具体实现：vuex 是一个状态管理工具，主要解决大中型复杂项目的
    
    数据共享问题，主要包括 state,actions,mutations,getters 和 modules 5 个要
    
    素，主要流程：组件通过 dispatch 到 actions，actions 是异步操作，再 actions
    
    中通过 commit 到 mutations，mutations 再通过逻辑操作改变 state，从而
    
    同步到组件，更新其数据状态

## 7、mvvm的理解 ##

**MVVM就是Model-View-ViewModel的缩写，MVVM将视图和业务逻辑分开。**
    
    View：视图层，Model数据模型，而ViewModel是把两者建立通信的桥梁。
    
    在MVVM框架下，View和Model之间没有直接的联系，而是通过ViewModel进行交互。
    View和ViewModel之间以及Model和ViewModel之间的交互都是双向的，
    因此view数据的变化会同步到Model中，而Model数据的变化也会立即反映到View上。
    可以说它们两者是实时更新的，互相影响。 
     ViewModel通过双向数据绑定把View层和Model层连接了起来，
     而View和Model之间的同步工作完全是自动的，
     因此开发者只需要关注业务逻辑，不需要手动操作DOM，也不需要关注数据状态的同步问题，这些都由MVVM统一管理。

## 8、vue双向数据绑定 ##

## 使用v-model来实现 ##

Vue 实现 双向数据绑定主要采用：数据劫持结合“发布-订阅”模式的方式，通过Object.defineProperty（）的setter，getter，在数据变动时发布消息给订阅者触发监听。

## 9、vuex ##

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

使用场景：需要构建一个中大型单页应用，您很可能会考虑如何更好的在组件外部管理状态，Vuex将会成为自然而然的选择。

**优点：当你在state中定义了一个数据之后，可以在所在项目中的任何一个组件里进行获取、进行修改、并且你的修改可以得到全局的响应变更。**

**Vuex的运行机制：在组件中通过this.$store.dispatch来调用actions中的方法，在action中通过commit来调用mutations中的方法，在mutations的方法中操作state中的数据，数据只要更新就会立即响应到组件上。**

## 核心： ##

①**state**：定义初始数据。

②**mutations**：更改Vuex的store中的状态的唯一方法是提交mutation

③**getters**：可以对state 进行计算操作，它就是 store 的计算属性虽然在组件内也可以做计算属性，但是 getters 可以在多给件之间复用如果一个状态只在一个组件内使用，是可以不用 getters。

④**actions**：异步操作初始数据，其实就是调用mutations里面的方法。

⑤**module**：面对复杂的应用程序，当管理的状态比较多时；我们需要将vuex的store对象分割成模块(modules)。

## 10、vue路由模式 ##

**在vue-router路由对象中，路由有两种模式：hash和history，而默认的是hash模式.**

**hash路由原理：**

通过onhashchange来检测hash的变化，
    然后通过location.hash来获取到当前的hash值，
    从而根据hash的变化来控制元素的显示和隐藏

**history路由原理**

通过onpopstate来检测浏览器历史堆栈的变化，
    然后通过history.pushState("路径",null,"参数")向历史堆栈中添加信息

## 11、vue路由传参 ##

**1、query 方式**

**query**要用**path**引入=====>**this.$route.query.name**

query类似于ajax的get传参==>浏览器地址栏中显示参数

传参:  
![在这里插入图片描述][20210205153354605.png]

取值:  
![在这里插入图片描述][20210205153440846.png]

**2、params 方式**

**params**要用**name**引入=====>**this.$route.params.name**

params类似于post===>浏览器地址栏中不显示参数

传参：  
![在这里插入图片描述][20210205154151573.png]  
取值：  
![在这里插入图片描述][20210205154202799.png]

## 12、v-for 与 v-if 的优先级 ##

**v-for**比**v-if**优先，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候。

## **13、vue指令** ##

⑴ v-bind：给元素绑定属性
    
    ⑵ v-on：给元素绑定事件
    
    ⑶ v-html：给元素绑定数据，且该指令可以解析html标签
    
    ⑷ v-text：给元素绑定数据，不解析标签
    
    ⑸ v-model：数据双向绑定
    
    ⑹ v-for：遍历数组
    
    ⑺ v-if：条件渲染指令，动态在DOM内添加或删除DOM元素
    
    ⑻ v-else：条件渲染指令，必须跟v-if成对使用
    
    ⑼ v-else-if：判断多层条件，必须跟v-if成对使用
    
    ⑽ v-cloak：解决插值闪烁问题
    
    ⑾ v-once：只渲染元素或组件一次
    
    ⑿ v-pre：跳过这个元素以及子元素的编译过程，以此来加快整个项目的编译速度
    
    ⒀ v-show：条件渲染指令，将不符合条件的数据隐藏(display:none)

## 14、Vue中key值的作用 ##

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

## 15、vue-router有哪几种导航钩子 ##

① 全局导航钩子：一般用来判断权限，以及页面丢失时需要执行的操作；

beforeEach（）每次路由进入之前执行的函数。
    
     afterEach（）每次路由进入之后执行的函数。
    
     beforeResolve（）2.5新增

② 单个路由（实例钩子）：某个指定路由跳转时需要执行的逻辑。

beforeEnter（）
    
     beforeLeave（）

③ 组件路由钩子：

beforeRouteEnter（）
    
    beforeRouteLeave（）
    
    beforeRouteUpdate（）

## 16、v-show和v-if指令的共同点和不同点？ ##

**共同点：都能控制元素的显示和隐藏；**

**不同点**：实现本质方法不同，v-show本质就是通过控制css中的display设置为none，控制隐藏，只会编译一次；v-if是动态的向DOM树内添加或者删除DOM元素，若初始值为false，就不会编译了。而且v-if不停的销毁和创建比较消耗性能。

[20210205153354605.png]: /images/20221024/21525871d2c14dc5bb9af39b903c6b94.png
[20210205153440846.png]: /images/20221024/a1ef29aa0e774950bcc3a56e16fdaf0a.png
[20210205154151573.png]: /images/20221024/4fb8f650001a47bab1ad3d53f5d24228.png
[20210205154202799.png]: /images/20221024/9f80e93f1a174f9fb443644ccfd78c31.png