vue中data必须是函数

看了好多博客论坛啥的，我比较笨不是很理解，包括我之前转载的一篇，不过我转载的我是看懂了，今天没事重新过了下官网，下面我们一起看看官网是如何给出解答的，这里面第一个他也用了return，但是和我们说的return不同，这个完全是为了躲避语法报错，我们也可以自己创建vue实例注册组件，然后多个地方同时注册，解释的还是很好的，我这里抛砖引玉下~~~通过 Vue 构造器传入的各种选项大多数都可

愚蠢地人类

8964人浏览 · 2017-10-08 20:57:52

愚蠢地人类 · 2017-10-08 20:57:52 发布

通过 Vue 构造器传入的各种选项大多数都可以在组件里用。data 是一个例外，它必须是函数。实际上，如果你这么做：

     
     
      
      Vue.component(
      
      'my-component', {
     
     
     
       
      
      template: 
      
      '<span>{{ message }}</span>',
     
     
     
       
      
      data: {
     
     
     
         
      
      message: 
      
      'hello'
     
     
     
     
      
        }
     
     
     
     
      
      })

那么 Vue 会停止，并在控制台发出警告，告诉你在组件中 data 必须是一个函数。理解这种规则的存在意义很有帮助，让我们假设用如下方式来绕开 Vue 的警告：

     
     
      
      <div id="example-2">
     
     
     
       
      
      <simple-counter>
      
      </simple-counter>
     
     
     
       
      
      <simple-counter>
      
      </simple-counter>
     
     
     
       
      
      <simple-counter>
      
      </simple-counter>
     
     
     
     
      
      </div>

     
     
      
      var data = { 
      
      counter: 
      
      0 }
     
     
     
     
     
     
      
      Vue.component(
      
      'simple-counter', {
     
     
     
       
      
      template: 
      
      '<button v-on:click="counter += 1">{{ counter }}</button>',
     
     
     
     
      
        
      
      // 技术上 data 的确是一个函数了，因此 Vue 不会警告，
     
     
     
     
      
        
      
      // 但是我们返回给每个组件的实例却引用了同一个 data 对象
     
     
     
     
      
        data: 
      
      function () {
     
     
     
         
      
      return data
     
     
     
     
      
        }
     
     
     
     
      
      })
     
     
     
     
     
     
      
      new Vue({
     
     
     
       
      
      el: 
      
      '#example-2'
     
     
     
     
      
      })

由于这三个组件共享了同一个 data，因此增加一个 counter 会影响所有组件！这不对。我们可以通过为每个组件返回全新的 data 对象来解决这个问题：

     
     
      
      data: 
      
      function () {
     
     
     
       
      
      return {
     
     
     
         
      
      counter: 
      
      0
     
     
     
     
      
        }
     
     
     
     
      
      }

现在每个 counter 都有它自己内部的状态了：

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^