Vue3中toRefs的使用

1 使用reactive 实现数据的响应式

<template>

  <div>

    <h2>toRef的使用</h2>

    <p> 姓名：{{state.name }} </p>

    <p>年龄:{{ state.age }} </p>

    <button @click="changeHander">改变内容</button>

  </div>

</template>

<script>

import {   reactive }  from "vue"

export default {

  name: "App",

  setup() {

   let  state=reactive({

     name:'李四',

     age:40

   })

   function changeHander(){

     state.name="李四222"

     state.age=80

   }

   return {state,changeHander}

  }

};

</script>

虽然上面可以使用数据的响应式。

但是有时属性值很多，

可能有达到几十个值。

这样在视图上一个个属性点(.) 会很麻烦

可不可以不通过点也能够正常的去渲染和自动更新视图呢？

这个时候，机智的小伙伴们可能就想到到解构

那么我们来尝试一下。

2.使用解构

<template>

  <div>

    <h2>toRef的使用</h2>

    <p> 姓名：{{name }} </p>

    <p>年龄:{{ age }} </p>

    <button @click="changeHander">改变内容</button>

  </div>

</template>

<script>

import {   reactive }  from "vue"

export default {

  name: "App",

  setup() {

   let  state=reactive({

     name:'李四',

     age:40

   })

   function changeHander(){

     state.name="李四222"

     state.age=80

   }

    //  ...state虽然我们通过解构的方式。不要在视图上进行点了。但是数据却没有响应

   return {...state,changeHander}

  }

};

</script>

我们发现使用解构视图并没有改变。

说明使用解构不行。

这个时候我们今天的主角toRefs就登场了

toRefs 可以把一个响应式对象转换为普通的对象。

该普通对象的每一个值都是ref。

由于变成了ref，所以我们需要使用value。

赶紧往下看看

3. 初次使用toRefs

<template>

  <div>

    <h2>toRef的使用</h2>

    <p> 姓名：{{name }} </p>

    <p>年龄:{{ age }} </p>

    <button @click="changeHander">改变内容</button>

  </div>

</template>

<script>

import {   reactive, toRefs }  from "vue"

export default {

  name: "App",

  setup() {

    let  state=reactive({

        name:'李四',

        age:40

    })

    //  toRefs 可以把一个响应式对象转换为普通的对象。

    //  该普通对象的每一个值都是ref

    // age: ObjectRefImpl {_object: Proxy, _key: "age", __v_isRef: true}

    // name: ObjectRefImpl {_object: Proxy, _key: "name", __v_isRef: true}

    let state2=toRefs(state);

    console.log( 'state2==>ref',state2 )

    function changeHander(){

        // 由于变成了ref，所以我们需要使用value

        state2.name.value="李四222"

        state2.age.value=80

    }

    //  ...state虽然我们通过解构的方式。不要在视图上进行点了。但是数据却没有响应

    return {...state2,changeHander}

  }

};

</script>

4.优化一下，在toRefs的时候进行解构

<template>

  <div>

    <h2>toRef的使用</h2>

    <p> 姓名：{{name }} </p>

    <p>年龄:{{ age }} </p>

    <button @click="changeHander">改变内容</button>

  </div>

</template>

<script>

import {   reactive, toRefs }  from "vue"

export default {

  name: "App",

  setup() {

    let  state=reactive({

        name:'李四',

        age:40

    })

    // 这里进行了一次解构

    let {name,age }=toRefs(state);

    function changeHander(){

        name.value="李四222"

        age.value=80

    }

    return {name,age,changeHander}

  }

};

</script>

5. toRefs 可以和 hook 进行搭配使用

<template>

  <div>

    <h2>toRef的使用</h2>

    <p> 姓名：{{name }} </p>

    <p>年龄:{{ age }} </p>

    <button @click="changeHander">改变内容</button>

    <h1>==========奥特曼信息==========</h1>

    <p> 姓名：{{name1 }} </p>

    <p>年龄:{{ age1 }} </p>

  </div>

</template>

<script>

import {   reactive, toRefs }  from "vue"

export default {

  name: "App",

  setup() {

    let  state=reactive({

        name:'李四',

        age:40

    })

    // 这里进行了一次解构

    let {name,age }=toRefs(state);

    // 这样在视图上就直接使用值了

    let {name1, age1}=useInfo();

    function changeHander(){

        name.value="李四222"

        age.value=80

    }

    return {name,age,changeHander, name1, age1}

  }

};

// 假设我定义的一个hook

function useInfo(){

  let sate=reactive({

    name1:"奥特曼",

    age1:1000

  })

   //这里变成响应式并且解构

   return { ...toRefs(sate) }

}

</script>

巴特西

Vue3中toRefs的使用

1 使用reactive 实现数据的响应式

2.使用解构

3. 初次使用toRefs

4.优化一下，在toRefs的时候进行解构

5. toRefs 可以和 hook 进行搭配使用

最新文章

热门文章