组合API-reactive函数

定义响应式数据：

• reactive是一个函数，它可以定义一个复杂数据类型，成为响应式数据。

• 演示代码：

  <template>
    <div class="container">
      <div>{{obj.name}}</div>
      <div>{{obj.age}}</div>
      <button @click="updateName">修改数据</button>
    </div>
  </template>
  <script>
  import { reactive } from 'vue'
  export default {
    name: 'App',
    setup () {
      // 普通数据
      // const obj = {
      //   name: 'ls',
      //   age: 18
      // }
      const obj = reactive({
        name: 'ls',
        age: 18
      })
  
      // 修改名字
      const updateName = () => {
        console.log('updateName')
        obj.name = 'zs'
      }
  
      return { obj ,updateName}
    }
  }
  </script>
  
  

  总结： 通常是用来定义响应式对象数据

• 组合API-toRef函数

  目标：掌握使用toRef函数转换响应式对象中某个属性为单独响应式数据，并且值是关联的。

  定义响应式数据：

• toRef是函数，转换响应式对象中某个属性为单独响应式数据，并且值是关联的。

• 演示代码：

  <template>
    <div class="container">
      {{name}} <button @click="updateName">修改数据</button>
    </div>
  </template>
  <script>
  import { reactive, toRef } from 'vue'
  export default {
    name: 'App',
    setup () {
      // 1. 响应式数据对象
      const obj = reactive({
        name: 'ls',
        age: 10
      })
      console.log(obj)
      // 2. 模板中只需要使用name数据
      // 注意：从响应式数据对象中解构出的属性数据，不再是响应式数据
      // let { name } = obj 不能直接解构，出来的是一个普通数据
      const name = toRef(obj, 'name')
      // console.log(name)
      const updateName = () => {
        console.log('updateName')
        // toRef转换响应式数据包装成对象，value存放值的位置
        name.value = 'zs'
      }
  
      return {name, updateName}
    }
  }
  </script>
  <style scoped lang="less"></style>
  
  

  使用场景：有一个响应式对象数据，但是模版中只需要使用其中一项数据。

• 组合API-toRefs函数

• 目标：掌握使用toRefs函数定义转换响应式中所有属性为响应式数据，通常用于解构|展开reactive定义对象。

• 定义响应式数据：

• toRefs是函数，转换响应式对象中所有属性为单独响应式数据，对象成为普通对象，并且值是关联的

• 演示代码：

  <template>
    <div class="container">
      <div>{{name}}</div>
      <div>{{age}}</div>
      <button @click="updateName">修改数据</button>
    </div>
  </template>
  <script>
  import { reactive, toRef, toRefs } from 'vue'
  export default {
    name: 'App',
    setup () {
      // 1. 响应式数据对象
      const obj = reactive({
        name: 'ls',
        age: 10
      })
      console.log(obj)
      // 2. 解构或者展开响应式数据对象
      // const {name,age} = obj
      // console.log(name,age)
      // const obj2 = {...obj}
      // console.log(obj2)
      // 以上方式导致数据就不是响应式数据了
      const obj3 = toRefs(obj)
      console.log(obj3)
  
      const updateName = () => {
        // obj3.name.value = 'zs'
        obj.name = 'zs'
      }
  
      return {...obj3, updateName}
    }
  }
  </script>
  <style scoped lang="less"></style>
  
  

  使用场景：剥离响应式对象（解构|展开），想使用响应式对象中的多个或者所有属性做为响应式数据。

• 组合API-ref函数

• 目标：掌握使用ref函数定义响应式数据，一般用于简单类型数据

  定义响应式数据：

• ref函数，常用于简单数据类型定义为响应式数据
  • 再修改值，获取值的时候，需要.value
  • 在模板中使用ref申明的响应式数据，可以省略.value

• 演示代码：

  <template>
    <div class="container">
      <div>{{name}}</div>
      <div>{{age}}</div>
      <button @click="updateName">修改数据</button>
    </div>
  </template>
  <script>
  import { ref } from 'vue'
  export default {
    name: 'App',
    setup () {
      // 1. name数据
      const name = ref('ls')
      console.log(name)
      const updateName = () => {
        name.value = 'zs'
      }
      // 2. age数据
      const age = ref(10)
  
      // ref常用定义简单数据类型的响应式数据
      // 其实也可以定义复杂数据类型的响应式数据
      // 对于数据未之的情况下 ref 是最适用的
      // const data = ref(null)
      // setTimeout(()=>{
      //   data.value = res.data
      // },1000)
  
      return {name, age, updateName}
    }
  }
  </script>
  
  

  使用场景：

• 当你明确知道需要的是一个响应式数据 对象 那么就使用 reactive 即可
• 其他情况使用ref

知识运用案例

目标：利用所学知识完成组合API实例

基本步骤：

记录鼠标坐标

• 定义一个响应式数据对象，包含x和y属性。
• 在组件渲染完毕后，监听document的鼠标移动事件
• 指定move函数为事件对应方法，在函数中修改坐标
• 在setup返回数据，模版中使用

累加1功能

• 定义一个简单数据类型的响应式数据
• 定义一个修改数字的方法
• 在setup返回数据和函数，模板中使用

总结： 体会组合API的写法，尝试组织可读性高的代码。

落的代码：

<template>
  <div class="container">
    <div>坐标</div>
    <div>x: {{x}}</div>
    <div>y: {{y}}</div>
    <hr>
    <div>{{count}} <button @click="add">累加1</button></div>
  </div>
</template>
<script>
import { onMounted, onUnmounted, reactive , ref, toRefs} from 'vue'
const useMouse = () => {
    // 1. 记录鼠标坐标
    // 1.1 申明一个响应式数据，他是一个对象，包含x y
    const mouse = reactive({
      x: 0,
      y: 0
    })
    // 1.3 修改响应式数据
    const move = (e) => {
      mouse.x = e.pageX
      mouse.y = e.pageY
    }
    // 1.2 等dom渲染完毕。去监听事件
    onMounted(()=>{
      document.addEventListener('mousemove', move)
    })
    // 1.4 组件消耗，删除事件
    onUnmounted(()=>{
      document.removeEventListener('mousemove', move)
    })

    return mouse
}
export default {
  name: 'App',
  setup () {

    const mouse = useMouse()

    // 2. 数字累加
    const count = ref(0) 
    const add = () => {
      count.value ++
    }



    return { ...toRefs(mouse), count, add }
  }
}
</script>
<style scoped lang="less"></style>