翼度科技»论坛 编程开发 JavaScript 查看内容

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

5

主题

5

帖子

15

积分

新手上路

Rank: 1

积分
15
介绍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. <script lang="ts" setup name="Person11">
  12.    import {ref} from 'vue'
  13.    let name = ref('馒头')
  14.    let age = ref(18)
  15.    let tel = '11514611254'
  16.    let address = '北京市'


  17.    function changeName() {
  18.      name.value = 'zhang-san'
  19.      console.log(name)
  20.    }
  21.    function changeAge() {
  22.      age.value += 1
  23.      console.log(age)
  24.    }
  25.    function showTel() {
  26.      alert(tel)
  27.    }
  28. </script>

  29. <style scoped>
  30.    .person {
  31.      background-color: skyblue;
  32.      box-shadow: 0 0 10px;
  33.      border-radius: 10px;
  34.      padding: 20px;
  35.    }
  36.    button {
  37.      margin: 0 5px;
  38.    }
  39. </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. <script lang="ts" setup name="Person11">
  8.    import {reactive} from 'vue'
  9.    let Handmade = reactive({name:'小舞',price:888})

  10.    function changePrice() {
  11.      Handmade.price += 50
  12.    }
  13.   
  14. </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. <script lang="ts" setup name="Person11">
  14.   import {reactive} from 'vue'
  15.   let Handmade = reactive({name:'小舞',price:888})
  16.   let sports = reactive([
  17.     {id:'a',name:'足球'},
  18.     {id:'b',name:'篮球'},
  19.     {id:'c',name:'乒乓球'}
  20.   ])
  21.    function changePrice() {
  22.      Handmade.price += 50
  23.    }
  24.    function changeFirstGame(){
  25.     sports[0].name = '羽毛球'
  26.   }
  27.   
  28. </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】 我们会及时删除侵权内容,谢谢合作!
  • 本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有账号?立即注册

    x

    举报 回复 使用道具