Vue学习笔记-Vue3中的toRaw和markRaw

toRaw

• 作用：将一个由reactive生成的响应式对象转为普通对象

• 导入： import {toRaw} from 'vue'

• 使用方法：

  let data = reactive({
       
  	k1:'v1',
  	k2:'v2'
  })
  //将对象变为非响应式的普通对象
  let raw_data = toRaw(data)
  

• 使用场景：用于读取响应式对象对应的普通对象，对该普通对象的所有操作不会引起页面更新

markRaw

• 作用：标记一个对象，使其不再成为响应式对象

• 导入：import {markRow} from 'vue'

• 使用方法：

  let data = reactive({
       
  		k1:'v1',
  		k2:'v2'
  	})
  /*该方法用于为响应式数据新增一个car对象，但是不希望该car对象也是响应式的*/
  function addCar(){
       
  	let car = {
       
  		name:'奔驰',
  		price:'40W'
  	}
  	//将car对象标记为非响应式的，并添加
  	data.car = markRaw(car)
  }
  

• 使用场景：有些值不应该被设置为响应式的，例如第三方类库，或者渲染一些不可变的复杂对象（包含多层嵌套对象）时，跳过响应式可以提高性能