数组变化侦测
vue能侦听响应式数组的变更方法，并在他们被调用时触发相关的更新，这些变更方法包括
- push() 在数组的末尾添加一个或多个元素，并返回修改后数组的新长度。
- pop() 从数组的末尾移除最后一个元素，并返回被移除的元素。
- shift() 从数组的开头移除第一个元素，并返回被移除的元素。
- unshift() 在数组的开头添加一个或多个元素，并返回修改后数组的新长度。
- splice() 从数组中添加或删除元素，可以实现在指定位置进行添加、删除或替换操作。
- sort() 用于对数组的元素进行排序,可通过传递函数作为参数来实现自定义排序逻辑。
- reverse() 用于反转数组中的元素顺序，即第一个元素变为最后一个，最后一个变为第一个
一些非变更方法不会改变原数组，而是返回一个新数组，不会引起vue的响应式更新
- filter() 用于筛选出满足特定条件的元素，并返回一个新数组。
- concat() 将一个或多个数组与当前数组合并，创建并返回一个新数组。原始数组不会被修改
- slice() 返回数组的一个浅拷贝，选择开始和结束的索引，不包括结束索引处的元素。
若要使用上述方法并进行vue的响应式更新，应该把数组重新赋值，例如：
this.arr = this.arr.concat(['a','b','c'])
DOM更新时机
要等待 DOM 更新完成后再执行额外的代码，可以使用 nextTick() 全局 API
import { nextTick } from 'vue'
export default {
methods: {
async increment() {
this.count++
await nextTick()
// 现在 DOM 已经更新了
}
}
}
Watch监听
侦听数据源类型
watch 的第一个参数可以是不同形式的“数据源”：它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组：
const x = ref(0)
const y = ref(0)
// 单个 ref
watch(x, (newX) => {
console.log(`x is ${newX}`)
})
// getter 函数
watch(
() => x.value + y.value,
(sum) => {
console.log(`sum of x + y is: ${sum}`)
}
)
// 多个来源组成的数组
watch([x, () => y.value], ([newX, newY]) => {
console.log(`x is ${newX} and y is ${newY}`)
})
注意，你不能直接侦听响应式对象的属性值，例如:
const obj = reactive({ count: 0 })
// 错误，因为 watch() 得到的参数是一个 number
watch(obj.count, (count) => {
console.log(`count is: ${count}`)
})
这里需要用一个返回该属性的 getter 函数：
// 提供一个 getter 函数
watch(
() => obj.count,
(count) => {
console.log(`count is: ${count}`)
}
)
回调的触发时机
当你更改了响应式状态，它可能会同时触发 Vue 组件更新和侦听器回调。
默认情况下，用户创建的侦听器回调，都会在 Vue 组件更新之前被调用。这意味着你在侦听器回调中访问的 DOM 将是被 Vue 更新之前的状态。
如果想在侦听器回调中能访问被 Vue 更新之后的 DOM，你需要指明 flush: 'post' 选项：
watch(source, callback, {
flush: 'post'
})
样式scoped
让当前样式只在当前组件中生效
ref与reactive的区别
使用ref所定义的所有数据均可进行修改并在页面实时更新，而用reactive定义的数据是常量，基本数据类型无法修改，数组和对象也仅仅能修改内部的值
