vue3.0实现todolist(3)定义数据

雨下听风声

于 2021-04-29 15:14:10 发布

阅读量439

点赞数

分类专栏： vue-cli3 文章标签： vue-cli3 vue

本文链接：https://blog.youkuaiyun.com/qq_33338352/article/details/116269020

版权

vue-cli3 专栏收录该内容

15 篇文章

订阅专栏

本文深入探讨了Vue.js中的响应式数据绑定，重点介绍了`ref`和`reactive`的使用。`ref`用于创建单个响应式属性，而`reactive`则用于创建整个对象的响应式副本。通过`toRefs`，可以将`reactive`对象的属性转换为单独的`ref`，从而更方便地在模板中使用。示例展示了如何在组件的`setup`选项中声明并返回这些响应式变量，以及如何在模板中显示它们的值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ref定义单个数据

import {defineComponent,ref} from 'vue'

 setup(props, ctx) {
    let num=ref(10)
    let name=ref('afss')
    let arr=ref(['a','b'])
    let obj=ref({
      age:20
    })
    return {
      num,
      name,
      arr,
      obj
    };
  }

reactive定义对象类型的数据

import { defineComponent,ref, reactive } from "vue";

let data=reactive({
      num:10,
      name:'afss',
      arr:['a','b'],
      obj:{
        age:20
      }
    })
return{
    data
}


{{data.num}}{{data.name}}{{data.arr}}{{data.obj.age}}

toRefs：

import { defineComponent,ref, reactive,toRefs } from "vue";

 return {
    
      ...toRefs(data)
 }
  

import { defineComponent,ref, reactive,toRefs } from "vue";