vue3创建数组以及使用watch的正确姿势

vue3创建数组以及使用watch的正确姿势

定义数组

• 使用ref函数

const arr = ref([1, 2, 3])

const changeArr = () => {
    arr.value = [1, 2]
}

return {
    arr,
    changeArr
}

• reactive+push

也可通过其他可直接修改数组的方式来改变数组

const arr = reactive([1, 2, 3])

const changeArr = () => {
    arr.push(4)
}

return {
    arr,
    changeArr
}

• reactive

推荐使用这种写法

const params = reactive({
    arr: [1, 2, 3]
})

const changeArr = () => {
    params.arr = [1, 2]
}

return {
    ...toRefs(params),
    changeArr
}

watch

当我们去监听一个非响应式对象时，控制台会出现warn：A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types，翻译过来就是：watch的东西必须是一个getter/effect方法，或者是一个响应式对象，或是一系列的数组。

• 监听数组

// ref创建
const arr = ref([1, 2, 3])

const changeArr = () => {
    arr.value = [1, 2]
}

watch(arr, (newValue, oldValue)=>{
    console.log(newValue, oldValue)
})

return {
    arr,
    changeArr
}

// 通过这种reactive+push的方式创建的数组，只有在修改原数组的情况下才能达到响应式的效果
let arr = reactive([1, 2, 3])
const changeArr = () => {
    arr.push(4)
    // 直接修改原数组，此时arr就不是一个响应式的数据，所以监听不到任何变化
    // arr = []
}
watch(arr, (newValue, oldValue)=>{
    console.log(newValue, oldValue)
})

const params = reactive({
    arr: [1, 2, 3]，
    count: 0
})

const changeArr = () => {
    params.arr = [1, 2]
}

// 通过直接监听params.arr是监听不到变化的，同理是因为params.arr不是一个响应式数据，而是一个数组类型
// watch(params.arr, (newValue, oldValue)=>{
//     console.log(newValue, oldValue)
// })

// 可以改写一个function,监听reactive里面的count同理，也需改写为function
watch(() => [...arr], (newValue, oldValue)=>{
    console.log(newValue, oldValue)
})

return {
    ...toRefs(params),
    changeArr
}