vue3.0 组合API-reactive函数 - API-toRef函数 - API-toRefs函数 - API-ref函数

最新推荐文章于 2022-08-22 18:15:34 发布

原创

最新推荐文章于 2022-08-22 18:15:34 发布 · 253 阅读

1 ·

CC 4.0 BY-SA版权

本文详细介绍了Vue中组合API的使用方法，包括reactive、toRef、toRefs及ref等函数，展示了如何定义和操作响应式数据，适用于简单和复杂的数据类型。

组合API-reactive函数

定义响应式数据：

reactive是一个函数，它可以定义一个复杂数据类型，成为响应式数据。
演示代码：

<template>
  <div class="container">
    <div>{
   
   {
   
   obj.name}}</div>
    <div>{
   
   {
   
   obj.age}}</div>
    <button @click="updateName">修改数据</button>
  </div>
</template>
<script>
import {
   
    reactive } from 'vue'
export default {
   
   
  name: 'App',
  setup () {
   
   
    // 普通数据
    // const obj = {
   
   
    //   name: 'ls',
    //   age: 18
    // }
    const obj = reactive({
   
   
      name: 'ls',
      age: 18
    })

    // 修改名字
    const updateName = () => {
   
   
      console.log('updateName'