一、reactive和shallowReactive
reactive
用来创建响应式对象,它接收一个对象/数组参数。代码示例如下,通过点击事件可以修改响应式对象触发视图更新。
// 通过reactive创建数组
const arr = reactive([1, 2, 3]);
const onClickArr = () => arr.push(4);
// 通过reactive创建对象
const obj = reactive({ a: 1 });
const onClickObj = () => obj.a = 2;
shallowReactive
创建的响应式对象/数组参数不支持深度监听,也就是只支持第一层数据,比如下面示例想要修改深层数据,数据不会发生改变。
// 通过shallowReactive创建对象
const obj = shallowReactive({ a: 1, b: { c: 2 } });
const onClickObj = () => obj.b.c = 3;
// 通过shallowReactive创建数组
const arr = ref([1,2,3,[4]]);
const onClickArr = () => arr[3].push(5);
二、ref和shallowRef
ref
底层的本质还是reactive
,系统会自动根据我们给ref
传入的值将它转换成reactive
,比如ref(123) -> reactive({value:123})
,这两者等价的。在js
中获取ref
的值需要通过value
来获取,而在template
则不用,因为vue3
做过处理,如果通过ref
声明的变量,在template
中使用可以不用加value
。
ref
和reactive
一样,也是用来实现响应式数据的方法,它接收原始类型数据,原始类型数据共7个,分别是String
,Number
,Boolean
,Symbol
,Null
,Undefined
,BigInt
。
// 通过ref创建基本类型的数据
const num = ref(1);
const onClickNum = () => num.value = 2;
如果是用ref
创建基本数据类型的数据的话使用ref
和shallowRef
并无区别。
const num1 = ref(1);
const num2 = shallowRef(1);
const onClickNum1 = () => num1.value = 2; //会更改数据
const onClickNum2 = () => num2.value = 2; //会更改数据
如果想要用ref
创建对象的话,就不能用shallowRef
了,因为会失效。
// 通过shallowRef创建对象
const origin = shallowRef({ a: 1 });
const onClickOrigin1 = () => origin.value.a = 2; //不会更改数据
const onClickOrigin2 = () => origin.value = 2; //会更改数据
网友评论