Vue3 学习笔记 —— ref 和 reactive

最新推荐文章于 2024-08-18 19:48:01 发布

tanleiDD

最新推荐文章于 2024-08-18 19:48:01 发布

阅读量476

点赞数

分类专栏： Vue3 文章标签： vue

本文链接：https://blog.csdn.net/TL18382950497/article/details/116351619

版权

本文是Vue3学习笔记，重点探讨了ref和reactive的区别与使用场景。ref通常用于创建基础类型响应式数据，返回的对象可以通过属性访问原始值。而在处理引用类型时，直接使用ref会将其转换为reactive对象。另一方面，reactive主要用于定义引用类型的响应式数据。

摘要由CSDN通过智能技术生成

ref

一般用来定义基础类型的响应式数据
返回一个对象，通过.value访问定义的基础类型值
在template中，不需要使用 .value

<template>
  {
   {
   count}}	// 在template中使用时，不需要 .value
  <button @click="addCount">加1</button>
</template>

<script lang="ts">

import {
    defineComponent, ref} from 'vue';

export default defineComponent({
   
  name: 'App',

  setup () {
   
    let count = ref(0)	// 定义一个基础类型的响应式数据
    function addCount () {
   
      count.