一、ref和reactive的区别
ref 的作用是定义一个基本类型的数据为响应式
setup () {
let num = ref(1);
// 创建一个包含响应式数据的引用(reference)对象
// js中操作数据: xxx.value
// 模板中操作数据: 不需要.value
return {
num
}
}
reactive的作用是定义多个数据为响应式(以对象类型)
import {reactive} from "@vue/reactivity";
export default {
setup(){
const state = reactive({
name: 'tom',
age: 25,
wife: {
name: 'marry',
age: 22
},
})
// 接收一个普通对象然后返回该普通对象的响应式代理器对象
// 响应式转换是“深层的”:会影响对象内部所有嵌套的属性
// 内部基于 ES6 的 Proxy 实现,通过代理对象操作源对象内部数据都是响应式的
console.log(state, state.wife)
const update = () => {
state.name += '--'
state.age += 1
state.wife.name += '++'
state.wife.age += 2
}
return {
state,
update
}
}
}
reactive
相当于 Vue 2.x 中的 Vue.observable()
API ,为避免与 RxJS 中的 observables 混淆因此对其重命名。该 API 返回一个响应式的对象状态。该响应式转换是“深度转换”——它会影响嵌套对象传递的所有 property。
Vue 中响应式状态的基本用例是我们可以在渲染期间使用它。因为依赖跟踪的关系,当响应式状态改变时视图会自动更新。
这就是 Vue 响应式系统的本质。当从组件中的 data()
返回一个对象时,它在内部交由 reactive()
使其成为响应式对象。模板会被编译成能够使用这些响应式 property 的渲染函数。
二、比较Vue2与Vue3的响应式的实现原理
vue2中
核心:
//核心方法 -
Object.defineProperty(obj, prop, descriptor)
// obj:要在其上定义属性的对象。
// prop:要定义或修改的属性的名称。
// descriptor:将被定义或修改的属性描述符。
Object.defineProperty(对象, 属性, {
get () {},
set () {}
})
手动实现简易的双向数据绑定