Vue 复用方面

组合式函数hooks

“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。(类似与vue2的mixins)。

归根结底：函数内部定义数据，内部处理出数据处理的逻辑，返回数据

组合式函数常规例子

//文件：src/hooks/usemouse.ts
 
import { onMounted, ref } from 'vue';
 
export function useMouse(){
 	 // 接收鼠标位置
	const x=ref(0)
	const y=ref(0)
 
	function getMouse(e:MouseEvent){
  		x.value=e.pageX
  		y.value=e.pageY
	}
	onMounted(()=>{
  		window.addEventListener('mousemove',getMouse)  
	})
	
	return {x,y}
}

//文件：src/demo.vue
 
<template>
 <div> x:{{x}} , y:{{y}}</div>
</template>
 
<script lang="ts" setup>
import { useMouse } from '@/hooks/useMouse';
const {x,y}=useMouse()
</script>

组合式函数，可以封装异步操作

//文件：src/hooks/fetch.ts
 
import axios from 'axios'
import { ref } from 'vue'
 
// 封装一个请求的组合式函数
export default function useFetch(url:string,method:string){
 
  const res=ref()
  const loading=ref(true)
  const errMsg=ref()
 
  axios({
    url,
    method
  }).then((data)=>{
    console.log(data)
    loading.value=false
    res.value=data.data
  }).catch((err)=>{
    loading.value=false
    errMsg.value=err||"未知错误"
  })
 
  return {res,loading,errMsg}
}




let {res,loading,errMsg}=useFetch('http://127.0.0.1', 'get')

自定义指令（普通元素底层访问DOM的逻辑）

关于自定义指令生命周期(与组件的声明周期一致)

1. created：在自定义指令属性绑定前。
2. beforeMount：在挂载到DOM 之前。
3. mounted：挂载到DOM的时候执行，最常用。
4. beforeUpdate：在Dom更新前调用。
5. updated：更新后调用。
6. beforeUnmount：卸载前调用。
7. unmounted：卸载后调用。

自定义指令的四个参数：

1. el：所绑定的元素
2. binding：通过自定义指令传来的值
   2.1 value：标签上的值。
   2.2 oldValue :上一次的值。
   剩下几个能让元素更丰富 arg modifier
3. vnode： 绑定元素底层的Vnode。
4. preVnode：之前渲染中，指定的vnode。

<div  v-demo:foo.bar="myDemo"></div>
arg:"foo",
modifier:{
   bar:true
}

自定义指令可以绑定：常量、也可以绑定对象

举个例子。本质就是普通元素操作DOM

<div v-color="red"></div>
<div v-color="blue"></div>


app.directive("color",{
   mounted(el,binding){
      el.style.background = binding.value
   }
})

插件

能为Vue添加全局功能的工具代码( 拥有install方法的对象 )

插件的应用场景：

1. app.provide() // 将资源注入到整个应用
2. app.config.globalProperties // 添加一些全局的实例或者方法。
3. 添加第三方功能库。比如vue-router。

举个简单的例子

const myPlug = {
      install(app,options){
          // 配置应用
      }
}

app.use(myPlug,{
})

例子2

myi18n.js
export default {
     install(app,options){
          app.config.globalProperties.$translate = (key)=>{
                 return options.shit
          }
     }
}

<div> {{ $translate("shit") }} </div>





app.use(myi18n,{
      shit:"狗屎"
})

tips:

服务端渲染SSR：在服务器端生成HTML,返回给浏览器端。浏览器直接渲染。

CSR：在浏览器端，拼接各种js、css、html生成真正的HTML

所以服务器端渲染需要搭建后端服务器。
可参考：
SSR

KeepAlive：保活，多个组件间，动态切换的时候，缓存上下文。
基本使用：
1.包含、排除的某些组件使用keepalive。

2.使用keepalive，也有对应的钩子函数
actived deactived