我是怎么学会vue的16:为什么组件的data必须是函数

白话前端

组件的数据定义在哪里

之前组件的数据都是写死在标签里的,现在我希望组件的数据可以动态变化:数据改变,组件的显示也随着变化。

组件的数据在哪里定义呢?

注册组件时,数据写在组件自己的data属性中。以全局组件为例,data是在注册组件的时候来指定的:

<div id="app">
  <cpn></cpn>
  <cpn></cpn>
  <cpn></cpn>
</div>

<template id="cpn">
  <div>
    <h2>{{title}}</h2>
    <p>内容</p>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>

  // 注册一个全局组件
  Vue.component('cpn', {
    template: '#cpn',
    data() {
      return {
        title: 'abc'     //全局组件的数据
      }
    }
  })

  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'  //vue实例的数据
    }
  })
</script>

为什么组件的数据需要保存在组件中,而不是保存在实例中?

因为一个实例有非常多的组件,如果所有的数据都放在vue实例中,那么vue的实例会非常臃肿,所有vue组件内部应该有自己保存数据的地方:保存在data属性中。

data属性必须是一个函数,且这个函数必须返回一个对象,对象内部保存数据。

为什么组件的data属性必须是函数?

案例:之前的计数器案例,把计数器封装成一个组件,用到的时候只需要引用标签即可。

<!--组件实例对象-->
<div id="app">
  <cpn></cpn> <!--一个cpn组件即是一个计数器-->
  <cpn></cpn> <!--创建了三个计数器-->
  <cpn></cpn> <!--思考:这三个组件实例对象,用的是否是同一个data对象?-->
</div>

<template id="cpn">
  <div>
    <h2>当前计数: {{counter}}</h2>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  // 1.注册组件
  Vue.component('cpn', {
    template: '#cpn',
    data() {
      return {
        counter:0
      }
    },
    methods: {
      increment() {
        this.counter++
      },
      decrement() {
        this.counter--
      }
    }
  })

  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>

解析:
三个组件,用的是否是同一个data对象?

不是。
因为data是一个函数,每次创建组件都会调data函数,且每次调用data函数的时候都会return一个新的对象

data(){ }function data(){ }的简写。

这里的三个组件,创建的时候调用了三次data函数,每次都return了一个新数据。这样三个数据分别占用了三个内存地址,互相就不影响了。

如果想让他们互相影响,应该怎么写呢?

  const obj = {
    counter: 0
  }
  Vue.component('cpn', {
    template: '#cpn',
    data() {
      return obj
    },
    methods: {
      increment() {
        this.counter++
      },
      decrement() {
        this.counter--
      }
    }
  })

这样写的话,三个组件的数据指向的是同一个内存地址,修改其中一个组件,其他两个也会跟着变化。

阅读 928

100 声望
7 粉丝
0 条评论
100 声望
7 粉丝
文章目录
宣传栏