VUE3 开发宝典--数据定义

最新推荐文章于 2024-09-28 17:32:53 发布

萧大侠jdeps

最新推荐文章于 2024-09-28 17:32:53 发布

阅读量482

点赞数 8

文章标签：前端 javascript 开发语言 vue.js

本文链接：https://blog.csdn.net/m0_37588079/article/details/136483039

版权

本文讨论了从Vue2开发习惯转向Vue3时，如何利用更结构化的思维管理页面数据，强调了vo（与后端交互数据）和state（页面控制数据）的区别，以及ref和reactive的合理使用。

摘要由CSDN通过智能技术生成

vue2的开发习惯，到vue3你要有点后端结构化思维，只需要注意下面几点：

1、页面的数变量定义，千万别想定义一个就加个 ref,或者reactive,那样你的代码会很乱。你只要定义2个（ref 控制除外）。

1）vo /**vo 与后端交互的数据 */

需要的在里面添加和扩展。

2)state /**state 页面控制的数据 */

需要的在里面添加和扩展

/**vo 与后端交互的数据 */
const vo = reactive({ queryParam: { totalRow: 0, pageNumber: 1,pageRow:20 }, version: ''})

/**state 页面控制的数据 */
const state = reactive({displayEdit:false,isLoading:false})

/** 对应表单的ref='refForm' */
const refForm=ref(null)