vue组合式开发（不使用this）
模板式写法：
vscod（调出控制终端快捷键ctrl+shift+~）
1.在文件夹中创建xx.vue文件，文件包括三部分
<script setup></script> 对应js <template></template> 只能有一份 ，另外两个任意 对应html <style scoped></style> 对应 css
2.填充内容
<script setup> import { onMounted, ref } from "vue"; //引用vue的函数 /* 组合式开发 */ //代表count2初始值为0 const count2 = ref(0); //ref响应式赋值,模型改变视图会立即渲染,修改多次渲染多次，通俗就是，点击数字会变化 const demo2 = () => { count2.value++; 响应式 要用.value进行操作 }; let count3 = 0; //不是响应是赋值，第一次会渲染视图，但是后面对数据的修改视图不会渲染 ，点击数字无变化 const demo3 = () => { count3++; }; onMounted(() => { console.log("页面挂在完成。。。"); }); </script> <template> <h1>组合式开发</h1> <button @click="demo2">click:{{ count2 }}</button> {{ count2 }} vue中的插值表达式 <button @click="demo3">click:{{ count3 }}</button> </template> <style scoped></style>
3.挂载在APP.vue中
<script setup> import Dev1XXS（文件名） from "./Pages/Dev1XXS.vue（路径）"; 导入导入其他组件，当前组件能够使用Dev1XXS组件的功能和 UI </script> // 模板只能有一份 <template> <Dev1XXS></Dev1XXS> //写模板 定义组件的 UI 结构 将Dev1XXS组件渲染到当前组件的位置；标签中间能否插入内容要根据属性决定 </template> <style scoped></style>
ref使用value的时机
变量 |
数据类型 |
存储内容 |
典型应用场景 |
访问方式（JS / 模板） |
|
对象 |
表单字段 |
表单数据绑定、筛选条件 |
/ |
|
数值 |
单个 ID 值 |
记录行 ID、当前选中项 |
/ |
|
数组 |
列表数据 |
列表渲染、数据展示 |
/ |
场景 |
JavaScript 代码（需用 ） |
模板代码（无需 ） |
访问对象属性 |
|
|
访问基本类型 |
|
|
访问数组 |
|
|
修改对象属性 |
|
|
修改基本类型 |
|
|
ref的作用：将数据包装成响应式对象，通过.value存储实际值。- JS 中必须用
.value：因为需要显式操作被包装的数据，让 Vue 追踪变化。 - 模板中无需
.value：框架自动解包.value，简化语法。
举个生活类比：ref就像一个装着糖果（数据）的盒子（.value）。
- 在 JS 中，你需要打开盒子（
.value）才能拿到糖果； - 在模板中，盒子是透明的，你可以直接看到并拿到糖果（无需
.value）。
