vue 总结

1. 简述Vue 3中的watch和watchEffect有何不同？

• watchEffect是自动运行的，它会收集所有在执行过程中访问的响应式数据作为依赖，并在任何依赖变化时重新运行。
• watch是显式监听特定的响应式数据，并在这些数据变化时运行，允许你访问新旧值。

举例：

watchEffect(() => {
  console.log(state.value);
});

watch(source, (newValue, oldValue) => {
  console.log(`从${oldValue}变化到${newValue}`);
});

const { editRow, metricTypeOptions, graphTypeOptions, changeMetricType, validateName, validateMetricKey } =
  useKPILayout()
// 使用 watchEffect 保持响应性
watchEffect(() => {
  editRow.value = props.record
})

2. 宏任务微任务的执行顺序：
宏任务包括了setTimeout、setInterval、setImmediate(Node.js中)、请求回调等，微任务则包括process.nextTick(Node.js中)、Promise的回调等。
当JavaScript运行时，会先执行同步代码，然后开始查找微任务队列，执行完毕后再查找宏任务队列。因此，执行顺序通常如下：

• 同步代码
• 微任务队列中的任务
• 宏任务队列中的任务

console.log('Start');
 
setTimeout(() => {
  console.log('setTimeout');
}, 0);
 
Promise.resolve().then(() => {
  console.log('Promise');
});
 
console.log('End');

//打印顺序:
//Start
//End
//Promise
//setTimeout