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

合集 - Java登陆(70)

1.Java登陆第一天——Mysql安装2023-11-082.Java登陆第一天——Maven入门2023-11-083.Java登陆第二天——SQL之DDL2023-11-094.Java登陆第二天——SQL之DML2023-11-095.Java登陆第三天——SQL之DQL(一)基础查询、聚合函数、分组查询2023-11-106.Java登陆第四天——SQL之DQL(二)分页查询、多表查询、自连接2023-11-117.Java登陆第五天——SQL之DQL(三)子查询2023-11-128.Java登陆第六天——SQL之表复制，表去重，合并查询2023-11-149.Java登陆第六天——SQL之SQL(四)外连接2023-11-1410.Java登陆第六天——SQL之约束2023-11-1411.Java登陆第七天——SQL之事务2023-11-1512.Java登陆第七天——SQL之事务隔离2023-11-1613.Java登陆第八天——SQL之DCL2023-11-1614.Java登陆第九天——JDBC(一)DriverManager、Connection、Statement2023-11-1915.Java登陆第十天——JDBC(二)ResultSet2023-11-2016.Java登陆第十一天——JDBC(三)PreparedStatement、CLOB、BLOB2023-11-2117.Java登陆第十二天——网络编程(一)网络的概念2023-11-2318.Java登陆第十二天——网络编程(二)InetAddress、Socket2023-11-2319.Java登陆第十三天——网络编程(三)DatagramSocket2023-11-2420.Java登陆第十四天——网络编程(四)韩顺平网络编程2023-11-2521.Java登陆第十五天——网络编程(四)韩顺平网络编程2023-11-2922.Java登陆第十六天——网络编程(四)韩顺平网络编程2023-11-3023.Java登陆第十七天——网络编程(四)韩顺平网络编程完成2023-12-0424.Java登陆第十七天——正则表达式2023-12-0425.Java登陆第十八天——Java8之Lambda表达式2023-12-0526.Java登陆第十九天——HTML规范与语法2023-12-0627.Java登陆第二十天——HTML常用标签2023-12-0728.Java登陆第二十一天——CSS2023-12-1029.Java登陆第二十二天——JavaScript入门2023-12-1130.Java登陆第二十三天——JavaScript对象、JSON、事件2023-12-1231.Java登陆第二十四天——JavaScriptBOM、DOM2023-12-1432.Java登陆第二十五天——Tomcat、认识JavaWeb项目2023-12-1833.Java登陆第二十六天——Http2023-12-2034.Java登陆第二十六天——Servlet2023-12-2035.Java登陆第二十七天——多种方法Servlet映射、Content-Type2023-12-2136.Java登陆第二十八天——Servlet生命周期2023-12-2237.Java登陆第二十九天——Servlet继承关系，service和doGet的区别2023-12-2338.Java登陆第二十九天——ServletConfig和ServletContext2023-12-2339.Java登陆第二十九天——HttpServletRequest和HttpServletResponse2023-12-2440.Java登陆第二十九天——请求转发和响应重定向2023-12-2541.Java登陆第三十天——Cookie和Session2023-12-2742.Java登陆第三十天——域对象2024-01-0243.Java登陆第三十一天——Filter2024-01-1744.Java登陆第三十一天——监听器2024-01-1945.Java登陆第三十二天——AJAX和异步2024-03-0646.Java登陆第三十二天——前端工程化2024-03-0747.Java登陆第三十二天——ES6(一)let、const、模板字符串、解构表达式、箭头函数2024-03-0848.Java登陆第三十三天——ES6(二)reset、spread、Class类语法糖2024-03-0949.Java登陆第三十三天——ES6(二)浅拷贝、深拷贝2024-03-0950.Java登陆第三十三天——ES6(二)模块、模块化2024-03-0951.Java登陆第三十四天——Node.js安装、npm配置、npm命令2024-03-1052.Java登陆第三十四天——使用Vite创建工程化的Vue3项目2024-03-1153.Java登陆第三十五天——Vite+Vue3目录结构、.vue文件理解（SFC）2024-03-1454.Java登陆第三十五天——VUE初始页面解析2024-03-1455.Java登陆第三十六天——VUE3引入CSS2024-04-02

56.Java登陆第三十六天——VUE3响应式入门、setup语法糖2024-04-02

57.Java登陆第三十七天——VUE3插值表达式、文本渲染、属性渲染、事件绑定2024-04-0358.Java登陆第三十七天——VUE3响应式基础、条件渲染、列表渲染2024-04-0459.Java登陆第三十八天——VUE3双向绑定，监听器(侦听器)2024-04-0560.Java登陆第三十八天——VUE3生命周期、钩子函数、组件拼接、组件传参(组件通信)2024-04-0561.Java登陆第三十九天——Router路由入门2024-04-0662.Java登陆第三十九天——Router编程式路由，路由传参2024-04-0663.Java登陆第四十天——Router路由守卫2024-04-0764.Java登陆第四十天——Router路由守卫练习2024-04-0765.Java登陆第四十一天——Promise、async关键字、await关键字2024-04-0866.Java登陆第四十一天——Axios2024-04-0967.Java登陆第四十二天——Axios拦截器2024-04-1068.Java登陆第四十二天——跨域2024-04-1469.Java登陆第四十三天——Pinia2024-04-1770.Java登陆第四十四天——跟写微头条遇到的问题2024-04-25

收起

当浏览器接收到服务端返回的页面后，浏览器会把页面解析成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>