Java登陆第三十六天——VUE3响应式入门、setup语法糖

当浏览器接收到服务端返回的页面后，浏览器会把页面解析成DOM树，DOM树中各个元素会相应的显示在浏览器上。

VUE提供的响应式数据可以在页面不刷新的情况下更新数据。

响应式数据

App.vue

<script>
//等价于setup语法糖。固定的写法，不会改。
export default {
  setup() {
    let sum = 0;
    function addsum() {
      sum++;
    }
    function showsum() {
      alert(sum);
    }
    //把sum字段和方法addsum,showsum暴露。否则外部无法使用。
    return {
      sum,
      addsum,
      showsum
    }
  }
}
</script>

<template>
<!--给button绑定点击事件 等价于<button onclick="showsum()">show</button> -->
  <button @click="showsum()">show</button>
<!--VUE的命令，后期会学习到，可以理解为把sum的值，放到p标签的文本节点中-->
  <p v-text="sum"></p>
  <button @click="addsum()">sum+1</button>
</template>

<style scoped>
</style>

效果展示

理想的情况下，应该是点击sum+1按钮，0会被更新到1，并且点击show按钮会正确的弹窗显示1。

点击sum+1按钮三下，0也没有被更新。点击show却正确的弹窗显示了3。

为什么呢？
	因为VUE3和VUE2不同。
	VUE2中的数据默认是响应式的。
	VUE3需要使用VUE3提供ref函数或者reactive函数，处理后的数据才是响应式数据。

如何使用这两个函数？

从vue框架中直接引入即可。
import {ref} from 'vue'
import {reactive} from 'vue'

修改sum为响应式数据。

App.vue

<script>
//从vue框架中引入ref函数
import {ref} from 'vue';
export default {
  setup() {
    //该方法返回值是一个对象 可以理解为 let sum = {value:0}
    let sum = ref(0);
    function addsum() {
      sum.value++;
    }
    function showsum() {
      alert(sum.value);
    }
    //把sum字段和方法addsum,showsum暴露。否则外部无法使用。
    return {
      sum,
      addsum,
      showsum
    }
  }
}
</script>

<template>
<!--给button绑定点击事件 等价于<button onclick="showsum()">show</button> -->
  <button @click="showsum()">show</button>
<!--VUE的命令，后期会学习到，可以理解为把sum的值，放到p标签的文本节点中-->
  <p v-text="sum"></p>
  <button @click="addsum()">sum+1</button>
</template>

<style scoped>
</style>

效果展示

此时点击sum+1按钮会正确的更新数据。

修改showsum方法如下。

//看看ref返回值，真正是什么样的。
    function showsum() {
      console.log(sum)
    }

setup语法糖

因为setup是固定的写法

export default {
  setup() {
//需要编写的仅仅是这里面的内容，所以VUE提供了一种语法糖。
  }
}

<script setup>

</script>

上下等价

<script>
export default {
  setup() {

  }
}
</script>