reactive
-
reactive
是 Vue3.X中提供的实现数据响应的方法,Vue2.X实现数据响应的核心是Object.defineProperty()
,而Vue3.X数据响应是通过ES6的Proxy
来实现的 -
reactive
的参数必须是对象(json/arr),否则无法被包装成Proxy
,数据不响应 -
如果给
reactive
传递其他对象,直接修改当前对象页面不会更新,想要更新必须重新赋值,例如:
setup() {
let today = reactive({
time: new Date()
})
//直接修改,数据不响应
//today.time.setDate(today.time.getDate()+1);
//重新赋值,数据响应
let day = today.time.setDate(today.time.getDate()+1);
today.time = day;
return {today};
}
ref
ref
同样是 Vue3.X中提供的实现数据响应的方法,它多用于处理简单类型的数据响应,其本质依旧是reactive
,ref
的底层源码会把数据转换为reactive({ value: XXX })
的形式,所以在修改数据时需要加上.value
,但是在template
上使用时不需要加上.value
,因为用ref
绑定的数据 Vue3.X会为我们自动添加.value
,例:
<template>
<div>
count: {{ count }}
<button @click="add">count++</button>
</div>
</template>
setup() {
let count = ref(0);
function add() {
count.value++;
}
return {count, add};
}
判断数据类型
-
Vue3.X通过当前数据的
__v_ref
来判断是否为ref类型,如果存在这个私有属性且为true,那么这就是一个ref类型的数据。 -
另外,Vue3.X还提供了
isRef
和isReactive
方法来判断数据类型,例:
setup() {
let count = ref(0);
let state = reactive({
list: {
name: 'zs',
age: 14
}
})
console.log(isRef(count)); //true
console.log(isReactive(state)); //true
return {count, state};
}
原始数据类型与 reactive/ref 的关系
默认的原始数据类型不会被Vue3.X监听,它们与 reactive/ref
的关系是引用,即修改原始数据,reactive/ref
的数据也会改变,但是直接修改原始数据类型视图不会发生变化,例:
setup() {
let obj = {name: 'zs', age: 18};
let state = reactive(obj);
obj.name = 'ls'; //数据变化,视图不会发生变化
state.name = 'ls'; //数据变化,视图变化
}
目录:VUE3.X笔记——目录
上一篇:VUE3.X——模板指令
下一篇:VUE3.X——Composition API