Vue3-01.ref、reactive、toRef、toRefs应用及区别

ref

• 能定义任何类型的响应式数据，传入参数可以是任意数据类型，使用时需要通过.value去修改。
• 数据变化会改变浏览器视图，修改响应式数据不会影响到原始数据。
• ref的本质是拷贝原数据。

const msg = 'hello world'
const msg1 = ref(msg)
msg1.value = 'bye'
console.log('msg: ' + msg)  //msg: hello world (msg没有改变)
console.log('msg1: ' + msg1.value) //msg1: bye

reactive

• reactive就是将传入的对象变成响应式的对象。
• 响应式的对象值发生改变，原有的数据也会发生改变，浏览器视图也会发生改变。

const msg = {a:1,b:'hello'}
const msg1 = reactive(msg)
console.log('msg.a: '+msg.a)  //1
msg1.a = 2
console.log('msg.a: '+msg.a)  //2 (msg发生改变)

toRef

• toRef接收两个参数，第一个参数是哪个对象，第二个参数是对象的哪个属性。

• 用于抽离响应式对象（被reactive包裹的对象）中的某一个属性，再将这个属性包裹成ref对象。

• 使用toRef会保持对其源property的响应式连接，响应式数据发生改变，原始数据也会发生改变。

• 如果修改通过toRef创建的响应式数据，并不会触发浏览器视图的更新。

• toRef的本质是引用，与原始数据有关联。

let people = reactive({
			name: 'mike',
			age: 20
		})
let people1 = toRef(people, 'name')
let people2 = people.name
console.log('---before---');
console.log('people.name: ' + people.name)  //mike
console.log('people1: ' + people1.value)    //mike
console.log('people2: ' + people2)          //mike
people.name = 'new mike'
console.log('---after---')
console.log('people.name: ' + people.name)  //new mike
console.log('people1: ' + people1.value)    //new mike(toref响应式变化)
console.log('people2: ' + people2)          //mike

toRefs

将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的 ref*。

• toRefs接收一个对象作为参数，它会遍历对象身上的所有属性，然后挨个调用toRef执行，用于批量设置多个数据为响应式数据。
• 和toRef的区别，在使用的时候注意要加上xxx.属性名.value。

let people = reactive({
			name: 'mike',
			age: 20
})
let people1 = toRefs(people)
console.log('people.name: ' + people.name)
console.log('people1: ' + people1.name.value)

总结

设置响应式数据的方法：ref、reactive、toRef、toRefs

区别

• ref、reactive数据更新后会立马更新浏览器视图。

• toRef、toRefs数据更新后会等到下次更新视图时再更新视图。