什么是相应式?

表达式: 用于表达式举行插值,渲染到页面之中

语法: {{ 表达式 }}
案例

2. <template>
3.     <h1>{{ arr[2] }}</h1>
4.     <h1>{{ 9 + 5 }}</h1>
5.     <h1>{{ "神奇" }}</h1>
6. </template>
8. <script setup>
9. import { ref } from 'vue';
10. var arr = ref([1, 2, 4, 5])
11. </script>
13. <style></style>

复制代码

---

相应式：数据的厘革可以触发到界面
相应式语法：可以将任何范例的值转换为相应式数据

2. import { ref } from 'vue'; //用于引入组件，相对于java中的导包
4. const reactiveVar = ref('这是响应式变量');

复制代码

---

寻常变量和相应式的区别(当一个修改的地域块，同时出现了寻常和相应式，两者都会是相应式)
相应式：修改相应式的值之后，页面可以发生改变

2. <template>
3.     <div>
4.         <!-- 显示响应式变量的值 -->
5.         <h1>响应式变量: {{ reactiveVar }}</h1>
6.         <!-- 点击按钮时调用updateRef函数以更新响应式变量的值 -->
7.         <button @click="updateRef">响应式变量</button>
8.     </div>
9. </template>
11. <script setup>
12. // 导入Vue的ref函数，用于创建响应式变量
13. import { ref } from 'vue';
15. // 创建一个响应式变量，初始值为'这是响应式变量'
16. const reactiveVar = ref('这是响应式变量');
18. /**
19. * 更新响应式变量的值
20. * 此函数将reactiveVar的值更新为'响应式变量已更新'，以演示响应式原理
21. */
22. function updateRef() {
23.     reactiveVar.value = '响应式变量已更新';
24. }
26. </script>

复制代码

点击后

---

寻常变量：当我们修改寻常变量的值之后，页面中体现的值并不会发生改变

2. <template>
3.     <div>
4.         <!-- 显示普通变量的值 -->
5.         <h1>普通变量: {{ normalVar }}</h1>
6.         <!-- 点击按钮时调用update函数以更新普通变量的值 -->
7.         <button @click="update">普通变量</button>
8.     </div>
9. </template>
11. <script setup>
12. // 普通变量，不会引起界面自动更新
13. let normalVar = '这是普通变量';
15. // 更新函数，用于更新普通变量的值
16. function update() {
17.     // 更新普通变量
18.     normalVar = '普通变量已更新';
19. }
20. </script>
22. <style></style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金