vue3代码的组织形式

注：本文是大圣老师课程的笔记，原课程地址：06 | 新的代码组织方式：Composition API + 到底好在哪里？ (geekbang.org)

一，使用setup之后的改变

首先新建一个todoList.vue文件，然后写入如下代码：

<template><div><h1 @click="add">{{count}}</h1></div>
</template><script setup>
import { ref } from "vue";
let count = ref(1)
function add(){count.value++
}
</script><style>
h1 {color: red;
}
</style>

在 script setup语法中，我们使用引入的 ref 函数包裹数字，返回的 count 变量就是响应式的数据，使用 add 函数实现数字的修改。需要注意的是，对于 ref 返回的响应式数据，我们需要修改 .value 才能生效，而在 script setup 标签内定义的变量和函数，都可以在模板中直接使用。

也就是说，从上面代码看，相较于vue2来说，有这点改变：

1，不再有export default，然后data,methods，components等的写法了，而是直接从vue引入相关api如（ref）来实现代码。

紧接着，把这个组件引入到home页面使用：


<template><h1>这是首页</h1><TodoList />
</template><script setup>
import TodoList from '../components/TodoList.vue'
</script>

可以看到一个新的改变：

2,vue3的setup会自动注册组件，这样就减少了注册组件的一步。而可以直接使用。

完善代码后：

<template><div><div class="title"><input type="text" @keypress.enter="add" v-model="title" /><button v-if="active < all" @click="clear">清理</button></div><div class="content"><ul v-if="todoList.length"><li v-for="(item, index) in todoList" :key="index"><input type="checkbox" v-model="item.done" /><span :class="[item.done ? 'inactive' : 'active']">{{ item.content }}</span></li></ul><div v-else>暂无数据</div></div>全选 {{ active }} / {{ all }}</div>
</template><script setup>
import {ref,computed} from "vue"
//把这个useTodo解耦出来
function useTodos() {let title=ref("")let todoList=ref([{content:"五湖四海皆一望",done:false},{content:"千江有水千江月",done:true}])function add() {const obj = {content: title.value,done: false};todoList.value.push(obj);title.value = "";}function clear() {  todoList.value = todoList.value.filter((v) => !v.done)}let active=computed(()=>{return todoList.value.filter((v) => !v.done).length})let all = computed(() => todoList.value.length);let allDone = computed({ get: function () { return active.value === 0; }, set: function (value) {todoList.value.forEach((todo) => { todo.done = value; });},});return {title,todoList,add,clear,active,all,allDone}
}//其实你可以把组件内部的任何一段代码，从组件文件里抽离出一个独立的文件进行维护。
//再在这个组件中使用，于是这些东西就不依赖于this上下文了，这里再解构赋值出来
let { title, todoList, add, clear, active, all, allDone } = useTodos();import {useMouse} from '../utils/mouse'
let {x,y} = useMouse()</script><style scoped>
</style>

这里又可以看到两个新的改变：

3，computed不再在return default里面，而是通过vue导入来使用，具体的计算属性作为参数传入。
4，和这个表单相关的功能，我们用useTodos函数包裹起来，又因为是ref实现的，和本组件解耦了，于是可以在想要的地方维护。不一定要放在本组件中，只要需要时引入使用即可。

二，解耦功能js代码的示例：

例如一个获取鼠标实时位置的功能，可以在util中新建这个文件：

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.pageYconsole.log("测试鼠标",x.value,y.value)}onMounted(() => {window.addEventListener('mousemove', update)})onUnmounted(() => {window.removeEventListener('mousemove', update)})return { x, y }
}

然后只要在想要的地方引入使用就可以了：

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

三，css样式中也可以使用属性绑定js中的变量

<template><div class="todoBox"><div class="title"><input type="text" @keypress.enter="add" v-model="title" /><button v-if="active < all" @click="clear">清理</button></div><div class="content"><ul v-if="todoList.length"><li v-for="(item, index) in todoList" :key="index"><input type="checkbox" v-model="item.done" /><span :class="[item.done ? 'inactive' : 'active']">{{ item.content }}</span></li></ul><div v-else>暂无数据</div></div>全选 {{ active }} / {{ all }}</div>
</template><script setup>
import {ref,computed} from "vue"//把这个useTodo解耦出来
function useTodos() {let title=ref("")let todoList=ref([{content:"五湖四海皆一望",done:false},{content:"千江有水千江月",done:true}])function add() {const obj = {content: title.value,done: false};todoList.value.push(obj);title.value = "";}function clear() {  todoList.value = todoList.value.filter((v) => !v.done)}let active=computed(()=>{return todoList.value.filter((v) => !v.done).length})let all = computed(() => todoList.value.length);let allDone = computed({ get: function () { return active.value === 0; }, set: function (value) {todoList.value.forEach((todo) => { todo.done = value; });},});return {title,todoList,add,clear,active,all,allDone}
}//其实你可以把组件内部的任何一段代码，从组件文件里抽离出一个独立的文件进行维护。
//再在这个组件中使用，于是这些东西就不依赖于this上下文了，这里再解构赋值出来
let { title, todoList, add, clear, active, all, allDone } = useTodos();import {useMouse} from '../utils/mouse'
let {x,y} = useMouse()//定义这个color变量
let color=ref("red")
</script><style scoped>
.active{color:v-bind(color)
}
</style>

需要注意的是，color不能写在函数useToDo里面，因为函数外部读取不到，如果写里面，则还需要return，然后解构赋值才能使用。

实现的效果：

vue3代码的组织形式相关推荐

如何一键将 Vue2 代码转成 Vue3 代码
作者:阿里妈妈前端快爆 https://juejin.cn/post/6977259197566517284 Vue3 已经出来有一段时间了,很多朋友早已熟读了文档,写了好几个 Demo,馋 Comp ...
Vue2与Vue3代码检测
前言:Vue2代码检测工具使用的是[Vetur],Vue3需要转换为[Eslint],为了防止Vetur在Vue3项目中报错,同时需要开发Vue2项目,在此记录下相关配置 1.Vue3项目中添加[.v ...
Vscode快捷生成Vue3代码片段｜自定义代码块
目的是输入vue3回车,显示如下代码: 如何设置 : 点击vscode左下角的齿轮选择配置用户代码片段, 新建,命名为vue3(注:命名为XX之后输入XX回车就可以生成XX对应的模版), 创建内容如 ...
初学__Python——Python代码的组织形式
目录一.用缩进来分层二.代码注释的方式--两种三.语句的断行一.用缩进来分层 Python脚本的结构非常清晰,在Python中,使用代码缩进来表示分层. 代码缩进一般用于函数定义.类的定义以及 ...
vue3代码检查以及格式化配置
一.husky + lint-staged 1.husky配置git hooks,执行git add .然后git commit的时候,就会触发lint-staged,通过eslint来执行本次提交所 ...
Vue3通透教程【三】Vue3代码初体验找不同
文章目录
闲扯Maven项目代码组织形式
文章目录 1. 代码组织形式 1.1 平铺 1.2 父子结构 2. 打包问题 2.1 继承 2.2 聚合 3. 小结因为最近有小伙伴问到了,所以我想和大家随便扯扯 Maven 项目中代码的组织形式这 ...
阿里发布新工具，直接帮你改代码！网友：工作量又减轻了～
欢迎关注方志朋的博客,回复"666"获面试宝典来自:掘金,作者:阿里妈妈前端快爆链接:https://juejin.cn/post/6977259197566517284 Vu ...
[JavaScript]只需一行代码,轻松搞定快捷留言-V2升级版
前天熬了大半宿发了一篇[一行代码轻松搞定快捷留言功能],同时发布了V1.0beta版的快捷留言功能和源代码,之所以是beta版,就是当时感觉虽然基本功能有了,但是还不够完善,特性也不一定合理,今天不知 ...
vue2 怎么用vite_Vue2和Vue3开发组件有什么区别
我们一直都有关注和阅读很多关于Vue3的新特性和功能即将到来.但是我们没有一个具体的概念在开发中会有如何的改变和不一样的体验.还有一些童鞋已经开始又慌又抓狂了 -- "又要开始学新的写法了 ...

vue3代码的组织形式

一，使用setup之后的改变

二，解耦功能js代码的示例：

三，css样式中也可以使用属性绑定js中的变量

vue3代码的组织形式相关推荐

最新文章

热门文章