vue3-组合式api-定义响应式数据-reactive，toRefs

<template>

  <div>

    {{ obj.name }}

    {{ name }}

    <button @click="changeObjName">改变名字</button>

  </div>

</template>

<script>

import { reactive, toRefs } from "vue";

export default {

  setup() {

    //通过reactive定义响应式引用类型的数据

    let obj = reactive({

      name: "张三",

      age: 18,

    });

    function changeObjName() {

      obj.name = "李四";

    }

 

    //通过es6扩展运算符进行解构使得对象中的属性不是响应式的

    //toRefs(对象)使解构后的数据重新获得响应式

    return {

      obj,

      changeObjName,

      ...toRefs(obj),

    };

  },

};

</script>

运行效果：点击改变名字  obj.name，name都变为李四

 

出　　处：https://www.cnblogs.com/xiao-wo-niu/
版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。