Vue 3 学习 setup与响应式

 setup

  如以下截图所示：

代码如下：

<script setup>
const info = '简单的信息'

const printInfo = () => {
  console.log(info)
}

</script>


<template>
  <div class="about">
    <h1>{{ info }}</h1>
    <button @click="printInfo">Button</button>
  </div>
</template>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>

如果了解过或者使用过Vue 2的同学就会知道，以上代码多么简洁。这就是Vue3的好处。

我是后悔没有早点学习，省了一大堆罗嗦的代码，列如data, methods等等。

响应式

如下截图：

代码如下：

<script setup>

import { ref } from 'vue'

const info = '简单的信息'

const printInfo = () => {
  console.log(info)
}

const count = ref(0)

const setCount = () => {
  count.value++
}

</script>


<template>
  <div class="about">
    <div>
      <h1>{{ info }}</h1>
      <button @click="printInfo">Button</button>
    </div>
    <div>
      <span> {{ count }} </span>
      <button @click="setCount"> +1 </button>
    </div>
  </div>
</template>

<style>
</style>

结束，为什么这么写和原理是什么，不作说明。只是个人的学习记录。详细的教程还请不小心刷到这篇博客的同学们，去B站搜索Vue 3，有无数Up，讲的都很好的。