1. Vue computed 和 watch 区别

对于Computed:

● 它支持缓存，只有依赖的数据发生了变化，才会重新计算

不支持异步，当Computed中有异步操作时,无法监听数据的变化

● computed的值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data声明过，或者父组件传递过来的props中的数据进行计算的。

● 如果一个属性是由其他属性计算而来的，这个属性依赖其他的属性，-般会使用computed

● 如果computed属性的属性值是函数,那么默认使用get方法,函数的返回值就是属性的属性值;在computed中，属性有一个get方法和一个set方法,当数据发生变化时，会调用set方法。

对于Watch:

● 它不支持缓存，数据变化时，它就会触发相应的操作

● 支持异步监听

● 监听的函数接收两个参数,第一个参数是最新的值，第二个是变化之前的值

● 当一个属性发生变化时，就需要执行相应的操作

● 监听数据必须是data中声明的或者父组件传递过来的props中的数据，当发生变化时，会触发其他操作，函数有两个的参数:

immediate: 组件加载立即触发回调函数
deep: 深度监听，发现数据内部的变化，在复杂数据类型中使用，例如数组中的对象发生变化。需要注意的是，deep无法监听到数组和对象内部的变化。

当想要执行异步或者昂贵的操作以响应不断的变化时，就需要使用watch。

总结:

●computed计算属性:依赖其它属性值，并且computed的值有缓存，只有它依赖的属性值发生改变，下一次获取computed的值时才会重新计算computed的值。

.●watch侦听器:更多的是观察的作用，无缓存性，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作。

运用场景:

●当需要进行数值计算，并且依赖于其它数据时，应该使用computed, 因为可以利用computed的缓存特性，避免每次获取值时都要重新计算。

●当需要在数据变化时执行异步或开销较大的操作时，应该使用watch, 使用watch选项允许执行异步操作(访问一个API),限制执行该操作的频率,并在得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

2. Computed和Methods的区别

可以将同一函数定义为一个method或者一个计算属性。对于最终的结果，两种方式是相同的
不同点:
●computed:计算属性是基于它们的依赖进行缓存的，只有在它的相关依赖发生改变时才会重新求值;
●method调用总会执行该函数。

3. for…in 和 for…of 的区别

key 和 value

for…in 遍历 key , for…of 遍历 value

const arr = [10, 20, 30]
for (let n of arr) {console.log(n)
}const str = 'abc'
for (let s of str) {console.log(s)
}

function fn() {for (let argument of arguments) {console.log(argument) // for...of 可以获取 value ，而 for...in 获取 key}
}
fn(10, 20, 30)const pList = document.querySelectorAll('p')
for (let p of pList) {console.log(p) // for...of 可以获取 value ，而 for...in 获取 key
}

遍历对象

for…in 可以遍历对象，for…of 不可以

遍历 Map/Set

for…of 可以遍历 Map/Set ，for…in 不可以

const set1 = new Set([10, 20, 30])
for (let n of set1) {console.log(n)
}let map1 = new Map([['x', 10], ['y', 20], ['z', 3]
])
for (let n of map1) {console.log(n)
}

遍历 generator

for…of 可遍历 generator ，for…in 不可以

function* foo(){yield 10yield 20yield 30
}
for (let o of foo()) {console.log(o)
}

对象的可枚举属性

for…in 遍历一个对象的可枚举属性。

使用 Object.getOwnPropertyDescriptors(obj) 可以获取对象的所有属性描述，看 enumerable: true 来判断该属性是否可枚举。

对象，数组，字符传

可迭代对象

for…of 遍历一个可迭代对象。

其实就是迭代器模式，通过一个 next 方法返回下一个元素。

该对象要实现一个 [Symbol.iterator] 方法，其中返回一个 next 函数，用于返回下一个 value（不是 key）。

可以执行 arr[Symbol.iterator]() 看一下。

JS 中内置迭代器的类型有 String Array arguments NodeList Map Set generator 等。

答案

for…in 遍历一个对象的可枚举属性，如对象、数组、字符串。针对属性，所以获得 key
for…of 遍历一个可迭代对象，如数组、字符串、Map/Set 。针对一个迭代对象，所以获得 value

划重点

“枚举” “迭代” 都是计算机语言的一些基础术语，目前搞不懂也没关系。

但请一定记住 for…of 和 for…in 的不同表现。

连环问：for await…of

用于遍历异步请求的可迭代对象。

// 像定义一个创建 promise 的函数
function createTimeoutPromise(val) {return new Promise(resolve => {setTimeout(() => {resolve(val)}, 1000)})
}

如果你明确知道有几个 promise 对象，那直接处理即可

(async function () {const p1 = createTimeoutPromise(10)const p2 = createTimeoutPromise(20)const v1 = await p1console.log(v1)const v2 = await p2console.log(v2)
})()

如果你有一个对象，里面有 N 个 promise 对象，你可以这样处理

(async function () {const list = [createTimeoutPromise(10),createTimeoutPromise(20)]// 第一，使用 Promise.all 执行Promise.all(list).then(res => console.log(res))// 第二，使用 for await ... of 遍历执行for await (let p of list) {console.log(p)}// 注意，如果用 for...of 只能遍历出各个 promise 对象，而不能触发 await 执行
})()

【注意】如果你想顺序执行，只能延迟创建 promise 对象，而不能及早创建。

即，你创建了 promise 对象，它就立刻开始执行逻辑。

(async function () {const v1 = await createTimeoutPromise(10)console.log(v1)const v2 = await createTimeoutPromise(20)console.log(v2)for (let n of [100, 200]) {const v = await createTimeoutPromise(n)console.log('v', v)}
})()