Vue3+Vite实现工程化，ref初次接触响应式和setup语法糖

1、 App.vue
<script setup>
/*function setup() {
  let num = 9;
}*/
//vue2中所有的变量都是响应式的，但是vue3中默认所有的变量都不是响应式
import {ref} from "vue";
/*export default {
  setup() {
    let num = ref(9);
    let incre = function () {
      num.value++;
    };
    let decre = function () {
      num.value--;
    };
    return {num, incre,decre}
  },
}*/
let num = ref(9);
 
let incre = function () {
  num.value++;
};
let decre = function () {
  num.value--;
};
 
script>
<template>
  <div>
    
    <button @click="incre">+button>
    
    <span>{{ num }}span>
    <button @click="decre">-button>
  div>
template>
<style scoped>style>
2、main.js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
 
createApp(App).mount('#app')
3、index.html
html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vuetitle>
  head>
  <body>
    <div id="app">div>
    <script type="module" src="/src/main.js">script>
  body>
html>
在Vue3中，浏览器会先加载和解析index.html文件，然后再执行main.js里的代码。这是因为index.html是HTML文档的入口点，而main.js是JavaScript文件，在index.html中通过script标签引入。当浏览器解析index.html时，会从上到下逐行执行HTML和JavaScript代码，并且遇到script标签时会先加载并执行其中的代码。因此，即使在main.js中编写了Vue3代码，也必须通过在index.html中引入main.js来启动应用程序，并且必须等到index.html加载和解析完成后才能执行。

相关阅读:
【Node.js】querystring 模块
测试用例常见的7种设计方法
apply和call在Javascript中的使用与区别
开始MySQL之路——MySQL存储引擎概念
Java中如何对List遍历呢？
Web自动化-Windows窗口上传文件
【无人机协同】基于matlab无人飞行器协同车辆物资配送【含Matlab源码 1899期】
[AIGC] Kafka解析：分区、消费者组与消费者的关系
一文搞懂 Python 的模块和包，在实战中的最佳实践
MBR30300VCT-ASEMI肖特基二极管有什么用

原文地址：https://blog.csdn.net/m0_65152767/article/details/134471151