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
<template>
	<div>
		<h2 @click="showName">学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
	</div>
</template>

<script>
	//引入一个hunhe
    import {hunhe,hunhe2} from '../mixin'

	export default {
		name:'School',
		data() {
			return {
				name:'尚硅谷',
				address:'北京',
				x:666
			}
		},
         //
		 mixins:[hunhe,hunhe2],
	}
</script>

//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
<template>
	<h2>我是Test组件</h2>
	<h2>当前点击时鼠标的坐标为：x：{{point.x}}，y：{{point.y}}</h2>
</template>

<script>
	import usePoint from '../hooks/usePoint'
	export default {
		name:'Test',
		setup(){
			const point = usePoint()
			return {point}
		}
	}
</script>

//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 使用函数式的方式来定义逻辑和状态