获得徽章 0
- useContext作用：
1、useContext可以帮助我们跨越组件层级直接传递变量，实现数据共享；
2、Context的作用就是对它所包含的组件树提供全局共享数据的一种技术
示例代码：
blog.csdn.net 展开评论点赞 - 以下是一段可以实现对象属性逐一比对，取有值属性的 JavaScript 代码：
```javascript
function compareObjects(obj1, obj2) {
const result = {};
for (let key in obj1) {
if (obj1.hasOwnProperty(key)) {
if (obj1[key] && typeof obj1[key] === 'object') {
result[key] = compareObjects(obj1[key], obj2[key]);
} else {
result[key] = obj1[key] || obj2[key];
}
}
}
for (let key in obj2) {
if (!result.hasOwnProperty(key) && obj2.hasOwnProperty(key)) {
if (obj2[key] && typeof obj2[key] === 'object') {
result[key] = compareObjects(obj1[key], obj2[key]);
} else {
result[key] = obj2[key];
}
}
}
return result;
}
```
其中，函数 `compareObjects` 接收两个参数，分别为需要比对的两个对象。首先，定义一个空对象 `result` 用于存储比对的结果。接下来遍历对象 `obj1`，如果当前属性值为对象或数组对象，递归比对该属性值；否则，将该属性值与相应属性在 `obj2` 对象中的属性值进行比较，取非空值。最后，再遍历对象 `obj2`，如果当前属性在结果集 `result` 中不存在，则重复上述处理。在比对完成后，返回结果集 `result`。
需要注意的是，这段代码并未对输入数据进行完整性检查，因此在使用前需要保证两个比对对象都存在且为对象类型。展开赞过
评论2 - $nextTick原理：
首先说一下$nextTick的作用，$nextTick主要是用于等待dom更新完后执行一些回调操作。然后说一下为什么要使用$nextTick，由于vue更新dom是异步执行的，即修改数据时，不会立马更新视图，而是会监听数据变化，并缓存在同一个事件循环中，等同一个事件循环中的数据变化完成之后，再统一进行视图更新，为了获取到更新后的dom，所以需要使用$nextTick。再说一下$nextTick原理，其实主要关心的就是$nextTick怎样拿到更新后的dom，当那些异步任务被缓冲后，$nextTick会尝试使用promise.then、mutationObserver和setImmediate去挨个执行缓冲区的任务，如果都不支持，则使用setTimeout，同一个事件循环中的任务全部执行完以后，vue就会统一进行视图更新，这个时候就拿到了更新后的dom展开评论点赞 - $set的原理：
当我们对对象或数组进行$set的操作的时候，它首先会判断是对象还是数组，如果是数组，则会调用splice方法，这个时候数组的dep会发布更新消息；如果是对象，首先会判断这个属性存不存在，如果存在就直接修改，如果不存在则会给当前属性增加getter/setter方法，使当前属性变成响应式的，这个时候对象的dep会发布更新消息展开评论点赞 - vue2怎么监听数组：
不管是对象还是数组，监听都用watch，只是由于vue2的Object.defineProperty的限制，我们直接对对象进行新增或删除属性，或者直接通过数组下标修改值，watch监测不到。所以我们可以通过$set或者数组的push，splice等7种操作来操作数组，这样数组就能监听到了展开评论点赞 - keep-alive原理：
首先keep-alive是vue的一个内置组件，里面包含了两个变量，keys和cache，keys主要记录目前缓存组件的key值，cache主要是用来保存虚拟dom的。当我们在浏览器上切换路由的时候，router-view会去挂载对应的组件实例，挂载之前会经过keep-alive的渲染，渲染的时候keep-alive里面的cache会根据当前组件实例的key值查询有没有对应的虚拟dom，如果有，则重新启用当前的组件实例，如果没有，则把当前组件实例放到cache里进行缓存展开评论点赞 - observer：数据的观察者，让数据对象的读写操作都处于自己的监管之下；
watcher：数据的订阅者，数据的变化会通知到watcher，然后由watcher进行相应的操作，例如更新视图；
dep：observer与watcher的纽带，当数据变化时，会被observer观察到，然后由dep通知到watcher评论点赞
blog.csdn.net