Vue3之to系列

toRef  如果原始对象是非响应式的就不会更新视图 数据是会变的，如果原始对象是响应式的是会更新视图并且改变数据的

非响应式对象：

  const man = {

    name:'man',

    age:18,

    sex:1

  }

  const state = toRef(man,'age')

  const changeToRef = () => {

    state.value  = 60

    console.log(man,state);

  }

注：数据会变化，但是视图不会更新

let info = reactive({

      name: 'Tony',

      greet: 'Hello'

    })

  // 复制 info 里的 greet 属性

    let rGreet = toRef(info, 'greet')

    // 更改 rGreet

    const onChangeGreet = () => {

      rGreet.value = 'world!'

    }

注：数据（info ，rGreet ）会变化，视图会更新

toRefs 可以帮我们批量创建ref对象主要是方便我们解构使用（复制 reactive 里的所有属性并转成 ref）

const person = reactive({

    uname:'man',

    age:18,

    sex:1

  })

  let {uname,age,sex} = toRefs(person)

  const changeToRefs = () => {

    uname.value= '嘿嘿'

    console.log(uname,age,sex)

  }

注：解构数据的时候常用

toRaw 将响应式对象转为普通对象

const person = reactive({

    uname:'man',

    age:18,

    sex:1

  })

const rraw = toRaw(person) //转为普通对象

  const changeToRaw = () => {

    console.log(person,rraw)

  }