Vue3.0-自定义hooks&&computed

一、hooks理解

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

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

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

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

<input v-model="message"  />
<div v-for="item in listLast" :key="item">
{{item}}
</div>

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实现

<input v-model="message"  />
<div v-for="item in listLast" :key="item">
{{item}}
</div>

import { ref } from "vue"
import Usesearch from "./index.js"

const { message, listLast } = Usesearch()
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

watch详细讲解：Vue3.0-watch侦测器-CSDN博客