vue 面试题2020-05-07

2020-10-16 本文已影响0人一心一念一间

vue父子组件生命周期调用顺序
加载渲染过程和先序深度遍历顺序有关
父beforeCreate-->父created --> 父beforeMount -->子beforeCreate -->子created-->子beforeMounted -->子mounted-->父mounted
子组件更新过程
父boforeUpdate -->子boforeUpdate-->子updated-->父updated
父组件更新过程
父beforeUpdate-->父uptated
销毁过程
父beforeDestory-->子beforeDestory-->子desroyed-->父destoryed
理解：
组件的调用顺序都是先父后子，渲染完成的顺序肯定是先子后父
组件的销毁操作是先父后子，销毁完成的顺序是先子后父
vue中相同的逻辑如何抽离
vue.mixin 用法给组件每个生命周期，函数都混入一些公共逻辑
为什么使用异步组件异步组件是一个函数
import() 如果组件功能多打包的结果会变大，可以采用异步方式加载组件，实现文件的分割加载
插槽与作用域插槽区别
创建组件虚拟节点时，会将组件的儿子的虚拟节点保存起来，当初始化组件时，通过插槽属性将儿子进行分类{a:[vnode],b:[vnode]}
渲染组件时会拿对应的slot属性的节点进行替换操作（插槽的作用域为父组件）
作用域插槽
在解析的时候，不会作为组件的孩子节点。会解析成函数，当子组件渲染时，会通知此函数进行渲染（插槽的作用域为子组件）
keep-alive
缓存组件，当组件切换时不会对当前组件进行卸载，常用的2个属性 include.exclude 2个生命周期 actived deactived
hash路由和history路由
vue-router 中的导航守卫有哪些完整的导航解析流程
vuex action 和 mutation区别
mutation 是同步更新数据用的$watch
action 是异步操作
vuex工作原理
箭头函数与this ，能否用 new执行？
1 没有自己的this，继承的上下文的this，call apply 所以不能改变this
2 箭头函数中没有arguments，只能通过…arg获取传递的参数数组
3 箭头函数没有prototype ，没有this ，所以不能用new

编码优化
1 不要将所有的数据都放到data中，data中的数据都会增加getter和setter，会收集对应的watcher
2v-for 绑定事件时用事件代理
3 spa页面采用 keep-alive 缓存组件
4 拆分组件提高复用
5 key 写上
6 object.freeze 冻结数据静态数据可以冻结一下
7 合理使用懒加载异步组件
8 数据持久化问题
vue 加载性能优化
长列表插件 vue-virtual-scroll-list
图片懒加载 vue-lazyload
用户体验
app-skeleton 骨架屏先显示个框
app-shell APP壳先显示个导航等
pwa 离线缓存用的很少了

SEO优化
预渲染插件 prerender-spa-plugin
服务端渲染 ssr

2. async await promise setTimeout 执行顺序事件循环
微任务 async 中的 await promise 中的resolve reject
宏任务 ajax setTimeout 事件绑定
3.

var a = {
  i:1,
  toString(){   //  对象中的方法
    return this.i++
  },
  aa:()=>{  //与上一个写法区别？ 这种是为了箭头函数写法
    console.log(2)
  } 
}
if(a ==1 && a == 2 && a ==3){
  console.log(1)
}

4. 脚手架配置 webpack 配置都有哪些
5. vue 2.0 3.0 双向数据绑定原理
2.o 缺点 1 需要对原始数据克隆一份 2 还得对每一个属性分别设置Object.definePrototype 3 数据都需要先声明到data中
2.0 Object.definePrototype 来数据劫持的，大概逻辑是… 3.0 proxy 拦截器来做的，相对于2.0 有哪些提升？
以上缺点 proxy都解决了

     var obj = {name:'',age:22}
     obj = new Proxy(obj,{
       get(target,prop){
        return target[prop]
       },
       set(target,prop,value){
        target[prop] = value
       }
     })

双向绑定就是监听 onchange oninput 事件呗 mvc比mvvm 少了一层，视图更改，更新数据就是监听input change事件

6 跨域解决方案实现原理
jsonp 只支持get 有缓存不安全现在几乎不用了，之前用
CORS 跨域资源共享全都在服务器端设置就好缺点只能写一个域，token 上送有点问题
proxy 代理 webpack 中配置 proxy + nginx反向代理
7. 组件通信集合
属性传递只能父传子
发布订阅 (eventBus) $on/$ emit 子改父自己写就是callback 回调函数
Provide/inject 祖先与后代传递信息通过上下文传递
Slot
$parent/$ children
Vuex 公共状态管理（一刷新就没了）或者localstorage 本地存储，得设置一个过期限制
8 diff 算法事件复杂度和算法原理
两个数的完全的diff算法事件复杂度o（n3）,vue 中做了优化，值对同级的元素进行比较，时间复杂度为o(n)
先同级比较，再比较子节点，同级一样，直接复用
先判断一方有儿子没儿子的情况，老的有新的没有，直接把老的儿子删除，新的有老的没有，把新的儿子插入到老的父节点中
比较都有儿子的情况最复杂
递归比较子节点
9. ajax 请求放在哪个生命周期中
在created 的时候，视图中的dom都没有渲染处理啊，所以此时如果直接去操作DOM节点，无法找到相关的元素
在mounted中，此时DOM已经渲染出来了，所以可以直接操作DOM节点
一般情况都放到mounted中，保证逻辑的统一性，因为生命周期都是同步执行的ajax是异步的。放在mounted中，不会等待ajax执行完后才执行后面的生命周期，
服务端渲染不支持mounted方法，所以在服务端渲染的情况下统一放到created中
10 何时使用beforeDestory
可能在当前页面中使用了$on 方法都需要在组件销毁前解绑
清除自己定义的定时器
解除事件绑定 scroll mousemove
11.vue中模板编译原理很复杂模板引擎的实现吧
将template 转化为render函数
template模板— AST语法树用一个对象来描述真实的js语法 -》变成render方法
12.vue中v-if v-show 的区别
v-if 如果条件不成立不会渲染当前指令所在节点的DOM元素
v-show 只是切换当前dom的显示隐藏
v-show 底层是complie编译成指令东西匹配show指令再控制隐藏
v-if 是变成三元表达式了
13. 为什么v-for 和v-if 不能连用
v-for 比v-if优先级高一些，连用的话循环的时候，会把v-if 给每个元素都添加一下，造成性能问题
14 用vnode 描述一个dom节点
虚拟节点就是用一个对象来描述真实的dom元素
template—>ast树—>codegen—>转化为render函数—>内部调用createElement方法—>虚拟DOM
15 v-for 中为什么加key
Key主要做DOM-diff 且不能用index 。不加key的话因为vue比对，一样的标签，会直接复用，删除的话不会删除第一个，会删除最后一个。不加key，vue默认会加key，是索引。
16. mixin mergeOptions
17. 渲染更新过程
【Vue.extend 方法用来创建组建的】… 渲染组件时，通过Vue.extend方法构建子组件的构造函数，并进行实例化，最终手动调用$mount() 进行挂载。更新组件时会进行patchvnode 流程，核心是diff算法。
18 组件中的data为什么是一个函数
组件复用，函数能形成封闭作用域，避免组件复用数据互相影响
同一个组件被复用多次，会创建多个实例。这些实例用的是一个构造函数，如果data是一个对象的话。那么多有组件就共享了一个对象了。 New Vue 中data可以是对象，应为它不会被公用。一个项目只能new一个实例。
19 vue中的事件绑定
1 原生绑定普通标签用的是 addEventListener
2 组件绑定用的是$on 发布订阅
20 v-model 实现原理如何自定义v-model
组件的v-model 是input+value的语法糖可以更改方法为change 更改属性为 checked
原生的v-model 会根据标签和type 生成不同的事件和属性
const VueTemplateCompiler = require(‘vue-template-compiler’)
Const ele = VueTemplateComplie.compile(‘<input type=‘checkbox’ v-model = ‘value’/>’)
console.log(ele.render)
以上三行可用来测试编译成什么东西
加lazy 变成change事件不加就是监听input事件
21 v-html 会导致哪些问题
xss攻击（直接在input中输入获取cookie代码等） v-html 会清空替换掉标签内的子元素
1382 -1411
22 vue 父子组件生命周期调用顺序

vue 面试题2020-05-07

猜你喜欢

热点阅读