vue基础面试题（day02）

__爱吃香菜

已于 2023-03-15 14:40:49 修改

阅读量810

点赞数 4

分类专栏： vue 文章标签： vue.js

于 2023-03-14 20:24:02 首次发布

本文链接：https://blog.csdn.net/weixin_59763367/article/details/129535899

版权

vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

Vue2.0 和 Vue3.0 有什么区别？

vue经历从2.0到3.0更新之后，简⽽⾔之就是变得更轻，更快，使⽤起来更加⽅便，每⼀次的版本迭代都是对上⼀个版本的升级优化.
数据绑定的原理发生了变化：

vue2 的双向数据绑定是利⽤ES5 的⼀个 API ，Object.definePropert()对数据进⾏劫持 结合 发布订阅模式的⽅式来实现的。
vue3 中使⽤了 es6 的 ProxyAPI 对数据代理，相比与vue2，使用proxy API 优势有：
1、defineProperty只能监听某个属性，不能对全对象进行监听；
2、可以省去for in 、闭包等内容来提升效率（直接绑定整个对象即可）；
3、可以监听数组，不用再去单独的对数组做特异性操作，vue3可以检测到数组内部数据的变化。
	双向数据绑定的核心是数据变化侦测及依赖收集。

建立数据data发生了变化

vue2是把数据放入data中，vue3就需要使用一个新的setup()方法

是否支持碎片：

	vue2.0	只允许有一个根标签，vue3.0支持碎片化，可以拥有多个根节点。

Composition API

Vue2 与vue3 最大的区别是vue2使用**选项式api**，对比**vue3组合式api。**旧得选项式api在代码里分割了
不同得属性：data,computed,methods等；新的合成型api能让我们使用方法来分割，相比于旧的API使
用属性来分组，这样代码会更加简便和整洁。这种就叫做组合式Api，这样可以将同一逻辑的内容写到一起。

生命周期：

	Vue3 在组合式API中使用生命周期钩子时需要先引入，而 Vue2 在选项API（Options API）
	中可以直接调用生命周期钩子。

在这里插入图片描述
父子传参不同，setup()函数特性

1--- setup()函数接收两个参数：props、context(包含attrs、slots、emit)
2--- setup函数是处于生命周期beforeCreated和created俩个钩子函数之前
3--- 执行setup时，组件实例尚未被创建（在setup()内部，this不会是该活跃实例得引用，即不指向vue
实例，Vue为了避免我们错误得使用，直接将setup函数中得this修改成了undefined）
4--- 与模板一起使用时，需要返回一个对象
5--- 因为setup函数中，props是响应式得，当传入新的prop时，它将会被更新，所以不能使用es6解
构，因为它会消除prop得响应性，如需解构prop，可以通过使用setup函数中得toRefs来完成此操作。
6--- 父传子，用props,子传父用事件 Emitting Events。在vue2中，会调用this$emit然后传入事件名和
对象；在vue3中得setup()中得第二个参数content对象中就有emit，那么我们只要在setup()接收第二个
参数中使用分解对象法取出emit就可以在setup方法中随意使用了。
7--- 在setup()内使用响应式数据时，需要通过 .value 获取

main.js文件不同

vue2中我们可以使用pototype(原型)的形式去进行操作，引入的是构造函数
vue3中需要使用结构的形式进行操作，引入的是工厂函数

Vue3带来了什么改变？

性能的提升：

 打包大小减少了
 初次渲染更快了，更新更快了
 内存减少了。

响应式系统升级（defineProperty变更为proxy）

 	响应式核心实现从通过Object.defineProperty变为proxy，解决了definProperty无法监听对象新增属性以及无法跟踪数组
 	索引以及数组length的问题

提供新的写代码的方式：Composition API

 vue2.x中，所有的数据都在 data 方法中定义返回，方法定义在 methods 下面，并通过 this 调用
 vue3.x中，所有的代码逻辑将在 setup 方法中实现，包括 data 、 watch 、 computed 、 methods 、 hooks ，
 并且不再有 this。
 vue3.x setup 方法在组件生命周期内只执行一次，不会重复执行。
 相比vue2.x中基于 OPTIONS 配置的方式，vue3.x基于组合式API的方式语义没有2.x清晰，2.x中 data 、
 methods 、 computed 、 watch 等都通过不同的scope区分开，看起来很清晰，3.x都放在 setup 方法
 中，对代码组织能力会有更高的要求。
 **vue3.x的 reactive 和 ref 取代了vue2.x中的 data 数据定义**

更好的Typescript支持

实例化：

 2.x使用构造函数 new Vue(...) 创建实例，3.x使用 createApp 函数创建实例；
 2.x所有属性方法和设置都绑定到全局 Vue 对象上，3.x改为绑定到 vue 实例下，收紧了scope；
 3.x移除了 Vue.config.productionTip 和 Vue.config.keyCodes 配置属性

reactive与ref的区别？

从定义数据角度对比：

ref用来定义：基本类型数据
reactive用来定义对象（或数组）类型数据
备注：ref也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象。
从原理角度对比：
- ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）。
- reactive通过使用Proxy来实现响应式（数据劫持）, 并通过Reflect操作源对象内部的数据。
从使用角度对比：
- ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value。
- reactive定义的数据：操作数据与读取数据：均不需要.value。

计算属性computed和watch以及methods的区别？

methods，watch 和 computed 都是以函数为基础的，但各自却都不同.
作用机制上:

watch 和 computed 都是以 Vue 的**依赖追踪机制**为基础的，当某一个数据发生变化的时候，
所有依赖这个数据的相关数据，自动发生变化，也就是自动调用相关的函数去实现数据的变动
methods 里面是用来定义函数的，它需要**手动调用**才能执行。而不像 watch 和 computed 那样，
“自动执行”预先定义的函数，相比于 watch / compute；methods **不处理数据逻辑关系**，只提供可调用的函数，
类似储存函数的一个库。

从性质上

1.methods里面定义的是函数，你显然需要像"fuc()"这样去调用它（假设函数为fuc）。

2.computed是计算属性，事实上和和data对象里的数据属性是同一类的（使用上）。

3.watch:类似于监听机制+事件机制，回调函数自动调用。

总结:
watch擅长处理的场景：一个数据影响多个数据

computed擅长处理的场景：一个数据受多个数据影响。

computed 和 method 都能实现的一个功能，建议使用 computed，因为有缓存。

computed 和 watch都能实现的功能，建议使用 computed 因为更加简洁

$route 和 $router 的区别？

$router是”路由实例“ 对象包括了路由的跳转方式，钩子函数。

	例如 
	基础使用：
	this.$router.push("/路径名称");
	使用对象的形式，参数为地址栏上的参数
	this.$router.push({ path:"/login",query:{username:"jack"} });

$route是”路由信息对象“，包括path，params，hash，query，name等路由信息参数。

主要的属性有：
this.$route.path 字符串，等于当前路由对象的路径，会被解析为绝对路径，如/home/ews

this.$route.params 对象，包含路由中的动态片段和全匹配片段的键值对，不会拼接到路由的url后面

this.$route.query 对象，包含路由中查询参数的键值对。会拼接到路由url后面

this.$route.router 路由规则所属的路由器

this.$route.name 当前路由的名字，如果没有使用具体路径，则名字为空

v-model的使用？

简介
v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，
也会在更新data绑定属性时候，更新页面上输入控件的值。
为什么使用v-model
v-model作为双向绑定指令也是vue两大核心功能之一，使用非常方便，提高前端开发效率。在view层，
model层相互需要数据交互，即可使用v-model。
简单使用
v-model与input输入框的搭配使用：
v-model=“data中定义的变量名”
作用在表单元素上：
动态绑定了input的value指向了message变量，并且触发input事件的时候去吧message设置为目标值。
作用在组件上：
在这里插入图片描述

v-on可以监听多个方法吗？

v-on可以监听多个方法。

<input
     type="text"
     v-on="{
     input:onInput,
     focus:onFocus,
     blur:onBlur,
     }"
>

v-on常用修饰符

	.stop该修饰符将阻止事件冒泡
	.prevent阻止默认事件
	.self只会在出发自身的时候触发
	.once只会触发一次。

vue中过滤器有什么作用及详解？

过滤器分为全局过滤器和局部过滤器，全局过滤器可以在任何组件调用，局部过滤器只能在当前组件调用，过滤器使用|管道符调用。可以串联使用。

过滤器使用：

全局过滤器vue.filter（”过滤器名称“，（）=>{}）;
局部过滤器 filter：{过滤器名字}

vue3.0中将过滤器移除了，使用“计算属性”进行代替。

EventBus注册在全局上时，路由切换时会重复触发事件，如何解决呢？

vuex有哪几种属性？

state

state：state类似容器，包含应用的大部分状态

	 一个页面只能有一个state
	状态存储是响应式的
	不能直接改变 state 中的状态，唯一途径显式地提交mutations

mutations

mutations：更改store中的状态唯一方法就是提交mutation，它是同步的，每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。更改 Vuex 的 state 中的状态的唯一方法是提交 mutation。回调函数可以接受两个参数，第一个参数是state状态，第二个参数是 mutation 的载荷就是外面store.commit 传入额外的参数。
mutations其实就相当于我们vue里面的methods，也是定义方法的，只不过这个方法可以在多个组件调用就是了。
使用mutations中的方法格式： this.$store.commit(‘名称’)