Vvue3.0-自定义hooks&&computed

一、hooks理解

理解:3中的hooks就是函数的一种写法，就是将文件的一些单独功能的js代码进行抽离出来进行封装使用

作用:3.0借鉴了React的一种机制，用于函数组件中共享状态逻辑和副作用，从而实现代码的可复用性，还有就是在单文件组件功能太多可以用来进行一部分功能的抽离

注意:其实hooks和2.0的mixin有点类似，但是相对于mixin而言，hooks更清楚复用功能代码的来源，更清晰易懂

二、没用hooks普通的实现方法

{{item}}

import { ref computed } from "vue"

const message=ref("")

const list=ref(["aaa", "uuu", "csa"])

const listLast = computed(() =>

  list.value.filter(item => item.includes(message.value))

)

三、通过hooks实现

{{item}}

import { ref } from "vue"

import Usesearch from "./index.js"

const list=ref(["aaa", "uuu", "csa"])

index.js

import { ref computed} from "vue"

function Usesearch(list){

  const message=ref("")

  const listLast = computed(() =>

    list.value.filter(item => item.includes(message.value))

  )

  return { message,  listLast }

}

export default Usesearch

描述借鉴: https://zhuanlan.zhihu.com/p/661652964