Question

在vue.js中，通过this.example和this.$data.example访问数据有什么区别？

每种方法的优缺点是什么？

这是同时使用两者的示例。

JS：

new Vue({
  el: '#app',
  data() {
    return {
      demo1: 'Test1',
      demo2: 'Test2',
    }
  },
  computed: {
    comp1() {
      return `value: ${this.demo1}`
    },
    comp2() {
      return `value: ${this.$data.demo2}`
    }
  },
});

<div id="app">
  <fieldset>
    <input type="text" v-model="demo1">
    <p>Result = <span v-html="demo1"></p>
    <p>Computed = <span v-html="comp1"></p>
  </fieldset>
  <fieldset>
    <input type="text" v-model="$data.demo2">
    <p>Result = <span v-html="$data.demo2"></span></p>
    <p>Computed = <span v-html="comp2"></p>
  </fieldset>
</div>

Answer 1

vue实例api具有许多以$开头的属性，可以在某些情况下使用。对于$data属性，循环存在于特定组件上的所有数据或将所有组件数据发送到另一个组件或api（例如将每个字段绑定到数据的表单组件）可能是有用的。属性）。尽管在大多数情况下，使用this.myDataProperty直接在vue实例本身上访问数据属性更为常见。如果您需要访问单个属性，则使用this.$data来访问它没有任何好处，尽管我不知道这样做有什么缺点。以下是从Vue文档中获得的有关vue实例和数据属性的其他一些补充信息。

https://vuejs.org/v2/guide/instance.html#Data-and-Methods

https://vuejs.org/v2/api/#vm-data

this.example和this。$ data.example在vue.js中访问“数据”有什么区别

1 个答案: