所需工具：
JavaScript
聪明的大脑文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/12254.html
勤劳的双手文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/12254.html
文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/12254.html
注意：本站只提供教程，不提供任何成品+工具+软件链接，仅限用于学习和研究，禁止商业用途，未经允许禁止转载/分享等文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/12254.html
文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/12254.html
教程如下
vue3.x相对比vue2.x主要的应用区别在于setup的使用，这个也是vue3.x的特色，所有的功能都得通过vue钩子引入使用，因为 setup 语法糖环境是不支持 this 的，这种开发方式有点回到原始的感觉，针对小项目还好，但如果页面模块功能复杂，如果都放到一个文件里堆叠，不仅会造成可读性差，而且时间长了难以维护，所以这就需要进行按功能拆分了，方式同vue2.x一样，一个是按照组件拆分，一个是混入处理，还有就是通过vuex或api分离功能文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/12254.html
一、 组件
可以把一些新增/编辑、配置、日志及公共操作等写到组件里，然后引入使用，组件拆分是主要的减少页面代码量的解决方式，也是vue推荐的方式文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/12254.html
PS：组件拆分的方向，一是公共组件，在项目其他模块也能使用到，二是页面级私有组件文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/12254.html
二、混入
混入的场景主要是针对不需要模块且应用功能点过多，像这种可以通过混入的方式，把一些功能点拆分出来，引入使用，示例：文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/12254.html
mixins/instuctLog.ts：文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/12254.html
[php]
export default function() {
const a = 123
function foo() {
console.log('foo')
}
return {
a,
foo
}
}
[/php]
页面：
[php]
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20lang%3D%22ts%22%20setup%3E%0A%20%09import%20instructLogMixin%20from%20'.%2Fmixins%2FinstructLog'%0A%20%09const%20%7B%20a%2C%20foo%20%7D%20%3D%20instructLogMixin()%0A%20%09%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
[/php]
三、api
把页面模块中的一些api请求放到api目录里引入使用
四、vuex
按页面模块划分，把一些页面配置、枚举数据及数据改变多组件响应更新的逻辑放到vuex中处理
评论