Vue3使用ref与reactive创建响应式对象的示例代码

金色夜眸

介绍ref

先来简单介绍一下ref，它可以定义响应式的变量

• 语法：
  1. let xxx = ref(初始值)

  复制代码
  。
  
• **返回值：**一个
  1. RefImpl

  复制代码
  的实例对象，简称
  1. ref对象

  复制代码
  或
  1. ref

  复制代码
  ，
  1. ref

  复制代码
  对象的
  1. value

  复制代码
  属性是响应式的。
  
• 注意点：
  
  
  
  • 1. JS

    复制代码
    中操作数据需要：
    1. xxx.value

    复制代码
    ，但模板中不需要
    1. .value

    复制代码
    ，直接使用即可。
    
  • 对于
    1. let name = ref('张三')

    复制代码
    来说，
    1. name

    复制代码
    不是响应式的，
    1. name.value

    复制代码
    是响应式的。
    
  
  

下面我们看一看

上图红框中代表的意思是，我们哪里需要响应就在哪个里面导入上述代码即可

同时我们要在js中为变量添加value，否则不会更新，如下图所示

1. <template>
   
2.    <div class="person">
   
3.      <h2>姓名：{{name}}</h2>
   
4.      <h2>年龄：{{age}}</h2>
   
5.      <h2>地址：{{address}}</h2>
   
6.      <button @click="changeName">修改名字</button>
   
7.      <button @click="changeAge">修改年龄</button>
   
8.      <button @click="showTel">查看联系方式</button>
   
9.    </div>
   
10. </template>
    
11. 
    
12. <script lang="ts" setup name="Person11">
    
13.    import {ref} from 'vue'
    
14.    let name = ref('馒头')
    
15.    let age = ref(18)
    
16.    let tel = '11514611254'
    
17.    let address = '北京市'
    
18. 
    
19. 
    
20.    function changeName() {
    
21.      name.value = 'zhang-san'
    
22.      console.log(name)
    
23.    }
    
24.    function changeAge() {
    
25.      age.value += 1
    
26.      console.log(age)
    
27.    }
    
28.    function showTel() {
    
29.      alert(tel)
    
30.    }
    
31. </script>
    
32. 
    
33. <style scoped>
    
34.    .person {
    
35.      background-color: skyblue;
    
36.      box-shadow: 0 0 10px;
    
37.      border-radius: 10px;
    
38.      padding: 20px;
    
39.    }
    
40.    button {
    
41.      margin: 0 5px;
    
42.    }
    
43. </style>

复制代码

介绍reactive

相对比ref，reactive针对自定义的对象数组等

• 语法：
  1. let 响应式对象= reactive(源对象)

  复制代码
  。
  
• **返回值：**一个
  1. Proxy

  复制代码
  的实例对象，简称：响应式对象。
  
• 注意点：
  1. reactive

  复制代码
  定义的响应式数据是“深层次”的。
  

实际例子如下

1. <template>
   
2.    <div class="person">
   
3.      <h2>{{Handmade.name}}手办，价值{{ Handmade.price }}元</h2>
   
4.      <button @click="changePrice">修改价格</button>
   
5.    </div>
   
6. </template>
   
7. 
   
8. <script lang="ts" setup name="Person11">
   
9.    import {reactive} from 'vue'
   
10.    let Handmade = reactive({name:'小舞',price:888})
    
11. 
    
12.    function changePrice() {
    
13.      Handmade.price += 50
    
14.    }
    
15.   
    
16. </script>

复制代码

如果是数组呢

1. <template>
   
2.    <div class="person">
   
3.      <h2>{{Handmade.name}}手办，价值{{ Handmade.price }}元</h2>
   
4.      <button @click="changePrice">修改价格</button>
   
5.      <br>
   
6.      <h2>运动：</h2>
   
7.       <ul>
   
8.         <li v-for="i in sports" :key="i.id">{{i.name}}</li>
   
9.       </ul>
   
10.       <button @click="changeFirstGame">修改第一个运动的名字</button>
    
11.    </div>
    
12. </template>
    
13. 
    
14. <script lang="ts" setup name="Person11">
    
15.   import {reactive} from 'vue'
    
16.   let Handmade = reactive({name:'小舞',price:888})
    
17.   let sports = reactive([
    
18.     {id:'a',name:'足球'},
    
19.     {id:'b',name:'篮球'},
    
20.     {id:'c',name:'乒乓球'}
    
21.   ])
    
22.    function changePrice() {
    
23.      Handmade.price += 50
    
24.    }
    
25.    function changeFirstGame(){
    
26.     sports[0].name = '羽毛球'
    
27.   }
    
28.   
    
29. </script>

复制代码

运行结果如下

==注意：==深层次的数据也行可以的

1. let obj = reactive({
   
2.     a:{
   
3.       b:{
   
4.         c:666
   
5.       }
   
6.     }
   
7.   })

复制代码

下面再进行扩展一下知识点

ref扩展

前面说ref可以定义基本类型，但是这里我再说明一下，其实ref也可以创建对象类型，但是reactive确实不可以定义基本类型

1. <script lang="ts" setup name="Person11">
   
2.   import {ref} from 'vue'
   
3.   let Handmade = ref({name:'小舞',price:888})
   
4.   let sports = ref([
   
5.     {id:'a',name:'足球'},
   
6.     {id:'b',name:'篮球'},
   
7.     {id:'c',name:'乒乓球'}
   
8.   ])
   
9.    function changePrice() {
   
10.      Handmade.value.price += 50
    
11.    }
    
12.    function changeFirstGame(){
    
13.     sports.value[0].name = '羽毛球'
    
14.   }
    
15.   
    
16. </script>

复制代码

其实只需要注意一点，别忘了ref在js中的书写要求要加.value
若

1. ref

复制代码

接收的是对象类型，内部其实也是调用了

1. reactive

复制代码

函数。

ref和reactive对比

宏观角度看：

1. [code]ref

复制代码

用来定义：基本类型数据、对象类型数据；

1. reactive

复制代码

用来定义：对象类型数据。[/code]区别：

1. [code]ref

复制代码

创建的变量必须使用

1. .value

复制代码

（可以使用

1. volar

复制代码

插件自动添加

1. .value

复制代码

）。在设置–》扩展–》Volar[/code]

1. [code]reactive

复制代码

重新分配一个新对象，会失去响应式（可以使用

1. Object.assign

复制代码

去整体替换）。其实就是不能重复写同一个对象[/code]使用原则：

1. <ul><li>若需要一个基本类型的响应式数据，必须使用[code]ref

复制代码

。

若需要一个响应式对象，层级不深，

1. ref

复制代码

、

1. reactive

复制代码

都可以。

若需要一个响应式对象，且层级较深，推荐使用

1. reactive

复制代码

。
[/code]
总结

1. 本文根据禹神课程进行总结，本节主要介绍ref和reactive

复制代码

以上就是Vue3使用ref与reactive创建响应式对象的示例代码的详细内容，更多关于Vue3 ref reactive响应式对象的资料请关注脚本之家其它相关文章！

来源:https://www.jb51.net/javascript/31609239q.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！