Vue3【十】07利用ref创建根本范例的响应式数据以及ref和reactive区别 ...

Vue3【十】07利用ref创建根本范例的响应式数据以及ref和reactive区别

   ref 也可以创建对象范例的响应式数据，不外要利用.value
ref 处置惩罚对象数据的时候，底层数据还是reactive格式的
reactive 重新分配一个新对象，会失去响应式可以利用Object.assign()来做整体替换，不会丢失响应式
若要利用一个根本范例的响应式数据，必须利用ref
若要利用一个响应式对象成绩不深，ref和reactive都可以
若要利用一个响应式对象，层级比较深，推荐reactive
  案例截图

目次结构

案例代码

Person.vue

1. <template>
2.     <div class="person">
3.         <h1>我是 兜率宫 组件</h1>
4.         <h2>名字:{{ palace.name }}</h2>
5.         <h2>数量:{{ palace.no }} </h2>
6.         <button @click="changeName">修改名字</button>
7.         <button @click="changeNo">修改数量</button>
8.         <button @click="showAdd">查看信息</button>
9.         <button @click="changePalace">修改宫殿</button>
10.     </div>
11.     <div class="baxian">
12.         <h2>八仙都有哪些？</h2>
13.         <ul>
14.             <li v-for="item in baxian" :key="item.id">{{ item.name }}</li>
15.         </ul>
16.         <button @click="changeFirstName"> 更改第一个名字 </button>
17.     </div>
18. </template>
20. <script lang="ts" setup>
21. import { ref } from 'vue'
23. // 数据
25. // ref 也可以创建对象类型的响应式数据，不过要使用.value
26. // ref 处理对象数据的时候，底层数据还是reactive格式的
27. let palace = ref({
28.     name: '兜率宫',
29.     add: '兜率宫。兜率宫位于江西省鹰潭市的龙虎山，是道教的重要圣地之一。它被认为是太上老君的道场，位于离恨天之上，是道教神话中兜率天宫的一部分。兜率宫原址位于龙虎山天门山，有着悠久的历史和文化背景。',
30.     no: 1
31. })
33. let baxian = ref([
34.     { id: 'b01', name: '铁拐李' },
35.     { id: 'b02', name: '汉钟离' },
36.     { id: 'b03', name: '张果老' },
37.     { id: 'b04', name: '吕洞宾' },
38.     { id: 'b05', name: '何仙姑' },
39.     { id: 'b06', name: '蓝采和' },
40.     { id: 'b07', name: '韩湘子' },
41.     { id: 'b08', name: '曹国舅' },
42. ])
44. console.log(palace)
45. console.log(baxian)
47. // reactive 重新分配一个新对象，会失去响应式可以使用Object.assign()来做整体替换，不会丢失响应式
48. function changePalace() {
49.     Object.assign(palace.value, {
50.         name: '天师殿',
51.         add: '天师殿，是道教的重要圣地之一。',
52.         no: 20
53.     })
54. }
56. // 方法
57. function changeFirstName() {
58.     baxian.value[0].name = '孙悟空'
59. }
60. function showAdd() {
61.     alert(palace.value.add)
62. }
63. function changeName() {
64.     palace.value.name = palace.value.name == "兜率宫" ? '永乐宫' : '兜率宫'
65.     console.log(palace)
66. }
67. function changeNo() {
68.     palace.value.no += 1
69.     console.log(palace.value.no)
70. }
71. // 若要使用一个基本类型的响应式数据，必须使用ref
72. // 若要使用一个响应式对象成绩不深，ref和reactive都可以
73. // 若要使用一个响应式对象，层级比较深，推荐reactive
74. </script>
76. <style scoped>
77. .person {
78.     background-color: #ff9e4f;
79.     box-shadow: 0 0 10px;
80.     border-radius: 30px;
81.     padding: 30px;
82. }
84. button {
85.     margin: 0 10px;
86.     padding: 0 5px;
87.     box-shadow: 0 0 5px;
88.     ;
89. }
90. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。