vue3的setup语法糖 以及数据响应式的实现

目录

首先，之前的文章有提起，setup可以将数据定义,方法定义等写到一起,但是有些复杂，为此vue团队对其进行 优化

基本数据类型： 

引用数据类型

---

首先，之前的文章有提起，setup可以将数据定义,方法定义等写到一起,但是有些复杂，为此vue团队对其进行 优化

  

<template>
<div> 
<h3> {{num}}</h3>
  <button>修改num</button>
</div>
</template>
<script setup>
  let num=10
  const changenum=()=>{
    num++
   console.log(num)
}
</script>

运行代码发现控制台num确实更新了，但是页面上没有变化，接下来我们让数据具有响应式

基本数据类型： 

     基本数据类型响应式的实现，一般都是使用ref来进行实现

<template>
<div> 
<h3> {{num}}</h3>
  <button @click='changenum'>修改num</button>
</div>
</template>
<script setup>
import {ref} from 'vue'
  let num=ref(10)
  const changenum=()=>{
    num.value++
   console.log(num)
}
</script>

此时运用浏览器的vue插,件可以发现,数据具有响应式,点击发现页面有所更新

引用数据类型

如果是引用数据类型有要如何进行响应式呢？使用reactive

<template>
<div> 

<p>姓名{{obj.name}}</p>
<p>年龄{{obj.age}}</p>
  <button @click='changeage'>修改年龄</button>

</div>
</template>
<script setup>
import {reactive} from 'vue'
  let obj=reactive({name:'张三',age:'18'})
  const changeage=()=>{
    obj.age++
  
}
</script>