Vue高频面试题--面试必备(背)_vue面经怎么背

10、vue.cli中怎样使用自定义的组件?有遇到过哪些问题吗?

11、说下你对mvvm的理解?双向绑定的理解?

12、请说下具体使用vue的理解?

13、你是怎么认识vuex的?

14、vuex有哪几种属性?

15、vuex的State特性是?

16、vuex的Getter特性是?

17、vuex的Mutation特性是?

18、的作用是什么?

19、vue中ref的作用是什么?

20、vue中组件直接的通信是如何实现的?

21.    vue-cli 工程中常用的 npm 命令有哪些?

22.    vue-router 路由的两种模式。

23.    Vue 打包命令是什么?Vue 打包后会生成哪些文件?

24.    Vue 如何优化首屏加载速度?


1、 Vue的双向数据绑定原理是什么?

vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty()来劫持各个属性的 setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。 具体步骤: 第一步:需要
observe 的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter 和 getter,这样的 话,给这个对象的某个值赋值,就会触发 setter,那么就能监听到了数据变化。 第二步:compile 解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对 应的节点绑定更新函数, 添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图。 第三步:Watcher 订阅者是
Observer 和 Compile 之间通信的桥梁,主要做的事情是:1、在自身实例化时往属 性订阅器(dep)里面添加自己 2、自身必须有一个 update()方法 3、待属性变动 dep.notice()通知时,能调用自身的update()方法,并触发 Compile 中绑定的回调,则功成身退。 第四步:MVVM 作为数据绑定的入口, 整合 Observer、Compile 和 Watcher 三者,通过 Observer 来监听自己 的 model 数据变化,通过Compile 来解析编译模板指令,最终利用 Watcher 搭起 Observer 和 Compile 之间的通信 桥梁,达到数据变化 -> 视图更新;视图交互变化(input)-> 数据 model 变更的双向绑定效果。

2、请详细说下你对vue生命周期的理解?

总共分为            8            个阶段创建前/后,载入前/后,更新前/后,销毁前/后。创建前/后: 1、在 beforeCreated 阶段,vue 实例的挂载元素 e l 和数据对象 d a t a 都为 u n d e fi n e d ,还未初始化。 2 、在 c r e a t e d 阶段, v u e 实例的数据对象 d a t a 有了, el 和数据对象 data 都为 undefined,还未初始化。2、在 created 阶段,vue 实例的数据对象 data 有了, el和数据对象data都为undened,还未初始化。2、在created阶段,vue实例的数据对象data有了,el 还没有。
3、载入前/后:在 beforeMount 阶段,vue 实例的$el 和 data 都初始化了,但还是挂载之前为虚拟的
dom 节 点,data.message 还未替换。
4、在 mounted 阶段,vue 实例挂载完成,data.message 成功渲染。
5、更新前/后:当 data 变化时,会触发 beforeUpdate 和 updated 方法。
6、销毁前/后:在执行 destroy 方法后,对 data 的改变不会再触发周期函数,说明此时 vue 实例已经解除了 事件监听以及和 dom 的绑定,但是 dom 结构依然存在

3、请说出vue.cli项目中src目录每个文件夹和文件的用法?

assets 文件夹是放静态资源;
components 是放组件;
router 是定义路由相关的配置;
view 视图;
app.vue 是一个应用主组件;
main.js 是入口文件

4、怎么定义vue-router的动态路由?怎么获取传过来的动态参数?

在 router 目录下的 index.js 文件中,对 path 属性加上/:id。 使用 router 对象的 params.id

5、vue-router有哪几种导航钩子?

1、全局导航钩子:router.beforeEach(to,from,next),作用:跳转前进行判断拦截。
2、组件内的钩子;
3、单独路由独享组件

6、scss是什么?在vue.cli中的安装使用步骤是?有哪几大特性?

css 的预编译。 使用步骤:
第一步:用 npm 下三个 loader(sass-loader、css-loader、node-sass)
第二步:在 build 目录找到 webpack.base.config.js,在那个 extends 属性中加一个拓展.scss 第三步:还是在同一个文件,配置一个 module 属性
第四步:然后在组件的 style 标签加上 lang 属性 ,例如:lang=”scss” 有哪几大特性:1、可以用变量, 例如($变量名称=值);2、可以用混合器;3、可以嵌套

7、mint-ui是什么?怎么使用?说出至少三个组件使用方法?

基于 vue 的前端组件库。npm 安装,然后 import 样式和 js, vue.use(mintUi)全局引入。 在单个组件局部引入:import{Toast}from‘mint-ui’。  组件一:Toast(‘登录成功’);  组件二:mint-header;   组件三:mint-swiper

8、请说下封装 vue 组件的过程?

首先,组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块,解决了我们传统项  目开 发:效率低、难维护、复用性等问题。 然后,使用 Vue.extend 方法创建一个组件,然后使用
Vue.component 方法注册组件。子组件需要数据,可以 在 props 中接受定义。而子组件修改好数据后,想把数据传递给父组件。可以采用 emit 方法

9、vue-loader是什么?使用它的用途有哪些?

解析.vue 文件的一个加载器,跟 template/js/style 转换成 js 模块。 用途:js 可以写 es6、style 样式可以 scss 或 less、template 可以加 jade 等

10、vue.cli中怎样使用自定义的组件?有遇到过哪些问题吗?

第一步:在 components 目录新建你的组件文件(smithButton.vue),script 一定要 exportdefault
第二步:在需要用的页面(组件)中导入:
importsmithButtonfrom‘…/components/smithButton.vue’
第三步:注入到 vue 的子组件的 components 属性上面,components:{smithButton} 第四步:在 template 视图 view 中使用,
问题有:smithButton 命名,使用的时候则 smith-button。

11、说下你对mvvm的理解?双向绑定的理解?

mvvm 就是 vm 框架视图、m 模型就是用来定义驱动的数据、v 经过数据改变后的 html、vm 就是用来实现双 向绑定
双向绑定:一个变了另外一个跟着变了,例如:视图一个绑定了模型的节点有变化,模型对应的值会跟着  变

12、请说下具体使用vue的理解?

1、使用 vue 不必担心布局更改和类名重复导致的 js 重写,因为它是靠数据驱动双向绑定,底层是通过
Object.defineProperty() 定义的数据 set、get 函数原理实现。
2、组件化开发,让项目的可拓展性、移植性更好,代码重用性更高,就好像农民工建房子,拿起自己  的工 具包就可以开工。项目经理坐等收楼就好。
3、单页应用的体验零距离接触安卓原生应用,局部组件更新界面,让用户体验更快速省时。
4、js 的代码无形的规范,团队合作开发代码可阅读性更高。

13、你是怎么认识vuex的?

1、vuex 可以理解为一种开发模式或框架。比如 PHP 有 thinkphp,java 有 spring 等。
2、通过状态(数据源)集中管理驱动组件的变化(好比 spring 的 IOC 容器对 bean 进行集中管理)。
3、应用级的状态集中放在 store 中; 改变状态的方式是提交 mutations,这是个同步的事物; 异步逻辑 应该封装在 action 中。

14、vuex有哪几种属性?

有五种,分别是 State、 Getter、Mutation 、Action、 Module

15、vuex的State特性是?

1、Vuex 就是一个仓库,仓库里面放了很多对象。其中 state 就是数据源存放地,对应于与一般 Vue 对象 里面的 data。
2、state 里面存放的数据是响应式的,Vue 组件从 store 中读取数据,若是 store 中的数据发生改变, 依赖 这个数据的组件也会发生更新。
3、它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性中。

16、vuex的Getter特性是?

前端框架

前端框架太多了,真的学不动了,别慌,其实对于前端的三大马车,Angular、React、Vue 只要把其中一种框架学明白,底层原理实现,其他两个学起来不会很吃力,这也取决于你以后就职的公司要求你会哪一个框架了,当然,会的越多越好,但是往往每个人的时间是有限的,对于自学的学生,或者即将面试找工作的人,当然要选择一门框架深挖原理。

以 Vue 为例,我整理了如下的面试题。

Vue部分截图

  • 13
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值