IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓ 		图片批量下载器
↓批量下载图片,美女图库↓ 		图片自动播放器
↓图片自动播放器↓ 		一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> vue面试题 -> 正文阅读

[JavaScript知识库]vue面试题

1.Vue与React 的区别？

Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是的，vue采用自底向上增? ? ? ? ? ? ? ? ? 的设计。vue的核心库只关注视图层

React是一个用用于构建用户界面的开源JavaScript库，主要用于构建UI

1.vue提供了一系列的api ， 而react 的api 很少

2.vue的思想是响应式的，也是基于是数据可变的，实现了数据的双向绑定，react整体是函数式的思想，是单项数据流，推崇结合immutable来实现数据不可变

3，vue 采用了template，react采用了jsx （本质上都是模板）

4.React依赖Virtual DoM， 而Vue。js使用的是DoM模板。React 采用的Virtual DoM会对渲染出来的结果做脏检查。

5.Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷的操作oM.

2.Vue的模板语法用的是哪个web模板引擎？ 说说你对这个模板引擎的理解

mustache模板系统

mustache.js是JavaScript中的mustache模板系统的零依赖实现。

Mustache是一种没有逻辑的模板语法。它可以应用于HITML,配置文件，源代码等任何地方。它通过使用散列或对象中提供的值在模板中展开标记来工作

我们称它为没有逻辑的模板，是因为它没有if语句，else子句和for循环，它只有标签。一些标签被替换为值或什么也没有或者一系列的值

3.Vue.js的两个核心是什么？

数据驱动，组件系统

4vue几种常用的指令

v-for , v-if . v-bind , v-on , v-show,v-else...

5，v-on可以绑定多个方法吗？

可以

6，v-show与v-if的区别

v-show和v-if都能控制元素的显示和隐藏。

不同点：

实现本质方法不同

? ? ? ? v-show本质就是通过设置css中的display设置为none， 控制隐藏

? ? ? ? v-if是动态的向DoM树内添加或者删除DoM元素

编译的区别

? ? ? ? v-show其实就是在控制css

? ? ? ? v-if切换有一个局部编译/卸载的过程，切换过程中合适的销毁和重建内部的事件监听和子组件编译的条件

? ? ? ? v-show 都会编译，初始值为false ，只是将display设为none，但它也编译了

? ? ? ? v-if初始值为false，就不会编译了

7，css只在当前组件起作用

在style标签中写入scoped即可

8，methods,computed,watch三者的区别

methods是个方法，执行的时候需要事件进行触发

computed 是一个计算属性，是实时响应的，只要data中的属性发生了变化那么就会触发computed计算属性是基于它们响应式依赖进行缓存的，

methods 调用的时候需要加（），而computed调用的时候是不需要加（）

watch 属性监听，watch用来监听属性的变化，当值发生变化的时候来执行特定的函数，watch监听属性的时候，会有2个参数newVal和oldVal一个新值一个旧值

9，计算属性computed 和 methods的区别

简单来说 在多次执行一个函数时 computed只会执行一次，methods会执行多次

不同的是计算属性是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时他们才会重新求值。这就意味着只要message还没有发生改变，多次访问reversedMessage计算属性会立即

返回之前的计算结果，而不必再次执行函数

10、computed和watch的区别
计算属性 computed :
1 、支持缓存，只有依赖数据发生改变，才会重新进行计算
2 、不支持异步，当 computed 内有异步操作时无效，无法监听数据的变化
3 、 computed 里面都是函数，另外函数必须要有返回值
侦听属性 watch ：
1 、不支持缓存，数据变，直接会触发相应的操作；
2 、 watch 支持异步；
watch 这个对象里面都是函数，函数的名称是 data 中的属性名称
immediate ：组件加载立即触发回调函数执行，
deep:true // 深度侦听
11、vue常用的修饰符？
number ： v-model.number="num" 将内容类型设置为 number
lazy : v-model.lazy="num" 当失去焦点时，才会对数据进行响应
trim ： v-model.trim="num" 去除左右俩侧空格
native ：相当于深度监听一个事件 @click.native="loginout"
12、你知道vue2.0兼容IE哪个版本以上吗？
不兼容 ie8 及以下
是因为 vue 的响应式原理是基于 es5 的 Object.defineProperty 的 , 而这个方法不支持 ie8 及以下
13、你知道vue中key吗？说说你对它的理解
答案一：作用的话，便于 diff 算法的更新， key 的唯一性，能让算法更快的找到需要更新的 dom ，需要
注意的是， key 要唯一，不然会出现渲染错位的情况
答案二：
key 的作用主要是为了高效的更新虚拟 DOM;
如果没有唯一的 key, 数据更新时 , 相同节点更新前后无法准确一一对应起来 , 会导致更新效率降低 ;
当页面的数据发生变化时， Diff 算法只会比较同一层级的节点：
1. 如果节点类型不同，直接干掉前面的节点，再创建并插入新的节点，不会再比较这个节点以后的子
节点 ;
2. 如果节点类型相同，则会重新设置该节点的属性，从而实现节点的更新 ; 14、vue的diff算法
https://www.cnblogs.com/wind-lanyan/p/9061684.html
15、vue部署上线前需要做哪些准备工作？
检查 publicPath ： './'
因为 vue 在打包后文件的根目录不对，需要设置
将根目录设置为空 或者 当前文件夹
16、vue在开发过程中要同时跟N个不同的后端人员联调接口（请求的url不一样）时你该怎么
办？
devServer 中把用 proxy 将所有的服务人员的地址代理都写进去，然后动态更改接口的 baseUrl ，这
样切换不同后端人员的时候不用重启
17、说下你的vue项目的目录结构，如果是大型项目你该怎么划分结构和划分组件呢？
views 目录存放一级路由的组件，即视图组件
Components 目录存放组件
Store 存放 vuex 相关文件
Router 目录存放路由相关文件
Untils 目录存放工具 js 文件
API 目录存放封装好的与后端交互的逻辑
Assets 存放静态文件
18、v-for循环中key有什么作用？
四个字 : 性能优化 ,
简述 : 让 vue 在更新数据的时候可以更有针对性的
diff 时更快更准确找到变化的位置
19、什么是双向绑定？原理是什么
双向数据绑定个人理解就是存在 data→view,view→data 两条数据流的模式。其实可以简单的理解为
change 和 bind 的结合。目前双向数据绑定都是基于 Object.defineProperty() 重新定义 get 和 set 方
法实现的。修改触发 set 方法赋值，获取触发 get 方法取值，并通过数据劫持发布信息 .
Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属
性， 并返回 这个对象。
答案二：
vue 实现数据双向绑定主要是：采用数据劫持结合发布者 - 订阅者模式的方式，通过
Object.defineProperty （）来劫持各个属性的 setter ， getter ，在数据变动时发布消息给订阅
者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，
Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter 。用户看不到
getter/setter ，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。
vue 的数据双向绑定 将 MVVM 作为数据绑定的入口，整合 Observer ， Compile 和 Watcher 三者，通过
Observer 来监听自己的 model 的数据变化，通过 Compile 来解析编译模板指令（ vue 中是用来解析
{{}} ），最终利用 watcher 搭起 observer 和 Compile 之间的通信桥梁，达到数据变化 —> 视图更新；
视图交互变化（ input ） —> 数据 model 变更双向绑定效果。
20、vue-cli3你有使用过吗？它和2.x版本有什么区别？
一、默认进行懒观察（ lazy observation ）
在 2.x 版本里，不管数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页
面载入时造成明显的性能压力。 3.x 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，
而且 3.x 的观察者更高效。 二、 3.0 新加入了 TypeScript 以及 PWA 的支持
三、双向数据绑定的区别
vue2.x 双向绑定的原理是通过 Object.defineProperty 中的 set 方法实现的数据劫持，但是有
一个弊端就是无法兼听到数组内部的数据变化（当然我们可以通过 arr = arr.concat([])) ，来实现
内部数据变化的检测。相比 Vue3 有一定的性能问题。
Vue3.x 是用 ES6 的语法 Proxy （ Proxy 怎么用大家可自行百度）对象来实现的，这个玩意儿也可
以实现数据的劫持，相比 Object.defineProperty 的优势是：可以检测到数组内部数据的变化
21、vue中的过滤器如何使用
Vue.filter()
参数 1 ：过滤器名称
参数 2 ：过滤器实现的方法 该方法中有 2 个参数
参数 1 为需要过滤的数据
参数 2 为过滤器传递的参
22、solt插槽
当组件当做标签进行使用的时候，用 slot 可以用来接受组件标签包裹的内容
23、vue中自定义指令怎么使用
自定义指令必须要在 vue 实例化之前创建
1 、全局创建
Vue.directive()
参数 1 ：指令名称
参数 2 ：指令实现的函数
参数 1 ：指令作用的元素 DOM 元素
参数 2 ：指令的信息
Vue.directive("color",(el,{value})=>{
el.style.color = value
})
new Vue({
el:"#app",
data:{
color:"red"
}
})
24、 如何实现父子组件传值、非父子组件传值还有非父子
父子属性，子父事件，非父子公共 $emit 发送 $on 接收
父子传值：父组件通过属性的方式向子组件传值，子组件通过 props 来接收
子父传值：子组件通过 $emit( " 事件 ", 传递的值 ) 发送一个事件，父组件通过自定义方法的函数来
接收子组件传过来的数据
非父子传值：创建一个 vue 实例 ，作为公共实例，传递的时候还是通过 $emit 发送一个自定义事
件
接收的时候通过 $on 接收这个事件
在 main 文件夹中创建一个公式实例
Vue.prototype.bus = new Vue();
25、 请说出vue中生命周期函数(钩子函数)
1 、 beforeCreate(): 组件实例刚刚被创建 (el 和 data 并未初始化 )
2 、 created(): 组件创建完成 , 属性已绑定 , 但 DOM 还未生成 ,$el 属性还不存在 ( 完成 data 数据的初始
化 )
3 、 beforeMount(): 模板编译 / 挂载之前 ( 完成了 el 和 data 初始化 )
4 、 Mounted(): 模板编译 / 挂载之后 ( 完成挂载 ) 5 、 beforeUpdate(): 组件更新之前
6 、 updated() ：组件更新之后
7 、 beforedestroy(): 组件销毁之前
8 、 destroyed(): 组件销毁之后
26、 请解释一下vue的中单向数据流的理解
数据从父级组件传递给子组件 , 只能单向绑定，子组件不能直接修改从父级传递过来的数据
数据只能从一个方向来修改状态 , 如果父组件给 N 个子组件进行了数据传递。那么某一个子组件中修改
了这个数 据，那么就会导致其他组件的数据也会发生改变。因此数据只能从一个方向来修改状态
27、 请说下什么是动态组件，如何使用，以及keep-alive的作用
动态组件： 让多个组件使用同一个挂载点，并动态进行切换。这就是动态组件 通过保留 component
元素，动态的绑定它的 is 特性，可以实现动态组件
keep-alive 包裹动态组件 ( 组件 ) 时，会缓存不活动的组件实例，而不是销毁它们 组件切换调用的时
候本身会被销毁掉的，只要加上 keep-alive 进行包裹，就不会被销毁，而是被缓存起来， 下一次使
用的时候直接从缓存中调用
28、 请说下组件的生命周期有哪些？
activated && deactivated:
activated ：当组件为活跃状态的时候触发 ( 活跃状态：进入页面的时候 )
deactivated ：缓存状态的时候触发
29、 为什么在组件内部data是一个函数而不是一个对象？
因为每次调用组件的时候都会重新生成一个对象 , 如果是一个对象的情况下， data 数据会进行复用 ( 因
为对象是引 用数据类型 ), 而当 data 是一个函数的时候每次调用的时候就会返回一个新的对象
30、单页面开发首屏加载慢怎么解决？单页面开发首屏加载 白屏怎么解决？
运用路由懒加载，在路由懒加载里面，就不需要引入组件间
通常都是用第一种
有俩种方式：
1 、 ES6 的 import
()=>import(" 组件的路径 ")
2 、异步组件
component ： (resolve)=>require([" 组件的路径 "],resolve)
31、$route和$router的区别
$route 是 “ 路由信息对象 ” ，包括 path ， params ， hash ， query ， fullPath ， matched ， name 等路由
信息参数
$router 是 “ 路由实例 ” 对象包括了路由的跳转方法，钩子函数等。
32、如何检测路由参数的变化
通过属性监听来实现 或者 beforeRouterUpdate()
watch:{ "$router"(){} }
beforeRouterUpdate(to,from,next);
33、请说出路由配置项常用的属性及作用
路由配置参数：
path : 跳转路径
component : 路径相对于的组件
name: 命名路由
children: 子路由的配置参数 ( 路由嵌套 ) props:true 路由解耦
redirect : 重定向路由
34、 路由跳转的方式有哪几种？
1 、 a 标签进行跳转。例如首页
2 、 router-link 进行跳转 例如： <router-link "to="/home"> 首页
3 、编程式路由 例如： this.$router.push()
35、 路由传值的方式有哪几种
第一种 name ， params 传值
传值： <router-link :to="{name:'hi',params:{a:1,b:2}}">hi 组件 </router-link>
接收： {{$route.params.b}} this.$route.params.a
刷新页面时，数据会丢失
第二种 path,query 传值
传值： <router-link :to="{path:'hi',query:{a:1,b:2}}">hi 组件 </router-link>
接收： {{$route.query.a}} this.$route.query.a
刷新页面时，数据不会丢失
第三种 name,parmas 传值
传值： <router-link :to="{name:'hi',query:{a:1,b:2}}">hi 组件 </router-link>
接收： {{$route.query.a}} this.$route.query.a
刷新页面时，数据不会丢失
path 路径属性传值。例如： path:"/home/:id/name"; 接受的时候通过 this.$route.params
第四种
路由解耦。在配置路由的时候添加 props 属性为 true, 在需要接受参数的组件页面通过 props 进行
接受
36、 编程式导航使用的方法以及常用的方法
路由跳转 ： this.$router.push()
路由替换 : this.$router.replace()
后退： this.$router.back()
前进 ： this.$router.forward()
37、 什么是路由守卫？路由的钩子函数有哪些？分别说出使用的场景，及用法
1 、什么是路由守卫？ 路由跳转前后做的一些验证
2 、路由常见的钩子函数 berforeRouteEnter 、 beforeRouteUpdate 、 beforeRouteLeave
使用的场景：
beforeRouteEnter: 当路由进入之前 : 登陆验证、热力图的记录、
beforeRouteUpdate: 当路由进行更新的时候。如果当前路由发生了变化，但是不需要组件的创建销毁
的过程的 时候，就需要用到这个钩子函数
beforeRouterLeave: 当路由离开的时候、当用户没有进行支付离开的时候、当用户填写完信息没有保
存的时 候 .....
38、Vue的路由实现：hash模式 和 history模式
hash 模式：在浏览器中符号 “#” ， # 以及 # 后面的字符称之为 hash ，用 window.location.hash 读取；
特点： hash 虽然在 URL 中，但不被包括在 HTTP 请求中；用来指导浏览器动作，对服务端安全无用，
hash 不会重加载页面。
hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.xxx.com ，因此对于后
端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。 history 模式： history 采用 HTML5 的新特性；且提供了两个新方法： pushState （），
replaceState （）可以对浏览器历史记录栈进行修改，以及 popState 事件的监听到状态变更。
history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如
http://www.xxx.com/items/id 。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。
Vue-Router 官网里如此描述： “ 不过这种模式要玩好，还需要后台配置支持 …… 所以呢，你要在服务端
增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个
index.html 页面，这个页面就是你 app 依赖的页面。 ”
39、 跨域的方式
1 、 jsonp
jsonP 是一种解决跨域的一种手段，利用了 src 这个属性不受同源策略的影响，可以访问其他页
面的数据。
jsonP 的原理：
1. 动态创建 script 标签
2. 将请求数据的地址赋值给 src
3. 设置全局函数
4. 将全局函数拼接到 scr 地址的后面 （百度接口的 key 值是 cb 其他网站的 key 值是
callback ）
5. 将 script 标签插入到页面
6. 插入完以后要删除 script 标签
2 、中间件代理（反向代理）
3 、服务器允许跨域
40、 第一次页面加载会触发哪几个钩子
第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子
41、ref与 document 的区别
document 是从整个页面去查找 dom 结构，这个 DOM 结构肯定是已经插入到页面的 dom 结构
ref 是从当前虚拟 DOM 中找到当前元素， ref 是从内存中找到 DOM 结构
42、vuex
vuex 是一个集中式的数据状态管理器
vuex 的数据流程（想要修改数据的话）
1 、在组件里面先通过 dispatch 触发 actions 里面的方法
2 、再通过 commit 触发 mutations 里面的方法
state: 存放你的数据（用来储存各个组件中公有的状态）
mutations: 修改数据（用来做数据的增删改查）
面试的时候说 mutations 里面的方法用来修改 state 中的数据
actions: 实现异步操作
getters: 相当于之前的计算属性
modules: 模块
mutations 里面的方法通过 store.commit 方法触发 this.$store.commit
actions 里面所有的函数都会有 2 个参数
参数一 是一个对象 包含 {commit dispatch state}
参数二 是传递过来的参数
Action 里面的方法通过 store.dispatch 方法触发 this.$store.dispatch
43、对于MVVM的理解？
MVVM 是 Model-View-ViewModel 的缩写。
Model 代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑
View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来。
ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步 View 和
Model 的对象，连接 Model 和 View 。 在 MVVM 架构下， View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互， Model 和
ViewModel 之间的交互是双向的， 因此 View 数据的变化会同步到 Model 中，而 Model 数据的变化也
会立即反应到 View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而 View 和 Model 之间的同步
工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作 DOM, 不需要关注
数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。
44、观察发布者模式
观察者模式定义了对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的
对象都将得到通知，并自动更新
在现在的发布订阅模式中，称为发布者的消息发送者不会将消息直接发送给订阅者，这意味着发布者
和订阅者不知道彼此的存在。在发布者和订阅者之间存在第三个组件，称为消息代理或调度中心或中
间件，它维持着发布者和订阅者之间的联系，过滤所有发布者传入的消息并相应地分发它们给订阅
者。
45、跨域
1 、 jsonp
2 、中间件代理（反向代理）
devServer ： {
proxy ： {
'/api': {
// 请求的地址
target: 'http://localhost:3003',
// 是否跨域
changeOrigin: true,
//websocket 配置
ws: true,
// secure:true,
// 路径重写规则 /api/users/user
pathRewrite: {
'^/api': ''
}
}
}
}
持续更新。。。
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线（Vue中运用 AntVG6）
Vue事件处理的基本使用
Vue后台项目的记录 （一）
前后端分离vue跨域，devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-07-30 12:39:12  更:2021-07-30 12:41:15 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/2 17:37:52-

图片自动播放器
↓图片自动播放器↓ 		TxT小说阅读器
↓语音阅读,小说下载,古典文学↓ 		一键清除垃圾
↓轻轻一点,清除系统垃圾↓ 		图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码