vue3的setup，ref以及reactive

最新推荐文章于 2024-08-17 16:59:28 发布

weixin_47268588

最新推荐文章于 2024-08-17 16:59:28 发布

阅读量297

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_47268588/article/details/127795997

版权

本文介绍了Vue3中的一些重要变化，包括不再需要根标签，重点讲解了setup函数的特性，它是组合API的初始化入口，只执行一次。接着探讨了ref和reactive的区别：ref用于创建单个响应式基本类型数据，其value属性用于数据操作；而reactive则用于创建多个响应式数据，基于ES6的proxy实现，通过代理对象实现对源对象的响应式操作。总结指出，当需要使页面跟随数据变化实时更新时，应操作代理对象。

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

vue2的html模板中必须要有一对根标签，vue3中可以没有这个根标签。

setup是组合API的入口函数。只在初始化的时候执行一次。

ref是一个函数，作用是定义一个响应式数据，返回的是一个ref的对象。对象中有一个value属性，如果需要对数据进行操作，需要使用该ref对象调用value属性的方式进行数据操作。html模板中不需要使用.value的属性写法。

ref一般是用来定义基本类型的数据响应式。

<template>
  <div @click='handleClick'>
    ref和setup的基本使用{
  {a}}
  </div>
</template>
<script  lang="ts">
import { defineComponent,ref } from "vue";
export default defineComponent({
   name: "App",
   components: {  },
   //需求：页面打开后可以直接看到一个数据，点击该按钮后，该数据可以发生变化
   
   setup(){
     let a=ref(1);
    function handleClick() {
      a.value++;
    }
     return{
       a,
       handleClick
     }
   }
})

</script>

reactive的作用是定义多个数据的响应式。

内部基于es6的proxy，通过代理对象操作源对象内部数据都是响应式的。

总结：如果操作代理对象，目标对象中的数据也会随之变化，同时如果想要操作数据的时候࿰