vue基础面试题day(2)
创始人
2024-06-03 13:56:00
0

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

文章目录

    • Vue2.0 和 Vue3.0 有什么区别?
    • Vue3带来了什么改变?
    • reactive与ref的区别?
    • 计算属性computed和watch以及methods的区别?
    • $route 和 $router 的区别?
    • v-model的使用?
    • v-on可以监听多个方法吗?
    • vue中过滤器有什么作用及详解?
    • EventBus注册在全局上时,路由切换时会重复触发事件,如何解决呢?
    • vuex有哪几种属性?

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()getset来实现响应式(数据劫持)。
    • 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/ewsthis.$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可以监听多个方法。

v-on常用修饰符

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

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

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

过滤器使用:

全局过滤器vue.filter(”过滤器名称“,()=>{});
局部过滤器 filter:{过滤器名字}

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(‘名称’)

  • getters

getters:相当于state的计算属性,从state派生出一些状态

  • actions

actions:Action 类似于 mutation,不同在于:
action 提交的是 mutation,而不是直接变更状态;
action可以进行任何异步操作,mutation不可以;

  • modules

modules:模块化管理,有多个state可以通过模块化import到index.js的module属性中,可直接进行调用。参考vue的组件化思想。

相关内容

热门资讯

喜欢穿一身黑的男生性格(喜欢穿... 今天百科达人给各位分享喜欢穿一身黑的男生性格的知识,其中也会对喜欢穿一身黑衣服的男人人好相处吗进行解...
发春是什么意思(思春和发春是什... 本篇文章极速百科给大家谈谈发春是什么意思,以及思春和发春是什么意思对应的知识点,希望对各位有所帮助,...
网络用语zl是什么意思(zl是... 今天给各位分享网络用语zl是什么意思的知识,其中也会对zl是啥意思是什么网络用语进行解释,如果能碰巧...
为什么酷狗音乐自己唱的歌不能下... 本篇文章极速百科小编给大家谈谈为什么酷狗音乐自己唱的歌不能下载到本地?,以及为什么酷狗下载的歌曲不是...
华为下载未安装的文件去哪找(华... 今天百科达人给各位分享华为下载未安装的文件去哪找的知识,其中也会对华为下载未安装的文件去哪找到进行解...
怎么往应用助手里添加应用(应用... 今天百科达人给各位分享怎么往应用助手里添加应用的知识,其中也会对应用助手怎么添加微信进行解释,如果能...
家里可以做假山养金鱼吗(假山能... 今天百科达人给各位分享家里可以做假山养金鱼吗的知识,其中也会对假山能放鱼缸里吗进行解释,如果能碰巧解...
一帆风顺二龙腾飞三阳开泰祝福语... 本篇文章极速百科给大家谈谈一帆风顺二龙腾飞三阳开泰祝福语,以及一帆风顺二龙腾飞三阳开泰祝福语结婚对应...
美团联名卡审核成功待激活(美团... 今天百科达人给各位分享美团联名卡审核成功待激活的知识,其中也会对美团联名卡审核未通过进行解释,如果能...
四分五裂是什么生肖什么动物(四... 本篇文章极速百科小编给大家谈谈四分五裂是什么生肖什么动物,以及四分五裂打一生肖是什么对应的知识点,希...