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)
    }
    
  • 使用场景:有些值不应该被设置为响应式的,例如第三方类库,或者渲染一些不可变的复杂对象(包含多层嵌套对象)时,跳过响应式可以提高性能

你可能感兴趣的:(Vue,vue.js,学习,笔记)