4月21日晚,Vue
作者尤雨溪在哔哩哔哩直播分享了Vue.js 3.0 Beta
最新进展,也建议前端开发者们不要在大项目中使用,小项目是可以的,怀着激动心情,体验一下3.0
版本,目前并未全局安装vue-next
git clone https://github.com/vuejs/vue-next-webpack-preview.git 复制代码
yarn install 复制代码
demo
运行成功示例,用过react hooks
的应该不陌生,数据初始化很类似useState
,vue3.0
的可以把逻辑相同的地方抽离出来,方便代码量大了后维护
test.js
文件import { ref, onMounted, onUnmounted } from 'vue' // 按需引入使用模块 export function useMousePosition() { const x = ref(0) const y = ref(0) // 初始化下x,y function update(e) { x.value = e.pageX y.value = e.pageY } // 绑定监听鼠标移动事件 onMounted(() => { window.addEventListener('mousemove', update) }) onUnmounted(() => { window.removeEventListener('mousemove', update) }) return { x, y } } 复制代码
<template> <img src="./logo.png"> <h2>X:{{x}}</h2> <h2>y:{{y}}</h2> </template> <script> import { useMousePosition } from './test' export default { setup() { const { x, y } = useMousePosition() return { x, y } } } </script> 复制代码