vue面试题目
- vue数据
- 1. 说一下Vue的双向绑定数据的原理
- 2. 解释单向数据流和双向数据绑定
- 3. Vue 如何去除url中的
- 4. 对 MVC、MVVM的理解
- 5. 介绍虚拟DOM
- 6. vue生命周期的理解
- 7. 组件通信
- 8. vue-router 路由实现
- 9. v-if 和 v-show 区别
- 10. $ route和$router的区别
- 11. NextTick 是做什么的
- 12. Vue 组件 data 为什么必须是函数
- 13. 计算属性computed 和事件 methods 有什么区别
- 14. 对比 jQuery ，Vue 有什么不同
- Vue 中怎么自定义指令
- 16. Vue 中怎么自定义过滤器
- 17. 对 keep-alive 的了解
- 18. Vue 中 key 的作用
- 19. Vue 的核心是什么
- 20. vue 等单页面应用的优缺点
- 21. vue-router 使用params与query传参有什么区别
- MVVM的设计思想的优势?
- 事件传参
- 自定义指令：directive
- 计算属性：computed
- 监听器：watch
- 过滤器
- 组件
- 如何创建一个全局组件
- 如何创建一个局部组件
- 如何定义局部自定义指令
- 如何定义局部过滤器
- 组件传值
- 父向子传值
- 子向父传值
- 兄弟组件传值
- 跨组件传值
- 组件插槽
- Promise的使用
- axios拦截器
- 路由
- 在vue中路由传参
- 嵌套路由
- 编程式导航
- 路由钩子
- vue脚手架的安装和使用
- 命令行方式
- ui界面方式
- 安装element-ui
- 使用element中select组件
- 安装axios
- vue动画
- 利用类名添加动画
- 结合css动画库设置动画
- 加深面试题
- 虚拟dom
- Diff算法
- axios配置代理服务器
- 小程序分包加载
- v-if和v-for避免结合使用
- vue中route和router的区别
- 如何封装一个插件
- vueI18n的使用
- keep-alive
- 使用了本地存储为什么还使用vuex？
- js
- 重中之重、Vue的双向数据绑定原理是什么？
- 一、什么是MVVM？
- 二、mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？
- 三、vue的优点是什么？
- 四、 组件之间的传值？
- 五、路由之间跳转
- 六、vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？
- 七、vue如何实现按需加载配合webpack设置
- 八、vuex面试相关
- （1）vuex是什么？怎么使用？哪种功能场景使用它？
- （2）vuex有哪几种属性？
- （3）不用Vuex会带来什么问题？
- 九、 v-show和v-if指令的共同点和不同点
- 十、 如何让CSS只在当前组件中起作用
- 十一、的作用是什么?
- 十二、Vue中引入组件的步骤?
- 十三、指令v-el的作用是什么?
- 十四、在Vue中使用插件的步骤
- 十五、请列举出3个Vue中常用的生命周期钩子函数
- 十六、active-class是哪个组件的属性？
- 十七、怎么定义vue-router的动态路由以及如何获取传过来的动态参数？
- 十八、vue-router有哪几种导航钩子？
- 十九、生命周期相关面试题
- （1）、什么是vue生命周期
- （2）、vue生命周期的作用是什么
- （3）、vue生命周期总共有几个阶段
- （4）、第一次页面加载会触发哪几个钩子
- （5）、DOM 渲染在 哪个周期中就已经完成
- （6）、简单描述每个周期具体适合哪些场景
- 二十、说出至少4种vue当中的指令和它的用法？
- 二十一、vue-loader是什么？使用它的用途有哪些？
- 二十二、scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？
- 二十三、为什么使用key？
- 二十四、为什么避免 v-if 和 v-for 用在一起
- 二十五、VNode是什么？虚拟 DOM是什么？
- 二十六、vue-loader是什么？使用它的用途有哪些？
- 二十八、vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？
- 二十九、聊聊你对Vue.js的template编译的理解？
前言
感兴趣的小伙伴也可以点击 这里，查看前端方面的其他面试题，欢迎 star 关注
如果文章中有出现纰漏、错误之处，还请看到的小伙伴留言指正，先行谢过
以下 ↓
实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过 来劫持各个属性的 ，，在数据变动时发布消息给订阅者，触发相应监听回调。
默认使用 hash 模式，所以在路由加载的时候，项目中的 url 会自带 。如果不想使用 ， 可以使用 的另一种模式 。
需要注意的是，当我们启用 模式的时候，由于我们的项目是一个单页面应用，所以在路由跳转的时候，就会出现访问不到静态资源而出现 404 的情况，这时候就需要服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 页面。
MVC
MVVM
参考这里
生命周期函数：在不同的生命周期阶段会自动执行对应的函数，而这些函数则被成为生命周期函数
3、非父子组件、兄弟组件之间的数据传递
Vuex 数据管理，也可以通过vuex全局状态管理器去实现。
为 r 实例，想要导航到不同 URL，则使用 方法 为当前 跳转对象里面可以获取 、 、 、 等
因为js本身的特性带来的，如果 是一个对象，那么由于对象本身属于引用类型，当我们修改其中的一个属性时，会影响到所有Vue实例的数据。如果将 作为一个函数返回一个对象，那么每一个实例的 属性都是独立的，不会相互影响了
我们可以将同一函数定义为一个 method 或者一个计算属性。对于最终的结果，两种方式是相同的
不同点：
: 计算属性是基于它们的依赖进行缓存的,只有在它的相关依赖发生改变时才会重新求值对于 ，只要发生重新渲染，method 调用总会执行该函数
专注视图层，通过操作 DOM 去实现页面的一些逻辑渲染； Vue 专注于数据层，通过数据的双向绑定，最终表现在 DOM 层面，减少了 DOM 操作Vue 使用了组件化思想，使得项目子集职责清晰，提高了开发效率，方便重复利用，便于协同开发
全局注册
局部注册
参考 官方文档-自定义指令
可以用全局方法 注册一个自定义过滤器，它接收两个参数：过滤器 ID 和过滤器函数。过滤器函数以值为参数，返回转换后的值
过滤器也同样接受全局注册和局部注册
是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染
数据驱动 组件系统
优点：
- 良好的交互体验
- 良好的前后端工作分离模式
- 减轻服务器压力
缺点：
- SEO难度较高
- 前进、后退管理
- 初次加载耗时多
可以通过 与 进行传参
- params 是路由的一部分,必须要有。query 是拼接在 url 后面的参数，没有也没关系
- params 不设置的时候，刷新页面或者返回参数会丢，query 则不会有这个问题
文档
为什么自定义指令？
vue提供的系统指令满足不了我们的需求，那么我们就需要自定义指令
通过Vue.directive进行自定义指令的定义
- ：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
- ：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
- ：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
定义的时候是一个方法，使用的时候当作属性使用
只要return后面的数据发生变化，该计算属性就会重新计算
计算属性具有缓存功能
watch侦听器如果监听的是一个对象，需要开启深度监听
通过Vue.component来创建一个全局组件，第一个参数是组件名字，第二个参数是组件的配置对象，可以通过template配置组件的结构，data定义数据等等
为什么组件内部的data是一个函数？
为了保证组件在每次使用的时候保证数据是当前组件唯一的，互不影响
在组件内部通过components来创建一个局部组件
全局组件和局部组件的区别
局部组件：只能在当前的父组件中使用
全局组件： 在任意地方使用
在组件内部通过directives来创建一个局部指令
全局指令和局部指令的区别
局部指令：只能在当前的组件中使用
全局指令： 在任意地方使用
在组件内部通过filters来创建一个局部过滤器
全局过滤器和局部过滤器的区别
局部过滤器：只能在当前的组件中使用
全局过滤器： 在任意地方使用
- 父亲怎么传：通过属性绑定形式传
- 儿子怎么接收：通过props来接收
- 子怎么传：通过this.$emit触发一个自定义事件，并且发送一个值
- 父怎么接收：通过定义自定义事件的事件函数的形参来接收
定义一个事件中心，或者是第三方
接收值的组件：通过该事件中心的$on来定义自定义事件的事件函数来接收值
另一个兄弟组件怎么传：通过事件中心的$emit触发对应的 刀了 on的事件，并且把值传递过去
- 默认插槽：
- 在组件标签中间可以传递一些子节点
- 组件内部利用slot标签进行接收
- 具名插槽
- 在组件标签中间通过定义slot的名字传递子节点
- 组件内部利用slot的name进行对应接收
- 作用域插槽
- 在组件内部定义数据，将数据传递给插槽的结构
- 通过给slot动态绑定属性
插槽内部：通过slot-scope=“scope”来接收
利用Promise处理异步解决回调地狱的问题
Promise的all的方法
Promise的race的方法
面试题：
现在有三个接口地址，需要三个接口地址请求完事之后进行下一步的逻辑处理(不一定按顺序请求完成)
请求拦截
响应拦截
什么是路由？
路由就是对应关系，组件和url地址，根据不同的地址显示不同的组件，路由也是实现spa（单页面应用程序）的主要核心，因为单页面应用程序，就是只有一个html，在这个html里面切换组件，根据url，例如地址为/home,在这个页面中就显示home组件
前端路由：url和组件
后端路由：根据不同的地址请求不同的接口
路由
- params传参
在跳转的时候可以通过
路由规则：
组件内部怎么来接收参数
- query传参
在跳转的时候可以通过
组件内部怎么来接收参数
路由模式注意的问题
全局钩子：都会对所有的路由进行拦截
：进入之前
已经进入了
路由独享钩子：可以针对某一个路由进行拦截，这个需要写在路由规则里
组件内的守卫：
针对组件进行拦截
配置文档
利用vue.config.js关闭esLint
文档
安装vue-cli-plugin-element插件
注册组件
使用组件
复制数据
文档
在进入/离开的过渡中，会有 6 个 class 切换。
利用类名实现动画
自定义动画类名
引入css动画库
通过、设置动画
本质上就是一个JS对象，用来描述你希望在屏幕上看到的内容
虚拟dom高效更新执行过程
- 初次渲染时，会根据model数据创建一个虚拟DOM对象（树）
- 根据虚拟DOM生成真正的DOM，渲染到页面
- 当数据变化后，会重新根据新的数据，创建新的虚拟DOM对象（树）
- 与上一次得到的虚拟DOM对象，使用Diff算法比对（找不同），得到需要更新的内容
- 最终，React只将变化的内容更新（patch）到DOM中，重新渲染到页面
- 什么是虚拟dom：用js对象来表示页面上dom元素的的样式体现
- 虚拟dom的作用：高效更新页面，还有就是让react脱离了浏览器的概念
- 怎么来高效更新页面的：就是在第一次渲染页面的时候生成一份初始的虚拟dom树，然后当数据改变之后，再生成一份虚拟dom树，然后根据新旧dom树进行对比，对比完成之后，把有区别的进行更新
- diff算法的作用就是：新旧虚拟dom树在对比的时候就是通过diff算法来对比的
- diff算法又是怎么去对比的：tree diff、component diff、element diff
面试语术：
你知道虚拟dom吗？简单又谈一下？
虚拟dom可以实现高效更新，（后面如果自己能说一气说出来）
如何实现高效更新的？
利用新旧虚拟dom树进行对比，从而进行局部进行更新
如何进行新旧dom树进行对比？
利用diff算法，主要是tree diff树对比，component diff 组件对比，element diff 元素对比
加上一些其他话术
所以虚拟dom在前端中不管是vue、react等等都采用
什么是跨域？
在浏览器里面域名、端口、ip地址、协议，有任何一项不同，则跨域
A网站：http://localhost:8080/#/
B网站：http://localhost:3000/#/
处理跨域的方式？
JsonP（只能处理get请求）、cors（后端开启）、代理服务器
某些情况下，开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。
在构建小程序分包项目时，构建会输出一个或多个分包。每个使用分包小程序必定含有一个主包。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据开发者的配置进行划分。
在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。
目前小程序分包大小有以下限制：
代码演示,分包加载之前
抽离之后
图片或者图标等资源文件使用线上资源
因为v-for的优先级大于v-if,所以会先根据所有数据生成结构，然后在根据，v-if进行按需渲染
我们可以采用计算属性来避免此问题，这样的话，先通过计算属性，计算出要渲染的数据，然后直接循环计算属性即可
定义一个button组件，在index.js中引入并注册
在components中创建一个index.js
在main.js中导入该js文件，当调用Vue.use方法，会默认调用内部的install方法
面试题
你有封装过插件吗？ Vue.use的原理是什么？
当调用Vue.use方法，会默认调用内部的install方法,install这个方法默认的第一个形参就是Vue,这样的话我们就可以通过Vue注册一些全局组件，给Vue扩展一下方法。
vue中实现语言切换的方式如何实现的
1.NPM 项目安装
2.使用方法
3.页面数据使用
en.js
在main.js中引入语言包
数据渲染和切换
vuex的数据是响应式的，而本地存储的数据不是响应式的，使用本地存储是为了让数据持久化
js静态成员和实例成员
静态成员：静态成员 在构造函数本身上添加的成员 如下列代码中 sex 就是静态成员,静态成员只能通过构造函数来访问
实例成员：实例成员就是构造函数内部通过this添加的成员 如下列代码中uname age sing 就是实例成员,实例成员只能通过实例化的对象来访问
声明式（标签跳转） 编程式（ js跳转）
vue框架中状态管理。在main.js引入store，注入。新建一个目录store，…… export 。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车
将当前组件的
包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染。
3）使用组件
提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标.可以是 CSS 选择器，也可以是一个 HTMLElement 实例
vue-router模块的router-link组件。
答： Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。
答：它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
答：可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后
答：第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子
答：DOM 渲染在 mounted 中就已经完成了。
v-if：判断是否隐藏；v-for：数据循环；v-bind:class：绑定一个属性；v-model：实现双向绑定
当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。
当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，通过v-if 移动到容器元素，不会再重复遍历列表中的每个值。取而代之的是，我们只检查它一次，且不会在 v-if 为否的时候运算 v-for。
Vue在 页面上渲染的节点，及其子节点称为“虚拟节点 (Virtual Node)”，简写为“VNode”。“虚拟 DOM”是由 Vue 组件树建立起来的整个 VNode 树的称呼。
到此这篇vue插槽传参（vue插槽怎么传值）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/30865.html