vue3中，声明响应式状态有两种方式，ref和reactive
ref用于基础类型（当 ref 的值是一个对象时，ref() 也会在内部调用reactive()）
reactive用于引用类型
下面通过简单的例子实现这两种方法
<template>
<h2>vue3响应式原理</h2>
<div>姓名：{{person.name}}</div>
<div>年龄：<span id='age'>{{person.age}}</span></div>
<div>点赞数：<span id='like'>{{like}}</span></div>
<button @click='changeData'>更改年龄和点赞数</button>
</template>
<script setup>
// import {ref, reactive} from 'vue'
// 不使用官方方法，自己简单实现
const ref = function (target) {
let _value = target
return {
get value () {
//处理访问逻辑
return _value
},
set value (newValue) {
//处理更新逻辑
_value = newValue
document.getElementById('like').innerHTML = _value
}
}
}
const reactive = function (target) {
return new Proxy(target, {
get: (obj, key) => {
//处理访问逻辑
return obj[key]
},
set: (obj, key, value) => {
//处理更新逻辑
if (key == 'age') {
obj[key] = value
document.getElementById('age').innerHTML = value
}
}
})
}
const like = 10
const person = {
name:'xxx',
age:18
}
const rlike = ref(like)
const rperson = reactive(person)
function changeData () {
rlike.value++
rperson.age++
}
</script>
vue2响应式使用Object.defineProperty 的缺陷
1、无法监控到数组下标的变化，通过数组下标修改元素，无法实时响应
2、只能劫持对象的属性，如果对象的属性还是对象，则需要深度遍历，Proxy 可以劫持整个对象，并返回一个新的对象
3、只能监听已存在属性的变化，不能监听新属性的添加，Proxy 不仅可以代理对象，还可以代理数据，可以代理动态增加的属性
vue3改进了响应式原理
vue3通过reactive方法，利用Proxy的代理对象，解决大量在vue2中Object.defineProperty的痛点，极好的支持对象监听，但同时Proxy并不能直接监听基础类型，需要每次都构建一个对象使用Proxy去代理，这样会造成极大的性能损耗，因此vue3提供了一个ref方法，通过返回一个简单的响应式对象，专门用来处理基础类型的数据响应
小提示
开发过程中，我们会遇到需要替换整个响应式数据的情况
会发现使用reactive，页面数据无法响应更新
let xiaoming = reactive({
name:'xiaoming',
age:18
})
function replaceperson () {
xiaoming.value = {
name:'xiaoming111',
age:10
}
console.log(xiaoming.value)
}
image.png
点击按钮，此时通过控制台打印可知道xiaoming这个对象的数据已被修改，但页面渲染数据未发生变化
原因：
reactive声明的数据不能替换整个对象：由于 Vue 的响应式跟踪是通过属性访问实现的，因此我们必须始终保持对响应式对象的相同引用。这意味着我们不能轻易地“替换”响应式对象，因为这样的话与第一个引用的响应性连接将丢失
我们可以使用ref来声明
let xiaoming = ref({
name:'xiaoming',
age:18
})
// let xiaoming = reactive({
// name:'xiaoming',
// age:18
// })
function replaceperson () {
xiaoming.value = {
name:'xiaoming111',
age:10
}
console.log(xiaoming.value)
}
image.png
