VUE学习（二）VUE3代码组织方式

VUE学习（一）

继续学习VUE

一、  Composition API +

使用 template 标签放置模板、script 标签放置逻辑代码，并且用 setup 标记我们使用

  computed 的用法是单独引入使用。

---

注：filter方法：保留filter(true)的数据

filter() 方法用于对数组进行过滤。创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

注意： filter() 不会对空数组进行检测。

注意： filter() 不会改变原始数组。

---

通过这种方式，你可以实现对业务逻辑的复用。这样做的好处就是，如果有其他页面也需要用到这个功能，可以直接复用过去。

//mouse.js
import {ref, onMounted,onUnmounted} from 'vue'export function useMouse(){const x = ref(0)const y = ref(0)function update(e) {x.value = e.pageXy.value = e.pageY}onMounted(() => {window.addEventListener('mousemove', update)})onUnmounted(() => {window.removeEventListener('mousemove', update)})return { x, y }
}

import {useMouse} from '../utils/mouse'let {x,y} = useMouse()

因为 ref 和 computed 等功能都可以从 Vue 中全局引入，所以可以把组件进行任意颗粒度的拆分和组合，这样就大大提高了代码的可维护性和复用性。

使用 >

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！