Vue教程之data的定义方式

介绍

在 Vue 中，data的定义方式有两种，一种是在 Vue 根实例中 data 是一个对象，还是一种就是在 Vue 组件中 data 是一个函数。

实例演示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="vue.js"></script>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="v of list">{{ v }}</li>
    </ul>
  </div>
</body>

<script>
  Vue.component('item', {
    data() {
      return {}
    }
  })

  var vm = new Vue({
    el: "#app",
    data: { // 直接定义
      list: [
        1, 2, 3
      ]
    }
  })
</script>

</html>

区别

在简单的 Vue 实例应用中，这两种写法是几乎是没有什么区别的，因为上述定义的 #app 对象不会被复用。

但是在组件环境中，会存在多个地方调用同一个组件的情况，为了不让多个地方的组件共享同一个 data 对象，因此通过提供 data 函数的方式，在每次创建一个新实例后，我们能够调用 data 函数返回一个全新的数据对象。

所以这里一定要是注意，在一个组件内定义的 data 必须是一个返回初始数据对象的函数。例如：

<script>
export default {
  data () {
    return {}
  }
}
</script>

Vue2 教程

介绍

区别

发表回复

Vue2 教程

介绍

区别

我们要如何帮助您？

发表回复