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、让实例拥有了类的公用方法