1,如何让css只在当前组件中起作用 (样式隔离) ?
在组件中style前面加上scoped,如果父子组件都有样式隔离,则父组件中无法修改子
组件样式,此时可用样式穿透修改,父组件选择器>>>子组件选择器{子组件样式}
2,<keep-alive></keep-alive>的作用是什么?
keep-alive是vue内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染
3,vue组件中如何获取dom元素?
使用ref属性修改,在组件模板元素中添加ref属性,在js中用this.$ref获取
4,说几个vue中的指令和它的用法
v-model 双向数据绑定
v-for 循环
v-if,v-show 显示和隐藏
v-bind 动态绑定属性
v-on 事件绑定
v-once 只绑定一次
5,v-on指令可以同时监听多个函数吗?
可以,v-on的事件监听类似于Dom原生api添加事件监听者addEventListener
6,vue循环中为什么使用key?
需要使用key来给循环中每个节点做成一个唯一标识符,要保证一个循环中key的值
各不相同,以避免vue中的重用机制造成可能的渲染异常,从底层来看,key属性主要
为了Diff算法就可以正确的识别节点,并高效的更新虚拟Dom
7,vue的组件配置对象中有哪些常用字段?分别是什么作用?
Data 组件中的数据
props 组件的属性数据,接收父组件的传值
computed 计算属性
components 定义或引用子组件
methods 自定义属性
watch 属性监听
filters 数据过滤器
mounted 生命周期函数
8,分别简述computed和watch的使用场景
computed:
当一个属性受到多个属性影响的时候就需要用到computed,有缓存
例子:购物车商品结算的时候
watch:
当一条数据影响多条数据的时候就需要用watch
例子:搜索数据
9,列举一下vue组件生命周期函数,什么时候需要在destroyed中写代码
beforeCreate ,created ,beforeMount ,mounted ,beforeUpdate ,updated ,
beforeDestroy ,destroyed
当前页码有事件监听器或者计时器时,需要在destroyed中取消或销毁
10,vue路由的钩子函数有哪些
全局的路由钩子函数:beforeEach,afterEach
单个的路由钩子函数:beforeEnter
组件内的路由钩子函数:beforeRouteEnter,beforeRouteLeave,beforeRouteUpdate
11,介绍以下vue组件内的路由守卫(即路由的生命周期/钩子函数),有哪些参数
(to,from,next)
vue组件中的路由钩子方法有
beforeRouterEnter 进入路由前调用。这里组件还未创建,不能使用this
beforeRouterUpdate 路由更新之前被调用,组件不会重新初始化,可以使用this
beforeRouterLeave 离开路由之前被调用,可以访问里面的this属性
方法有三个参数
to:即将要进入的目标路由对象
from:当前导航即将要离开的路由对象
next:调用该方法后,才能进入下一个路由钩子函数
12,vue中数据绑定是怎么实现的?双向绑定指令v-model的本质是什么?
vue组件data中的数据在组件中创建时,都会被改造为set,get类型的属性,当数据
发生变化时set方法就会调用,set方法中添加重新渲染的代码
13,vue中怎么实现非父子组件之间的传值?
在项目规模不是特别大时,可以创建一个空组件作为总线,项目中其他组件都可以
通过总线进行传值。
在大型项目中,可以使用vuex进行数据管理,将数据统一放在store中进行管理。
也可以在路由跳转时,通过路由传值
14,vue路由如何拼接?
(1)使用rul拼接字符串的形式传值,使用$route.query接收
(2)使用友好url传值,使用$route.params接收
(3)使用命名路由params字段传值,使用$route.params接收
(4)使用query对象传值,使用$route.query接收
15,vue中有哪些数据传递方式?
(1)组件传值:父传子,通过props属性或slot插槽传递,子传父,通过$emit发
射自定义事件传 递,非父子,通过bus总线传递
(2)路由传值:可用过url路径传值或编程式导航对象传值
(3)vuex状态管理传值
16,vuex如何使用
首先在项目中, npm install vuex安装
新建vuex状态管理文件,导入vuex并添加状态数据
在组件中使用mapState()函数映射状态数据并使用
在组件中使用commit()函数提交申请修改状态数据
17,vuex的核心概念有哪些?组件如何使用store中的数据 如何改变store中的数据
state => 基本数据 在组件中使用mapState()函数把状态数据映射到组件中即可使用
getters => 从基本数据派生的数据 在组件在使用 $store.getters获取数据
mutations => 提交更改数据的方法,同步! 在组件中使用 $store.commit('',params)修改数据
actions => 像一个修饰器,包裹mutations,使之可以异步,使用mapAction()映射入组件使用
modules => 模块化 vuex
18,vue中如何处理跨域请求
vue中处理跨域请求一般要设置代理服务器实现跨域
在vue项目的根目录中手动创建vue.config.js配置文件,在devServer字段中配置服务器代理
在使用axios请求数据时直接使用代理地址
19,axios和ajax的区别
axios是通过promise实现对ajax技术的一种封装,就像jQuery实现ajax封装一样
简单来说:ajax技术实现了网页的局部数据刷新,axios实现了对ajax的封装
20,vue和react有哪些异同点
相同点
(1)都通过虚拟Dom实现试图的渲染与更新
(2)都是组件化编程,把整个项目分割成一个个的组件来实现
(3)都有单项数据流的规则执行数据流动,父组件通过props属性向子组件传值
不同点
(1)vue常用html标签模板,使用js实现逻辑,视图与逻辑分离,react使用jsx语
法实现模板,html与js相结合
(2)vue组件中的data数据可以直接调用并更新,erreact中的state数据需要使用
setState()函数执行并更新
(3)vue属于渐进式前端框架,更适用于开发小型,灵活的项目木,react生态更
丰富,更适用于开发专业,大型的项目
(4)vue在组件中提供了指令,过滤器。属性监听等,可以方便快捷的操作Dom
21,vue中v-if和v-show有什么区别
v-if的原理是根据判断条件来动态的进行增删Dom元素,比较耗费性能和内存频繁显示隐藏
v-show是根据判断条件来动态的进行显示和隐藏元素,通过设置样式diaplay
为block和none来实现,适用于频繁显示隐藏的情况
22,vue有哪些优缺点
优点
(1)简单好用:vue.js包含基于HTML的标准模板,可以更轻松地使用和修改现有应用程序
(2)单页面应用:使用单文件组件结构,用户体检好
(3)性能比较好:相比其他框架,它占用更少的空间,并提供更好的性能
(4)基于MVVM模式,数据驱动试图,更高效
(5)适应性强:组件化设计可以提高开发效率,方便代码复用,提升整个项目的可维护性
缺点
(1)vue生态环境不如react和angular,但有追赶和超越的趋势
(2)vue不支持IE8
(3)vue封装的比较深入,不利于seo优化,报错不明显
23,什么是MVVM
MVVM是model-view-viewModel的简写,它是一种开发模式,它实现了试图和
数据逻辑之间的分离,model模型指的是后端传递的数据,view试图指的是所看
到的页面,viewModel是连接试图view和模型model的桥梁,从而实现模型model到
试图view的转化和试图view到模型model的转化,也就是我们所说的双向数据绑定,
使用MVVM模式实现的前端框架有vue和react
24,vue中虚拟DOM的实现原理
虚拟DOM是通过js对象的结构来记录html标签节点,当组件数据更新需要渲染试图时
,先用diff算法计算变化前后js对象(也就是虚拟DOM树)结构的不同,得到最小差异,
然后针对性的更新部分真实DOM节点,这样可以极大提高试图渲染效率,节省内存消耗
25,vue组件中如何监听路由
在组件的watch监听器中对$route这个字段进行监听
全局监听路由在app.vue组件中,watch监听$route可以监听全局路由
也可以在全局路由守卫beforeEach函数中操作全局路由
26,vue3相比于vue2有哪些区别?
(1)vue2使用直接导入vue构造函数,vue3使用时通过对象结构方式按需导入
(2)vue3中新增了setup函数,数据的定义,更新计算,监听等都在setup函数中执行
(3)setup函数中的数据都需要return导出才能在组件模板中调用
(4)vue中的生命周期也在setup中实现,其中取消了beforeCreata和created,其
他的生命周期函数名有更新,如destoryed改成了onUnmounted
(5)setup中的this为空,可以有效避免this指向修改带来的问题
(6)vue3中使用ref函数定义值类型数据,使用reactive函数定义引用类型数据
(7)vue3废弃了filters过滤器,建议使用计算属性
26,scss和less有哪些不同?
(1)编译环境,sess-loader less-loader
(2)scss定义变量使用$定义,less变量使用@定义
(3)sass支持条件语句,可以使用if()else()for(),less不支持