computed

计算属性有什么作用

在前面我们讲解过计算属性computed：computed 被推荐用来描述依赖响应式状态的复杂逻辑。
当我们的某些变量的数据是依赖其他响应式状态数据时，我们可以使用计算属性来处理。

换句话说，计算属性会自动追踪响应式依赖，当依赖的状态发生变化，计算属性就会自动更新，并把更新传递出来。

最典型的就是和 vuex 一起使用。
vuex 的数据是响应式的，并且里面的 state 的数据在不断更新。为了让组件能拿到最新的数据，就需要使用 computed 函数跟踪 state 的变化。

computed 里面有副作用函数 effect，当依赖的响应式数据更新，副作用函数就会执行一次拿到最新的数据。这个副作用函数名字怪怪的，其实就是收集依赖的包裹函数。

基本使用

• 在前面的Options API中，我们是使用 computed 选项来完成的；
• 在Composition API中，我们可以在 setup 函数中使用 **computed** 方法来编写一个计算属性；

如何使用computed呢？我们知道 options api 中 computed( ) 函数其实是对象的 get 语法糖，所以可以写成函数形式，也可以写成完整的对象形式。composition api 中也一样，也有类似的两种方式。

• 方式一：接收一个 getter 函数，并为 getter 函数返回的值，返回一个不变的 ref 对象；
• 方式二：接收一个具有 get 和 set 的对象，返回一个可变的（可读写）ref 对象； ```html

hhh

<a name="dVocN"></a>
## 侦听多个数据源
<a name="P3alz"></a>
### 对象形式
多个源就是将单个源放到一个数组里，然后再遍历数组进行单个数据源监听，本质和单个源差不多。数据源是个数组，newValue 和 oldValue 也是数组，里面数组元素对应着数据源的值。所以数组元素会很杂。<br />比如数据源有 reactive 对象和 ref 对象，则值的数组中就有 Proxy 对象和普通的值
```html
<template>
  <div>
    <h2 ref="title">{{info.name}}</h2>
    <button @click="changeData">修改数据</button>
  </div>
</template>

<script>
  import { ref, reactive, watch } from 'vue';

  export default {
    setup() {
      const info = reactive({name: "why", age: 18});
      const name = ref("why");

      watch([info, name], (newValue, oldValue) => {
        console.log("newValue:", newValue, "oldValue:", oldValue);
        // newValue: [Proxy{kobe}, hhh] oldValue: [Proxy{kobe}, why]
      })

      const changeData = () => {
        info.name = "kobe";
        name.value = 'hhh'
      }

      return {
        changeData,
        info
      }
    }
  }
</script>

侦听响应式对象 - getter 函数形式

如果我们希望侦听一个数组或者对象，那么可以使用一个getter函数，并对可响应对象进行解构：就和 reactive 对象解构将 newValue 和 oldValue 变普通值一样。

setup() {
  const objproxy = reactive(['a', 'b', 'c'])

  // 注意这里解构不能带上花括号，() => {[...objproxy]}，要不然监听函数不执行
  watch( () => [...objproxy], (newValue, oldValue) => {
    console.log("newValue:", newValue, "oldValue:", oldValue);
    // newValue: (3) ['a', 'h', 'c'] oldValue: (3) ['a', 'b', 'c']
  })

  const changeData = () => {
    objproxy[1] = 'h'
  }

  return {
    changeData,
    info
  }
}

watch 的选项

对深层的对象或数组侦听，那么依然可以设置 deep 为 true：也可以传入 immediate 立即执行；

• 在 watch 函数第三个参数中进行配置 deep 和 immediate，并且默认就是深层监听

  setup() {
  const obj = reactive({
    name: 'zs', 
    friends: { name: 'ls', age: 18}
  })
  
  watch( obj, (newValue, oldValue) => {
    console.log('监听到了变化');
  }, {
    // deep: true,
     immediate: true
  })
  
  const changeData = () => {
    obj.friends.name = 'w5'
  }
  
  return {
    changeData
  }
  }
  

  周期函数

  我们前面说过 setup 可以用来替代 data 、 methods 、 computed 、watch 等等这些选项，也可以替代 生命周
  期钩子。
  可以使用直接导入的 onX 函数注册生命周期钩子；
  composition api 中没有与之对应的 created 和 beforeCreated 钩子，因为 setup 本身执行就是在 created 之前，所以在组件创建之前的代码都可以直接写在 setup 中。
  另外 composition api 中可以定义多个相同时期的钩子。
  ```html

<a name="TQuyy"></a>
# provide \ inject
对于非父子间传值，Composition API也可以替代之前的 Provide 和 Inject 的选项。<br />我们可以通过 provide 方法来提供数据：在 后代组件 中通过 inject 方法来注入需要的属性和对应的值：<br />可以通过 provide 方法来定义每个 Property；<br />provide 可以传入两个参数：

- name：提供的属性名称；
- value：提供的属性值；

inject 也可以传入两个参数，接收的属性和若没有接收到属性下的默认值

传递的数据一般需要进行响应式，所以要进行响应式处理。并且数据传递都要遵循单向数据流原则，使用方只管使用数据，不应该修改数据。所以 provide 时不仅要响应式处理，还要进行只读处理。
```html
<script>
  import { readonly, ref } from '@vue/reactivity'
  import { provide } from '@vue/runtime-core'
  import about from './components/about.vue'
  export default {
    components: { about },
    setup() {
      // 响应式处理数据
      const message = ref('hhh')
      // 单向数据流处理
      provide('message', readonly(message)) 
    }
  }
</script>
---------about.vue--------
<script>
  import { inject } from '@vue/runtime-core'
  export default {
    setup() {
      const msg = inject('message')
      return { msg }
    }
  }
</script>

hook

composition api 解决了 options api 的代码分散并且和各个 option 耦合度极高的问题。现在代码都写在 setup 中，但我们还能进一步的解耦。比如将 setup 中一个个独立的功能抽离出来封装成一个模块。
这个模块称为 hook，一般以 use 开头进行命名。hook 意为钩子，是 react 中的概念，但被 vue 社区广泛借用。

例如：一个计数器案例

<template>
  <div>
    <h2> {{ data }}</h2>
    <button @click="increase">+1</button>
    <button @click="reduce">-1</button>
  </div>
</template>

<script>
import { ref } from '@vue/reactivity'
  export default {
    setup() {
      // setup 中实现计数器
      const data = ref(0)
      const increase = () => { data.value++ }
      const reduce = () => { data.value-- }

      return { data, increase, reduce}
    }
  }
</script>

import { ref } from '@vue/reactivity'

export function useCounter() {
  // 将计数器实现从 setup 中抽离
  const data = ref(0)
  const increase = () => { data.value++ }
  const reduce = () => { data.value-- }

  return { data, increase, reduce}
}

<template>
  <div>
    <h2> {{ data }}</h2>
    <button @click="increase">+1</button>
    <button @click="reduce">-1</button>
  </div>
</template>

<script>
  // 导入 hook
  import { useCounter } from './hooks/useCounter.js'
  export default {
    setup() {
      // 解构获取 hook 中的导出响应式数据和方法，并且可以直接使用
      const {data, increase, reduce } = useCounter()

      return {data, increase, reduce}
      // 也可以利用展开运算符直接将 hook 中的导入在 setup 中导出，但可读性太差不建议使用
      // return { ...useCounter() } 
    }
  }
</script>

一些其他 hook