“金三银四”的时候到了,一大批准备跳槽的程序员蠢蠢欲动,小编最近也在投简历,找工作。现在很多公司都要求vue、react、ng三大主流框架中的一两个。小编在此总结一下vue常见的面试题,希望对面试的小伙伴有帮助。
一、Vue的生命周期的理解
beforeCreate(创建前) 在数据观测和初始化事件还未开始。
created(创建后) 完成数据观测,属性和方法的运算,初始化事件,$el属性还没有显示出来。
beforeMount(载入前) 在挂载开始之前被调用,相关的render函数首次被调用。实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
mounted(载入后) 在el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用。实例已完成以下的配置:用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
beforeUpdate(更新前) 在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程。
updated(更新后) 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
beforeDestroy(销毁前) 在实例销毁之前调用。实例仍然完全可用。
destroyed(销毁后) 在实例销毁之后调用。调用后,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
a、第一次页面加载会触发哪几个钩子?
会先后触发beforeCreate, created, beforeMount, mounted。
b、DOM 渲染在哪个周期中就已经完成
DOM 渲染在 mounted 中就已经完成了。
二、Vue实现数据双向绑定的原理
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变更双向绑定效果。
三、Vue组件间的参数传递
常见传参方式
父组件向子组件传值:
1)子组件在props中创建一个属性,用来接收父组件传过来的值;
2)在父组件中注册子组件;
3)在子组件标签中添加子组件props中创建的属性;
4)把需要传给子组件的值赋给该属性;
子组件传给父组件:
$emit方法传递参数。
四、vue中的作用。
是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。
五、vue的指令有哪些?
v-text,v-html, v-once, v-show,v-if, v-for,v-bind,v-model,自定义指令。
六、v-for中为什么使用key?
使用v-for更新已渲染的元素列表时,默认用就地复用策略;列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素;(因为Virtual DOM 使用Diff算法实现的原因)。
七、v-show和v-if指令的共同点和不同点。
v-show指令是通过修改元素的display的CSS属性让其显示或者隐藏。
v-if令是直接销毁和重建DOM达到让元素显示和隐藏的效果。
八、如何让CSS只在当前组件中起作用
将当前组件的
九、封装组件步骤
1. 建立组件的模板,先把架子搭起来,写写样式,考虑好组件的基本逻辑。
2. 准备好组件的数据输入。即分析好逻辑,定好 props 里面的数据、类型。
3. 准备好组件的数据输出。即根据组件逻辑,做好要暴露出来的方法。
4. 封装完毕了,直接调用即可。
十、引入组件的步骤
1.采用ES6的import ... from ...语法或CommonJS的require()方法引入组件
2.对组件进行注册,代码如下
Vue.component('my-component', { template: '
3.使用组件
十一、vuex有哪几种属性?
State、 Getter、Mutation 、Action、 Module
state => 基本数据(数据源存放地)。
getters => 从基本数据派生出来的数据 。
mutations => 提交更改数据的方法,同步。
actions => 像一个装饰器,包裹mutations,使之可以异步。
modules => 模块化Vuex。
Mutations的更改是同步更改,用于用户执行直接数据更改,this.$store.commit(‘名’)触发
Actions的更改是异步操作,用于需要与后端交互的数据更改,this.$store.dispath(“名”)触发
注意:
1):定义actions方法创建一个更改函数时,这个函数必须携带一个context参数,用于触发mutations方法,context.commit(‘修改函数名’ , ’异步请求值’);
2):mutations第一个参数必须传入state,第二个参数是新值。
十二、axios 简介
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。
get请求
// 向具有指定ID的用户发出请求
axios.get('/user?ID=12345').then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});
// 也可以通过 params 对象传递参数
axios.get('/user', {params: {ID: 12345}}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});
post请求
axios.post('/user', {firstName: 'Fred',lastName: 'Flintstone'}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});
并发请求
function getUserAccount() {return axios.get('/user/12345');} function getUserPermissions() {return axios.get('/user/12345/permissions');}axios.all([getUserAccount(), getUserPermissions()]).then(axios.spread(function (acct, perms) {//两个请求现已完成}));
你面试的时候碰到哪些关于vue的面试问题呢,交流一下,互相学习。前端大佬有补充的,不胜赐教。加油加油。
每日一句
愿你在今后的每个日子里即使单枪匹马,也能勇敢无畏。