vue面试题

1.vm.$set(obj, key, val) 做了什么?
      为对象添加一个新的响应式数据:调用 defineReactive 方法为对象增加响应式数据,然后执行 dep.notify 进行依赖通知,更新视图
    为数组添加一个新的响应式数据:通过 splice 方法实现

2.可以被vue拦截到的数组以及不能被拦截到的数组?
    会:push() pop() shift() unshift() splice() sort() reverse()  会检测变动 进行页面更新
    不会:filter() concat() slice() map()  新数组替换旧数组 不会改变原数组,页面不更新    不会被拦截
    Vue.set / this.$set  强制更新

3.Vue性能优化?
    尽量减少data中的数据,data中的数据都会增加getter和setter,会收集对应的watcher
    SPA 页面采用keep-alive缓存组件
    在更多的情况下,使用v-if替代v-show
    使用路由懒加载、异步组件
    第三方模块按需导入
    图片懒加载

4.vue单页面应用(SPA)

        切换页面的时候进行局部更新,而不是重新加载新页面

        缺点:首次加载速度比较慢,因为需要加载的东西比较多

        优点:不需要频繁刷新页面,因为都是靠交互ajax请求来完成的     

1、对于即将到来的 vue3.0 特性你有什么了解的吗?
Vue 3.0 的目标是让 Vue 核心变得更小、更快、更强大

2、虚拟 DOM 的优缺点?
优点:
(1)保证性能下限 
(2)无需手动操作 DOM
(3)跨平台
缺点:
(1)无法进行极致优化

3、虚拟 DOM 实现原理
用 JavaScript 对象模拟真实 DOM 树,对真实 DOM 进行抽象;
diff 算法 — 比较两棵虚拟 DOM 树的差异;
pach 算法 — 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树。

4、直接给一个数组项赋值,Vue 能检测到变化吗?
由于 JavaScript 的限制,Vue 不能检测到以下数组的变动:

(1)|当你利用索引直接设置一个数组项时|,例如:vm.items[indexOfItem] = newValue
 可以使用: // Vue.set
Vue.set(vm.items, indexOfItem, newValue)
(2)|当你修改数组的长度时|,例如:vm.items.length = newLength
 可以使用:  // Array.prototype.splice
   vm.items.splice(newLength)
5.简述原型与原型链,原型链的作用有哪些?

每一个类都是一个显示原型prototype
每一个类都有一个隐式原型__proto__
实例的__proto__等于类的显示原型prototype
当去查找一个实例的属性或方法现在自身查找, 找不到则沿着__proto__向上查找
我们把原型__proto__与原型__proto__形成的链条关系叫做原型链

1、实现了JS的继承
2、让实例拥有了类的公用方法           

上一篇:浏览器安全


下一篇:文件常规属性 VS 安全属性