vue3获取数据的注意点

Posted 南风晚来晚相识

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue3获取数据的注意点相关的知识,希望对你有一定的参考价值。

场景描述

在使用vue3的时候。我们很多人喜欢一个页面分成几个几个部分来写
这样做的目的是为了区分。
做的彼此的逻辑互相独立,互不干扰
但是有的时候,我们可能会去获取不属于自己区域的函数
这个时候我们有集中方式去获取函数呢??

传参的方式

<script>
import { reactive } from \'@vue/reactivity\'
export default {
  setup () {
    let { dataA }=oneFun(dataB);
    let { dataB }=twoFun(dataA);
    return {dataA,dataB }
  }
}

// 这个函数包含自己的业务以及自己的数据。
function oneFun(dataB){
  let dataA=reactive({
     tbaleData:[],
     index:1,
  })
  console.log(\'通过传递参数的形似获取twoFun中的数据\',dataB );
  return {dataA}
}

// 这个函数包含自己的业务以及自己的数据。
function twoFun(dataA){
  let dataB=reactive({
     list:[ {name:\'你是我的荣耀\'}, {name:\'司藤\'}, ]
  })
  console.log(\'通过传递参数的形似获取oneFun中的数据\',dataA );
  return {dataB}
}
</script>

为什么是undefined呢???

为什么我获取dataB中的数据是undefined呢?why????
因为js执行是有顺序行的。
问题就出现这下面两行代码上
let { dataA }=oneFun(dataB);
let { dataB }=twoFun(dataA);
当我们执行 oneFun函数的时候;
这个时候dataB 并没有解构结构出来。
所以是undefined了。

如何处理undefined

那就是将dataA中的数据分离出去。
这样就可以解决了

<script>
import { reactive } from \'@vue/reactivity\'
export default {
  setup () {
    // 将dataA抽离出来了
    let dataA=reactive({
      tbaleData:[],
      index:1,
    })
    // dataB中的数据仍然在twoFun函数体中
    let { dataB }=twoFun(dataA);
    oneFun(dataB); //调用oneFun函数
    return {dataA,dataB }
  }
}

// 这个函数包处理业务
function oneFun(dataB){
  console.log(\'通过传递参数的形似获取twoFun中的数据\',dataB );
}

// 这个函数包含自己的业务以及自己的数据。
function twoFun(dataA){
  let dataB=reactive({
     list:[ {name:\'你是我的荣耀\'}, {name:\'司藤\'}, ]
  })
  console.log(\'通过传递参数的形似获取oneFun中的数据\',dataA );
  return {dataB}
}
</script>

有没有更好的写法呢?

如果在A函数中需要dataB中的数据,B函数需要dataA中的数据
跟人建议不要这样套娃操作
最好的是将dataB和dataA放在同一个reactive中就行了。
我非常推荐这样的做法。
 setup () {
    let dataA=reactive({
      dataA:[],
      dataB:1,
    })
  }
这样的好处需要数据是处理更加的方便了。

上面我说到在A函数中需要dataB中的数据,B函数需要dataA中的数据
这样互相调用其中一个肯定是undefined
也不要出现 A函数去调用B函数,B函数中去调用A函数。
这样是非常糟糕的哈。

通过函数中调用

<script>
import { reactive } from \'@vue/reactivity\'
export default {
  setup () {
    let { getdataA }=oneFun();
    let { getdataB }=twoFun();
    return {getdataA,getdataB }
  }
}

function oneFun(){
  let dataA=reactive({
    tbaleData:[],
    index:1,
  })
  // 通过函数的获取获取形零国外一个函数中的值
  console.log("==>", twoFun().getdataB() ); 
}

function twoFun(){
    let dataB=reactive({
      list:[ {name:\'你是我的荣耀\'}, {name:\'司藤\'}, ]
    })
    
    //调用该函数可以获取该函数体内部的值
    function getdataB(){
      return dataB
    } 
    return { getdataB }
}
</script>

有交叉的逻辑如何处理

最近在使用vue3的项目逻辑中。
发现一个很有意思的现象?
表格中的编辑这个逻辑有交叉【点击编辑打开一个对话框】。
它既可以属于表格中的逻辑,也可以属于后面对话框中的逻辑。
经过我反复的思考,我决定把它划分在对话框这个逻辑区域。
以为点击表格中的的编辑虽然是在表格中发生的,但是最后对话框中的保存按钮。
会发送一个请求。打开弹窗只是一个开始。最后结束的是弹窗中的保存按钮
所以,最后一个是在那个区域发生的,就应该属于哪一个区域
作者:明月人倚楼
出处:https://www.cnblogs.com/IwishIcould/

想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!

万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!

想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

支付宝
微信
本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
如果文中有什么错误,欢迎指出。以免更多的人被误导。

以上是关于vue3获取数据的注意点的主要内容,如果未能解决你的问题,请参考以下文章

vue3.0手写省市区地区联动 详细

如何调试Vue3源码?

vue3.2 基础及常用方法

vue3中的fragment(片段)组件

typeScript声明文件的一个注意点:不能使用导入导出语法

vue3.0(双向绑定)源码分析