ref和reactive - 技术栈

一.ref创建基本类型的响应式数据

1.ref的返回值

这里我们可以看到refimpl实例对象中我们模板中的name实际应该是name.value，不过模板已经帮我们做好了只需要name即可，但是操作dom的时候还是需要些name.value

html 复制代码

<template>
   <div>
      <div class="person">
      <h2>姓名：{{name}}</h2>
      <h2>年龄：{{ age }}</h2>
      <button @click="changeName">修改名字</button>
      <button @click="changeAge">修改年龄</button>
      <button @click="showTel">查看联系方式</button>
      </div>
   </div>
</template>
<script setup>
   defineOptions({
  name: 'Person234',      // 组件名
  inheritAttrs: false,    // 其他选项
  // ...
})
//导入 ref模块
import {ref} from 'vue'
   //数据
   let name=ref('梁安邦')
   console.log(name);
   
   let age=ref(13)
   console.log(age);
   
   //方法  
   function changeName(){
            name.value='赖全烙'
         }
    function changeAge(){
            age.value+=1;
         }
   function showTel(){
            alert(tel);
         }
</script>
<style lang="scss" scoped>
            .person {
               background-color: skyblue;
               box-shadow: 0 0 10px;
               border-radius: 10px;
               padding: 20px;
            }
            button {
               margin-right: 10px;
            }
</style>

二.reactive创建对象类型的响应式数据

html 复制代码

<template>
      <div class="person">
      <h2>品牌：{{car.brand}}</h2>
      <h2>价格：{{car.price}}</h2>
      <button @click="changePrice">修改价格</button>
      <br>
      <h2>游戏列表：</h2>
      <ul>
         <li v-for="g in games":key='g.id'>{{ g.name }}</li>
      </ul>
      <button @click="changeFirstname">修改第一个名字</button>
   </div>
</template>
<script setup>
   defineOptions({
  name: 'Person234',      // 组件名
  inheritAttrs: false,    // 其他选项
  // ...
})
//导入 ref模块
   import {reactive} from 'vue'
   let car=reactive({brand:'奔驰',price:200})
   //数据
   let games=reactive([{id:1,name:'汪婉玉'},{id:2,name:'wyy是sb'},{id:3,name:'大傻逼'}])
   //方法
   function changePrice(){
      car.price+=10;
   }
   function changeFirstname(){
      games[0].name='wyy是超级sb '
   }
</script>
<style lang="scss" scoped>
            .person {
               background-color: skyblue;
               box-shadow: 0 0 10px;
               border-radius: 10px;
               padding: 20px;
            }
            button {
               margin-right: 10px;
            }
</style>

三.ref创建对象类型响应式数据

1.ref创建对象响应式数据

html 复制代码

<template>
      <div class="person">
      <h2>品牌：{{car.brand}}</h2>
      <h2>价格：{{car.price}}</h2>
      <button @click="changePrice">修改价格</button>
      <br>
      <h2>游戏列表：</h2>
      <ul>
         <li v-for="g in games":key='g.id'>{{ g.name }}</li>
      </ul>
      <button @click="changeFirstname">修改第一个名字</button>
   </div>
</template>
<script setup>
   defineOptions({
  name: 'Person234',      // 组件名
  inheritAttrs: false,    // 其他选项
  // ...
})
//导入 ref模块
   import {reactive, ref} from 'vue'
   let car=ref({brand:'奔驰',price:200})
   console.log(car);
   let car2=reactive({brand:"宝马",price:300})
   console.log(car2);
   //数据
   let games=ref([{id:1,name:'文雅楠是超级sb'},{id:2,name:'wyy是sb'},{id:3,name:'大傻逼'}])
   //方法
   function changePrice(){
      car.value.price+=10;
   }
   function changeFirstname(){
      games.value[0].name='no久久超聪明的'
   }
</script>
<style lang="scss" scoped>
            .person {
               background-color: skyblue;
               box-shadow: 0 0 10px;
               border-radius: 10px;
               padding: 20px;
            }
            button {
               margin-right: 10px;
            }
</style>

2.插件上的自动.value

3.ref创建对象类型响应式数据的本质

4.ref与reactive的区别

1.reactive重新分配一个对象，会失去响应式

这里如果想要替换一整辆车

2.ref不会出现该问题

因为ref修改的是car.value，修改的是同一个对象的value属性，而reactive替换的是整个对象

5.ref的注意点

四.torefs和toref

前言

当我们使用解构赋值的时候，js中变量一旦修改，就是在新的地址块开辟出一块新的内存，但是vue响应式追踪的是源对象的属性，所以页面不更新

1.使用torefs

torefs将两个属性都变成响应式对象了

html 复制代码

<template>
      <div class="person">
      <h2>品牌：{{car.brand}}</h2>
      <h2>价格：{{car.price}}</h2>
      <button @click="changebrand">修改品牌</button>
      <button @click="changePrice">修改价格</button>
   </div>
</template>
<script setup>
   defineOptions({
  name: 'Person234',      // 组件名
  inheritAttrs: false,    // 其他选项
  // ...
})
//导入 ref模块
   import {reactive, ref, toRefs} from 'vue'
   let car=reactive({brand:'奔驰',price:200})
   let {brand,price}=toRefs(car)
   console.log(toRefs(car));
   function changePrice(){
     price.value+=10;
   }
   function changebrand(){
       brand.value='宝马';
   }
</script>
<style lang="scss" scoped>
            .person {
               background-color: skyblue;
               box-shadow: 0 0 10px;
               border-radius: 10px;
               padding: 20px;
            }
            button {
               margin-right: 10px;
            }
</style>

2.toref

toref就是一个一个取出来，不像torefs一样全部取出来