P7 reactive
和ref一样, 主要是用于复杂的响应式数据(对象), 但是数值, 字符串不能用reactive
P8-P9 toRef和toRefs
toRef和ref的区别
-
toRef可以创建一个响应式数据
-
ref的本质是拷贝粘贴了一份数据, 脱离了与原数据的交互
-
ref函数将对象中的属性变成了响应式数据, 修改响应式数据(不会影响到元数据, 但是会更新视图层)
-
toRef的本质是引用, 与原始数据有交互, 修改响应式数据会(影响原数据, 但是不会更新视图层)
<template>
<div>
<h1>姓名: {{name}}</h1>
<h1>年龄: {{age}}</h1>
<h1>公司: {{company}}</h1>
<h1>{{obj}}</h1>
<h1>{{arr}}</h1>
</div>
<button @click="updateName">更新姓名</button>
</template>
<script>
import {ref} from 'vue'
export default({
setup() {
const name = ref('马云')
const age = ref(50)
const company = ref('Alibaba')
const obj = ref({taobao:'淘宝',tmall:'天猫'})
const arr = ref([1,2,3])
function updateName() {
console.log(name);
name.value = "马化腾"
age.value = 40
company.value = '腾讯'
obj.value.tmall = "拼多多"
arr.value = [3,4,5]
}
return {name,age,company,obj,arr,updateName}
}
})
</script>
toRefs (批量修改原数据, 不更新视图)
- 它接收的是响应式数据, 也就是需要用reactive之类的包装之后才放进去
- 它的作用是不用像
reactive一样, 在模板中要obj.name, obj.age而是直接写{{name}}, {{age}} - 不过使用之前要解构
...toRefs(obj)或者取出值:const {name,age} = toRefs(obj)
<template>
<div>
<H1>{{name}}</H1>
<H1>{{age}}</H1>
<H1>{{a}}</H1>
</div>
</template>
<script setup>
import { reactive, toRefs } from 'vue';
const obj = {name:'马云', age: 50, a: 1, b:2, c:3}
const reacObj = reactive(obj)
const {name, age, a} = toRefs(reacObj)
</script>
