Vue3 reactive使用不当会失去响应
- 1、
直接赋值对象：如果直接将一个响应式对象赋值给另一个变量，将失去响应性。因为reactive返回的是对象本身，不仅仅是带来
import { reactive } from 'vue';
let state = reactive({ count: 0 });
state = { count: 1 }; // 失去响应性
- 2、
直接替换响应式对象
import { reactive } from 'vue';
let state = reactive({ count: 0 });
state = reactive{ count: 1 }; // 失去响应性
- 3、
直接解构对象：在解构响应式对象时，如果直接解构对象属性，将会得到一个非响应式的变量。
const state = reactive({count:0})
let {count} = state
count++ ; // count是0
解决这个问题，使用toRefs函数将响应式对象转换为ref对象。
import {toRefs} from 'vue'
const state = reactive({count:0})
let {count} = toRefs(state)
count++ ; // count是1
- 4、
将响应式对象的属性赋值给变量：如果将响应式对象的属性赋值给一个变量，这个变量的值将不会是响应式的。
const state = reactive({count:0})
let count = state.count
count++ ; // count是0
Vue3中推荐使用ref而不是reactive
ref 是一个函数，它接受一个内部值并返回一个响应式且可变的引用对象。这个引用对象有一个 .value 属性，该属性指向内部值。
ref 函数通过 new RefImpl(value) 创建了一个新的 RefImpl 实例。这个实例包含 getter 和 setter，分别用于追踪依赖和触发更新。使用 ref 可以声明任何数据类型的响应式状态，包括对象和数组。
reactive 是一个函数，它接受一个对象并返回该对象的响应式代理，也就是 Proxy。
ref 和 reactive 在声明数据的响应式状态上，底层原理是不一样的。ref 采用 RefImpl对象实例，reactive采用Proxy代理对象(一个对象或数组赋值给reactive创建的对象或数组时，会导致reactive创建的响应式对象被新赋值的直接代理。)
