响应式数据和setup语法

实现一个简单的功能两个按钮一个+，一个-，中间一个数字点击加号，数字加一；点击减号，数字减一

<script>
export default {
  setup() {
    // 定义计数器变量
    let counter = 1;

    // 计数器加一
    function incrementCounter() {
      counter++;
    }

    // 计数器减一
    function decrementCounter() {
      counter--;
    }

    // 显示当前计数器值
    function displayCounter() {
      alert(counter);
    }

    return {
      counter,
      incrementCounter,
      decrementCounter,
      displayCounter
    };
  }
};
</script>

<template>
  <div>
    <button @click="incrementCounter">+</button>
    <span v-text="counter"></span>
    <button @click="decrementCounter">-</button>
    <button @click="displayCounter">显示计数器</button>
  </div>
</template>

<style scoped>
/* 样式定义 */
</style>
 

在这个代码中我们发现点击加号后中间的数不会变化，这是因为vue3中要先经过ref函数或者reactive函数处理后才是响应式的

            非响应式数据: 修改后VUE不会更新DOM
            响应式数据:   修改后VUE会更新DOM

ref函数或者reactive函数导入进来就可以使用

注意: 1 ref处理的响应式数据在js编码修改的时候需要通过.value操作

         2 ref响应式数据在绑定到html上时不需要.value

用ref包裹住页面的数字

总结:

        1 ref的导入

import { ref } from 'vue'
 

        2 函数的方法

// 增加计数器值
function incrementCounter() {
  counter.value++;
}

// 减少计数器值
function decrementCounter() {
  counter.value--;
}

// 显示当前计数器值
function displayCounter() {
  alert(counter.value);
}

return {
  counter,
  incrementCounter,
  decrementCounter,
  displayCounter
};
 

       3 变量的声明

import { ref } from 'vue';

let counter = ref(1);
 

同时我们注意到

export default

  setup(){

return 

十分的繁琐

只需要把这些都删了再把<script>变为<script setup>就可以了

<script setup>
import { ref } from 'vue'

// 定义计数器变量
const counter = ref(1)

// 增加计数器
function incrementCounter() {
  counter.value++
}

// 减少计数器
function decrementCounter() {
  counter.value--
}

// 显示当前计数器值
function showCounter() {
  alert(counter.value)
}
</script>

<template>
  <div>
    <button @click="incrementCounter">+</button>
    <span v-text="counter"></span>
    <button @click="decrementCounter">-</button>
    <button @click="showCounter">Show Counter</button>
  </div>
</template>

<style scoped>
/* 样式内容 */
</style>