vue2中的mixins和vue3中的hooks

一、vue2中的mixins

mixins 是通过对象的方式进行组合和共享代码

hooks 使用函数式的方式来定义逻辑和状态

mixins的使用

1.在src下创建一个mixin.js文件

2.将vue文件的script部分抽离出来写入mixin.js文件下

3.在原来的vue组件中引入mixin

   import {hunhe,hunhe2} from '../mixin'

4

  mixins:[hunhe,hunhe2]

//Student.vue

//mixin.js
export const hunhe = {
	methods: {
		showName(){
			alert(this.name)
		}
	},
	mounted() {
		console.log('你好啊！')
	},
}




export const hunhe2 = {
	data() {
		return {
			x:100,
			y:200
		}
	},
}

二、vue3中的hooks

hooks的使用

1在src下创建一个hooks文件夹。创建一个js文件（一般是使用use开头的文件名）

2将公共函数部分抽离出来实现代码复用

3在原来的vue组件中引入

  import usePoint from '../hooks/usePoint'

4使用const point = usePoint()调用引入的hook函数

//Test.vue

//usePoint.js
import {reactive,onMounted,onBeforeUnmount} from 'vue'
export default function (){
	//实现鼠标“打点”相关的数据
	let point = reactive({
		x:0,
		y:0
	})

	//实现鼠标“打点”相关的方法
	function savePoint(event){
		point.x = event.pageX
		point.y = event.pageY
		console.log(event.pageX,event.pageY)
	}

	//实现鼠标“打点”相关的生命周期钩子
	onMounted(()=>{
		window.addEventListener('click',savePoint)
	})

	onBeforeUnmount(()=>{
		window.removeEventListener('click',savePoint)
	})

	return point
}

// Hooks 使用函数式的方式来定义逻辑和状态