data必须是函数

南山隐士 2022年06月25日 23 0

我们先在全局注册一个组件,这里需要注意的是,全局注册组件代码,必须在new一个vue实例之前,不然不生效!

Vue.component('Test', {
  data: function () {
    return {
      age: 0
    }
  },
  template: '<button v-on:click="age++">遥近的年龄是: {{ age }} </button>'
})

然后我们就可以在任意的组件中使用该组件了,您可以尝试复用2次该组件

可以发现,我组件里面的age值,是分开的,哪怕我第一个age改变了,我另外的age是不会改变的

这就是data作为函数的原因了,只要你复用了该组件,那么它的data就会返回一个新的对象,那么每一个对象指向的堆地址都不一样的,这样的话就不会存在数据给共享的,也就是说不会说我改变了一个组件的值,另外一个组件的值也会发生相应的变化

Last Updated: 2022/06/25 19:09:27
computed和watch的区别 MVC与MVVM的区别