1.  
  2. 主页
  3.  / 
  4. Vue教程
  5.  / 
  6. Vue教程之data的定义方式

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>
这篇文章对您有用吗?

我们要如何帮助您?

发表评论

您的电子邮箱地址不会被公开。