前端vue3中的ref与reactive用法及区别总结

const ref1 = ref(0)            // true
const ref2 = ref({ count: 0 }) // true

const reactive1 = reactive(0)            // false
const reactive2 = reactive({ count: 0 }) // true

<template>
      <div>{{ dxc }}</div>
</template>
 
<script setup>
    import { ref } from 'vue'
    const dxc = ref(0)
</script>

const ref1 = ref(0) 
console.log(ref1.value)  // 0
 
const ref2 = ref({ count: 0 })
console.log(ref2.value.count)  // 0
 
ref1.value = 1
console.log(ref1.value)  // 1

const ref1 = ref(0)
watch(ref1, () => { 
  console.log('changed!')
})

const ref1 = ref({num: 1})
watch(ref1, () => { 
    console.log('changed!')
})
 
// ref1.value.num = 1 
// 执行该语句时并不会触发watch监听，watch 并没有对ref1进行深度监听
// 但注意，此时dom是能更新的，ref会将其转换成 reactive 的形式
 
// 要想深入监听，只需要加一个对应的参数即可
const ref1 = ref({num: 1})
watch(ref1, () => { 
    console.log('changed!')
}, { deep: true })

const reactive1 = reactive({num: 1})
watch(reactive1, () => { 
    console.log('changed!')
})
// reactive1.num = 1
// 触发watch监听

import { ref } from 'vue';

const count = ref(0); // 创建一个Ref对象，初始值为0
console.log(count.value); // 访问Ref对象的值
count.value = 1; // 修改Ref对象的值

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    return {
      count
    };
  }
};

<script setup>
import { ref } from 'vue';

const count = ref(0);
</script>

import { reactive } from 'vue';

const user = reactive({
  name: 'Alice',
  age: 30
});

<template>
  <div>
    <p>Name: {{ user.name }}</p>
    <p>Age: {{ user.age }}</p>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const user = reactive({
      name: 'Alice',
      age: 30
    });

    return { user };
  }
};
</script>

const tableData = ref([]) // 定义

const getTableData = async () => {
	const { data } = await getTableDataApi() // 模拟接口获取表格数据
	tableData.value = data // 修改
}

<!-- Vue3模板引用使用 -->
<a-table v-model:dataSource="tableData"></a-table>

const tableData = reactive([]) // 定义

const getTableData = async () => {
	const { data } = await getTableDataApi() // 模拟接口获取表格数据
	tableData = data // 修改，错误示例，这样赋值会使tableData失去响应式
}

<!-- Vue3模板引用使用 -->
<a-table v-model:dataSource="tableData"></a-table>

// 方法一：改为 ref 定义
const tableData = ref([])
const getTableData = async () => {
	const { data } = await getTableDataApi()
	tableData.value = data // 使用.value重新赋值
}
// 方法二：使用 push 方法
const tableData = reactive([])
const getTableData = async () => {
	const { data } = await getTableDataApi()
	tableData.push(...data) // 先使用...将data解构，再使用push方法
}
// 方法三：定义时数组外层嵌套一个对象
const tableData = reactive({ list:[] })
const getTableData = async () => {
	const { data } = await getTableDataApi()
	tableData.list = data // 通过访问list属性重新赋值
}
// 方法四：赋值前再包一层 reactive
const tableData = reactive([])
const getTableData = async () => {
	const { data } = await getTableDataApi()
	tableData = reactive(data) // 赋值前再包一层reactive
}