[JavaScript知识库]2021-10-08

Vue2.x 双向绑定原理

vue 是通过 数据劫持 结合 发布者-订阅者 来实现双向绑定；数据劫持通过Object.defineProperty（）方法的get和set方法来重新定义，set是设置属性值触发的函数，get是读取属性值触发的函数；

底层实现：

1、监听器observer，object.defineProperty 的set方法监听所有属性，有变动通知订阅者，在这里还需要创建一个消息订阅器Dep来收集订阅者
2、订阅者watcher，接收变化通知执行相应函数，更新view
3、解析器compile，扫描解析每一个节点的指令，初始化订阅器

?详细过程参考

Vue3.x 响应式原理

Vue3.x改用 Proxy 替代 Object.defineProperty。因为 Proxy 可以直接监听对象和数组的变化，并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。

Proxy只会代理对象的第一层，那么Vue3又是怎样处理这个问题的呢？

判断当前Reflect.get的返回值是否为Object，如果是则再通过reactive方法做代理， 这样就实现了深度观测。

监测数组的时候可能触发多次get/set，那么如何防止触发多次呢？

我们可以判断key是否为当前被代理对象target自身属性，也可以判断旧值与新值是否相等，只有满足以上两个条件之一时，才有可能执行trigger。

v-for 为什么要加上 key

key 的主要功能是提高 vdom 的更新速度；因为 vue 在 patch （补丁）过程中的 diff 算法对新旧节点比对时是可以通过 key 精准判断两个节点是否是同一个，从而避免频繁更新不同元素，使 patch 过程更高效。（源码位置：src/core/vdom/patch.js）
尽量避免使用index最为key值。

function sameVnode (a, b) {
  return (
    a.key === b.key && (
      (
        a.tag === b.tag &&
        a.isComment === b.isComment &&
        isDef(a.data) === isDef(b.data) &&
        sameInputType(a, b)
      ) || (
        isTrue(a.isAsyncPlaceholder) &&
        a.asyncFactory === b.asyncFactory &&
        isUndef(b.asyncFactory.error)
      )
    )
  )
}

Vdom的理解

vdom 就是用 js 对象来描述真实 DOM，虚拟DOM的实现就是普通对象包含tag、data、children等属性对真实节点的描述。（本质上就是在JS和DOM之间的一个缓存）；由于直接操作 DOM 性能低，但是 js 层的操作效率高，可以将 DOM 操作转化成对象操作，最终通过diff算法比对差异进行更新DOM (减少了对真实DOM的操作)。虚拟DOM不依赖真实平台环境从而也可以实现跨平台。

优点：

1、保证性能下限：可以保证在你不需要手动优化的情况下，依然可以提供还不错的性能；
2、无需手动操作dom：极大提高我们的开发效率；
3、跨平台：虚拟 DOM 本质上是 JavaScript 对象

?缺点:

无法进行极致优化:在一些性能要求极高的应用中虚拟DOM无法进行针对性的极致优化

axios 的原理以及优点，如何终止 axios 请求

原理：属于XMLHttpRequest，是一个Promise的http请求库，可用于浏览器和Node

优点:

1. Axios是一个基于promise的HTTP库，支持promise所有的API
2. 它可以拦截请求和响应
3. 对响应回来的内容自动转换成JSON类型的数据
4. 安全性提高，客户端支持防御XSRF
5. 可以取消请求
6. 在浏览器中发送请求会创建XMLHttpRequests
7. 在node.js发送请求会创建http请求

中断请求:使用CancelToken函数

使用cancelToken.sourse工厂方法创建cancel token

const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get('/user/12345', {
	cancelToken: source.token
}).catch(function(thrown) {
	if (axios.isCancel(thrown)) {
		console.log('Request canceled', thrown.message);
	}else {
		// 处理错误
	}
});
source.cancel('xxx');

通过传递一个executor函数到CancelToken构造函数创建cancel token

const CancelToken = axios.CancelToken;
let cancel
axios.get('/user/12345', {
	cancelToken: new CancelToken(function executor(c){
		cancel = c
	})
});
cancel();

注意：executor处理函数接收两个函数resolve和reject作为参数，异步任务执行成功调用resolve，否则调用reject

computed 和 watch 区别，以及 computed 如何实现缓存和更新的

区别：

1. 都是观察数据变化的
2. 计算属性将会混入到vue的实例中，所以需要监听自定义变量；watch监听data、props里面数据的变化；
3. computed有缓存，它依赖的值变了才会重新计算，watch没有；
4. watch支持异步，computed不支持；
5. watch是一对多(监听某一个值变化，执行对应操作)；computed是多对一(监听属性依赖于其他属性)
6. watch监听函数接收两个参数，第一个是最新值，第二个是输入之前的值；
7. computed属性是函数时，都有get和set方法，默认走get方法，get必须有返回值(return)

watch的参数

deep：深度监听

immediate：组件加载立即触发回调函数执行

computed缓存原理

conputed本质是一个惰性的观察者；当计算数据存在于 data 或者 props里时会被警告；

vue初次运行会对 computed 属性做初始化处理（initComputed），初始化的时候会对每一个 computed 属性用 watcher 包装起来 ，这里面会生成一个 dirty 属性值为 true；然后执行 defineComputed 函数来计算，计算之后会将 dirty 值变为 false，这里会根据 dirty 值来判断是否需要重新计算；如果属性依赖的数据发生变化，computed 的 watcher 会把 dirty 变为 true，这样就会重新计算 computed 属性的值。