Vue数据双向绑定问题及解决方案-优快云博客

本文链接：https://blog.youkuaiyun.com/tangguo_kuku/article/details/107501697

在Vue项目中遇到data定义的对象属性无法在页面上回显的问题。文章探讨了这个问题的原因，并提供了四种解决方案：1) 重新给data赋值改变引用；2) 使用官方推荐的方法；3) 在data中预先定义属性名；4) 使用方法进行操作，但可能造成性能损耗。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue项目中data定义的对象属性无法在页面回显

废话不多说，直接上代码，最近公司小伙伴写vue项目在data是这样定义的

data() {
    return {
      msg: "Welcome to Your Vue.js App",
      data: {}
    };
  },

如图定义了一个data对象，通过created钩子函数发送了请求拿到了数据一个数据对象，并且想把拿到的数据对象中的某些属性给data中的data，这多简单，直接开干

created() {
    setTimeout(item => {    
      let obj = { name: 123, age: 16 };
      const { name, age } = { ...obj };
      this.data.name = name;
    }, 1000);
  }

假设obj对象就是通过接口请求回显的数据，这样写完发现页面中的data.name在页面中压根没有回显,小伙伴疑惑了,难道vue出bug了,为什么没有data中的数据没有绑定上呢,明明在data中定义了,怎么就没有双向绑定,其实这和vue的底层数据双向绑定有关系,具体原理可以去研究源码
这里我介绍几种解决方法

第一种:通过重新给data赋值,此时data的指针指向新的内存地址,vue监听到了data的数据重新触发了set和get

created() {
    setTimeout(item => {
      let obj = { name: 123, age: 16 };
      const { name, age } = { ...obj };
      this.data = { name };
      // 或者这样
      // this.data = { ...this.data, name };
    }, 1000);
  }

第二种官方的$set方法

created() {
    setTimeout(item => {
      let obj = { name: 123, age: 16 };
      const { name, age } = { ...obj };
      this.$set(this.data, "name", name);
    }, 1000);

第三种方法,提前在data中定义好需要的属性名字

data() {
    return {
      msg: "Welcome to Your Vue.js App",
      data: { name: "" }
    };
  },
  created() {
    setTimeout(item => {
      let obj = { name: 123, age: 16 };
      const { name, age } = { ...obj };
      this.data.name = name;
    }, 1000);
  }

第四种方法用$forceUpdate方法,但是这种方法不推荐,有可能会造成不必要的性能损耗

created() {
    setTimeout(item => {
      let obj = { name: 123, age: 16 };
      const { name, age } = { ...obj };
      this.data.name = name;
      this.$forceUpdate();
    }, 1000);