vue，学会利用vue响应式属性

最新推荐文章于 2025-02-20 15:09:57 发布

原创最新推荐文章于 2025-02-20 15:09:57 发布 · 532 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #大前端 #es6

vue 专栏收录该内容

33 篇文章

订阅专栏

本文讨论了在Vue中处理接口数据的两种方式，推荐使用直接赋值给已有data对象的方式以利用Vue的响应式特性。这种方式可以确保当接口请求失败时，避免因transactionInfo变为undefined而导致的页面报错。正确做法能提高代码的健壮性和用户体验。

vue中，我现在data中定义：

      transactionInfo: {
        author: '',
        name: '',
        transactionId: '',
        transactionTime: ''
      }

然后我们通过接口拿数据，有以下两种方式，如下图的红线框住的上下两处。说一下那种比较好？
在这里插入图片描述
显然，是上面这种。因为vue中data定义的是响应式的数据，数据的set、get被代理了，只要对数据设置值或取值都能响应式地更新数据；那如果使用下面那种方式，就浪费了vue提供的这个特性，transactionInfo引用被覆盖，一开始给它定义的属性也没有使用到。