Vue3中的响应式api

一、setup文件的认识

 　　特点1：script 中间的内容就是一个对象

　　特点2：script 在第一层 定义的方法 或者 变量 => 就是这个对象 属性  => 顶层的绑定回被暴露给模板（模板可以直接使用这个变量）

　　特点3：setup 默认执行生命周期beforeCreate created

　　注意：这个对象 => 就是当前这个组件实例

二、什么是响应式api

　　处理 数据 => 我们把页面写的数据，需要动态改变的数据 => 叫做  响应式数据 => 数据改变视图中使用了这个数据，这个数据回对应的       响应式数据底层实现 => vue3 => Proxy

　　可以把数据变成响应式api 的方法叫做响应式 api

　　什么是响应式数据：就是数据改变 视图对应更新

 

三、在vue3 中有哪些常用的响应式API？

响应式核心：

1、ref()

　　作用：将一个基本数据类型的数据变为响应式

　　语法：let 变量=ref(处理的数据)

<template>
  <div>
    <h2>响应式api</h2>
    <h2>{{age}}</h2>
    <button @click="addAge">change</button>
  </div>
</template>

<script setup>
  import {ref} from 'vue';
  // ref 处理的数据 
  // 1 基本数据类型 => 通过vue2 响应式原理来实现Object.defineProperty()
  // 2 处理的复杂的数据类型 => reactive()这个响应式api

  let age=ref(29);  // 通过ref 处理的数据 => 变成响应式
  let data=ref({ages:50});
  console.log(data,"data")
  
  const addAge=()=>{
    age.value+=1;
    console.log(age);
  }
</script>

<style>

</style>

 

2、reactive()

　　作用：将复杂的数据类型变成响应式数据

　　语法：let data=reactive({处理的数据})

　　特点：1. 就是proxy代理可以将对象中第一层的属性变成响应式，不用递归，提供性能优化。2. 就是 proxy 代理的数据时对象，这个对象中有深层次，它会实现懒代理（就是用户只有在使用了这个数据，才会将这个数据变为响应式数据）

<template>
  <div>
    <h2>响应式api</h2>
    
   <h2>{{objP.name}}的年龄{{objP.age}}</h2>
   
    <button @click="changeName">changeName</button>
    <button @click="changeLike">changeLike</button>
  </div>
  
</template>

<script setup>
  import {reactive} from 'vue';
  
  // 作用将复杂的数据类型变成响应式数据
  let objP=reactive({
    name:"小明",
    age:8,
    like:{eat:'🍎',play:['⚽']}
  })

    // reactive()代理数据类型 对象 特点
      //  1 就是 proxy 代理可以将对象中第一层的属性变成响应式，不用递归，提供性能优化
      //  2 就是 proxy 代理 数据是对象，这个对象中属性有深层次，他会实现懒代理
      // 就是用户只有在使用了这个数据，才会将这个数据变为 响应式数据
      console.log(objP);

      const changeName=()=>{
        objP.name="lisa"
        objP.age+=1;
      }

      const changeLike=()=>{
        objP.like.play=['🌏'];
        console.log(objP.like); // 使用后深层次数据也变为响应式数据
      }

      
</script>

<style>

</style>

 3、readonly()

　　作用：处理的数据，只能读取不能修改，父组件给子组件数据

　　语法：let 数据 =readonly(默认数据)

<template>
  <div>
    <h2>readonly</h2>
<!-- 作用：处理的数据，只能读取不能修改，父组件给子组件数据 
      语法：  let 数据  =readonly(默认数据)
-->
    <h2>{{ obj.name }}</h2>
    <button @click="change">修改数据</button>
  </div>
  
</template>

<script setup>
  import {readonly} from 'vue';
  
  let obj=readonly({name:'lisa'});  // 通过proxy代理

  console.log(obj)

  const change=()=>{
    obj.name="cici";    // 只读的，无法修改
  }
      
</script>

<style>

</style>

4、watchEffect()

　　作用： 页面更新 就会触发watchEffect 处理函数

　　语法：watchEffect(( )=>{　})

　　特点：1 第一次默认执行 处理函数； 2 watchEffect 监听的数据，需要我们写到他的处理函数中，并且 可以监听多个； 3 watchEffect 监听的数据的改变，处理函数就会触发=》获取到最新的数据=》没有旧 的数据

<template>
    <div>
        <h2>watchEffect 副作用</h2>
        <!-- 
            作用： =》 页面更新 就会触发watchEffect 处理函数

            语法：watchEffect(()=>{

            })
         -->
         <h2>{{ name }}</h2>
         <h2>{{ age }}</h2>
         <button @click="addAge">年龄+1</button>
         <button @click="changeName">修改name</button>
    </div>
</template>

<script setup>
    
    import {ref,watchEffect} from 'vue';

    let age=ref(20);
    let name=ref("lisa");

    // watchEffect 特点
    // 1 第一次执行 处理函数
    // 2 watchEffect 监听的数据， 需要我们写到它的处理函数中，并且可以监听多个
    // 3 watchEffect 监听数据的改变，获取到新的数据，没有旧数据

    // watchEffect(()=>{
    //     console.log("页面更新了");
    //     console.log(age.value);// 监听 age 值，只要这个值发生改变，这个watchEffect 他的处理函数就是重新执行，获取到的最新的数据
    //     console.log(name.value);
    // })


    // 在watchEffect中做数据处理
    watchEffect(()=>{
        console.log('页面更新');
      if(age.value>30){
        console.log('200');
      }
    })
    const addAge = ()=>{
        age.value =   age.value +1
     }
     const changeName =()=>{
        name.value='小明'
     }
</script>

<style>
</style>

 5、watch()

　　作用：侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数。

　　语法：watch(数据源，回调函数，配置项)　　

　　　　数据源：监听的数据源、

　　　　回调函数：(newVal,oldVal)=>{console.log(newVal,oldVal); // 数据改变会触发次函数的执行 }、

　　　　配置项：immediate:true; // 第一次默认监听数据、deep:true; // 监听深度数据

　　总结watch()：1. 首次加载默认不监听，2. 可以监听多个数据源 ，3. 可以处理异步问题

　　watch() 和 watchEffect() 的区别：

　　相同点：1. 都是侦听一个或多个响应式数据源，2. 可以处理异步问题

　　不同点：watchEffect 默认立即监听数据，只能获取到新的数据；而watch 第一次默认不见听数据，可以获取到新旧数据

<template>
  <div>
    <h2>watch</h2>
    <!-- <h2>{{ name }}</h2> -->
    <h2>{{ age }}</h2>
    <button @click="changeAge">年龄+1</button>
    <!-- <button @click="changeName">修改name</button> -->

    <h2>{{ state.name }}</h2>
    <button @click="changeState">修改 reactive 数据类型</button>
  </div>
</template>

<script setup>

import { ref, watch, reactive } from 'vue';
// watch 作用 => 时刻监听数据的改变（响应式数据）
// 语法：watch(数据源，处理函数，配置项)
// 配置项：immediate:true; 首次加载默认监听
// deep:true;监听深度的数据


// // 案例一： 监听数据 ref 类型
// let age=ref(20);
// let name=ref("lisa");

// watch(age,(newVal,oldVal)=>{
//   console.log(newVal,oldVal); // 数据改变会触发次函数的执行
// })
// const changeAge = ()=>{
//     age.value =age.value +1;
//  }
//  const changeName =()=>{
//     name.value='小明'
//  }


//  案例2：通过watch 监听某个数据 首次监听到
//添加配置项  immediate:true =》首次监听到
// 监听的深度的数据 =》 deep:true
//       let state = reactive({
//         name:'张三',
//         age:100,
//         like:{eat:'吃'}
//      })
//    watch( ()=>state.like,(newVal,oldVal)=>{
//         console.log(newVal,oldVal);
//       },{
//         immediate:true,
//         deep:true
//       })
//      const changeState = ()=>{
//          state.like.eat='小红'
//      }
//      const changeAge = ()=>{
//         age.value +=1
//      }


// 案例3：watch =>监听多个数据

let age = ref(29)

let state = reactive({
  name: '张三',
  age: 100
})

watch([age, () => state.name], ([newA, newN], [oldA, oldN]) => {
  console.log(newA, oldA);
  console.log(newN, oldN);
})
const changeState = () => {
  state.name = '小红'
}
const changeAge = () => {
  age.value += 1
}

//总结 watch

//作用监听 响应式数据

// 特点
// 1默认 第一次不执行，如果需要理解执行添配置项
// 2监听多个数据源
// 3 处理异步问题

//watchEffect 和watch 相同的点和不同点

// 相同点
// 都可以时时刻刻监听某个数据改变，处理异步问题，都可以监听多个数据

//不同点
// watchEffect 默认立即执行 ，watchEffect 只能获取到最新的数据
// watch 默认不立即执行，watch 获取 到新旧数据

</script>

<style>

</style>

 6、computed() 计算属性

　　作用：后端给的数据不是自己想要的，通过计算属性，把自己数据处理成自己想要的

　　写法：1. 默认：只用get方法，语法：let 想要的数据=computed({return 计算后的数据 })；

　　　　　2. get 和set 方式：let 想要的数据=computed({get:()=>{return}, set:(value)=>{}})

　　特点：1. 可以时时刻刻监听数据，根据这个数据，得到我们需要的数据；2. 只能写同步方法

<template>
  <div>
    <h2>计算属性computed</h2>
    <!-- 
      作用：计算属性
      1 什么时候使用这个计算属性
          后端给的数据，不是自己想要的，通过计算属性，把这个数据处理成自己想要的
      2 语法： let 需要的数据=computed(()=>{})
     -->
     <h2>计算出实际薪资{{total}}</h2>
  </div>
</template>

<script setup>
  import {ref,computed} from 'vue';

  // 后端给的一个数据
  let salary=ref(0);
  const getData=()=>{
    setTimeout(()=>{
      // 后端给的数据 没有实际的数据
      salary.value=2000;
    },500);
  }
  getData();

  // // 计算属性的用法： 1 get 属性
  // let total=computed(()=>{
  //   // 处理逻辑 +200
  //   return salary.value+200;
  // })


  // 用法2: 具有set 和 get 属性

  // 1 什么时候触发get 方法 => 获取这个计算属性的放回置的时候 触发 get方法
  // 2 什么时候触发set 方法 => 修改值得时候触发set方法
  let total=computed({
    get:()=>{
      console.log("获取的时候触发");
      return salary.value+1000;
    },
    set:(value)=>{// 第一个参数：设置的值
      console.log("设置值的时候触发",value);  // 设置total的时候触发这个方法
      // 1 通过计算属性get方法 计算出我们需要的数据
      // 2 当这个值为 某个值的时候，有需要进行逻辑处理，得到一个新的计算属性的值
      setTimeout(()=>{
        if(value>=3200){
          salary.value=salary.value-200
        }
      },1000)
    }
  })

  console.log(total);
    total.value=6000; 
    // 计算属性的特点：
    // 1 计算属性不能处理异步数据
    // 2 时时刻刻观察 我们需要处理的动态数据
</script>

<style>

</style>

 

 

响应式：工具

1、toRefs()

　　本质：就是将reactive代理对象数据中的属性，属性值 变为 ref处理的数据

　　语法：toRefs(reactive响应式数据)

<template>
  <div>
    <h2>{{name}}</h2>
    <h2>{{age}}</h2>
  
    <button @click="addAge">addAge</button>
  </div>
  
</template>

<script setup>
  import {reactive,toRefs} from 'vue';
  
//   let {age,name}=reactive({
//     name:"小明",
//     age:8,
//     like:{eat:'🍎',play:['⚽']}
//   })
// // 直接结构 reactive 响应式数据 => 他的数据不再是响应式数据
//    const addAge=()=>{
//       age=age+1;    // 无法修改
//   }

let objP=reactive({
    name:"小明",
    age:8,
    like:{eat:'🍎',play:['⚽']}
  })
//   我想在视图中直接使用 name,age 和ref 一样
// 本质就是将reactive 代理，对象数据中的属性，值变成ref处理的数据
// 使用vue3中的响应式api => toRefs

// 语法： toRefs(reactive响应式数据)
let {age,name}=toRefs(objP);

const addAge=()=>{
      age.value+=1;    // 无法修改
  }
</script>

<style>

</style>

2、toRef()

　　作用：将reactive代理的数据（这个数据必须是一个对象）中的某个属性变为ref代理

　　语法：let ref值=toRef(目标对象，属性)

　　toRefs() 和 toRef() 的区别：toRefs()是把对像中的所有的属性，变成ref进行代理; 　　toRef()是把reactive中的某个属性，变成ref 进行代理

<template>
    <div>
        <h2>toRef</h2>
        <!-- 
            作用：就是将reactive代理的数据，这个数据必须是一个对象，中的某个属性变成ref 代理
            语法：let ref值=toRef(目标对象，属性)
         -->
         <h2>{{stateAge}}</h2>
    </div>
</template>

<script setup>
    
    import {toRef,reactive} from 'vue'

    let state=reactive({
        age:20,
        name:"lisa",
    })

    let stateAge=toRef(state,'age');
    console.log(stateAge);
</script>

<style>

</style>

 

 3、isRef()、isReactive()、isReadonly()、isProxy()

　　作用：判断这个变量是不是被这个isxxx这个方法处理了，返回值为布尔值，是就为true，不是就为false

<template>
    <div>
         <!--   响应式api工具
            isRef => 
            isReactive
            isReadonly
            isxxx => 判断 这个变量是不是被这个isxxx这个方法处理了，是true，不是false
            
          -->
    </div>
</template>

<script setup>
    
    import {ref,isRef,isReadonly} from 'vue'

    let money = ref(1000)   // ref 代理了

    let obj={name:"lisa"}
    console.log(isRef(money));    // 判断这个变量是不是ref代理的    // false
    console.log(isReadonly(obj));   // false
</script>

<style>

</style>

 

响应式：进阶

1、shollowRef()、shallowReactive()、shallowReadonly()

　　作用：第一层有这个方法的 功能，只作用于第一层

　　shollowRef() 第一层的数据是响应式、shallowReactive()第一层的数据是响应式、shallowReadonly() 第一层的数据是只读

<template>
    <div>
        <h2>shallowReactive</h2>
        <!-- 
            shallowReactive => 第一层的数据是响应式
            shallowRef => 第一层的数据是响应式
            shallowReadonly => 第一层的数据是只读的
            作用：浅的，只作用于数据的第一层
         -->
         <h2>{{state.name}}</h2>
         <h2>{{state.like.eat}}</h2>
         <button @click="change">改变state
        第一层中的数据</button>
        <button @click="changeTwo">改变state
        第二层中的数据</button>
        <button @click="changeAll">同时改变state
        第一层和第二层中的数据</button>

        <h3>{{ objs.name }}</h3>
        <h3>{{  objs.like.eat }}</h3>
        <button @click="changeR">改变state
        第二层中的数据</button>
    </div>
</template>

<script setup>
    
    import {shallowReactive,reactive,toRefs,shallowReadonly} from 'vue';

    let state=shallowReactive({
        age:20,
        name:"lisa",
        like:{eat:"🍎"}
    })

    const change=()=>{
        state.name="andy";
        
    }
    const changeTwo=()=>{
        state.like.eat= "🍍";   // 单独是无法修改的，因为它不是第一层数据，不是响应式的数据
    }
    const changeAll=()=>{
        state.name="andy";
        state.like.eat= "🍍";   // 添加第一层数据，同时改变，第二层也变成了响应式的数据
    }

       //readonly
       let objs = shallowReadonly({
           name:'小明',
           like:{eat:'🍉'}
       })

       const changeR =()=>{
        // objs.name="cici";//无法修改，因为这里的第一层是只读的
        objs.like.eat='🍇'; // 这里是可以改变的，因为shallowReadonly只作用于第一层，但是它不是响应式的，无法同步视图更新
        console.log(objs.like.eat); //  🍇
       }


       // shallowRef() 同理
  
</script>

<style>

</style>