变成原始 ,标记原始
ref,reactive:目的为了将普通数据变成响应式数据。但是有些时候需要将响应式数据变成普通数据
toRaw:将一个由reactive生成的响应式对象 转为普通对象 。
使用场景:用于读取响应式对象对应的普通对象,对这个普通对象的所有操作,不会引起页面更新。
<h2>姓名:{{name}}</h2>
<h2>年龄:{{age}}</h2>
<h2>薪资:{{job.j1.salary}}K</h2>
<button @click="showRawPerson">输出最原始的person</button>
import {reactive,toRefs,toRaw} from 'vue'
export default {
name: 'Demo',
setup(){
//数据
let person = reactive({
name:'张三',
age:18,
job:{
j1:{
salary:20
}
}
})
function showRawPerson(){
const p = toRaw(person)
p.age++ //这里页面不会改变 因为不是响应式对象了
console.log(p)
}
//返回一个对象(常用)
return {
...toRefs(person),
showRawPerson,
}
}
}
markRaw:标记一个对象,使其永远不会再成为响应式对象。
应用场景:
有些值不应被设置为响应式的,例如复杂的第三方类库等。
当渲染具有不可变数据源的大列表时,跳过响应式转换可以提高性能。
<h3 v-show="person.car">座驾信息:{{person.car}}</h3>
<button @click="addCar">给人添加一台车</button>
import {ref,reactive,toRefs,toRaw,markRaw} from 'vue'
export default {
name: 'Demo',
setup(){
//数据
let sum = ref(0)
let person = reactive({
name:'张三',
age:18,
job:{
j1:{
salary:20
}
}
})
//新增数据
function addCar(){
let car = {name:'奔驰',price:40} //对象
person.car = markRaw(car)//成为不是响应式
// person.car = car //响应式
}
//返回一个对象(常用)
return {
person,//这样可以监测到car 新增数据也可以监测到
...toRefs(person),
addCar,
}
}
}
<button @click="changePrice">换价格</button>
function changePrice(){
person.car.price++
console.log(person.car.price)
}
不是响应式了