VUE3.X——reactive 与 ref

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