Vue（复用）组件，data属性为何是一个函数。

最新推荐文章于 2023-05-16 15:36:47 发布

xiaoQinVar

最新推荐文章于 2023-05-16 15:36:47 发布

阅读量363

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_45593068/article/details/105009202

版权

Vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

data属性为何是一个函数

总而言之：为了防止组件复用相互影响。

从Vue组件的角度上理解

在这里插入图片描述

<body>
  <div id="app">
    <cop></cop>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const cop = {
      data() {
        return {
          num: 0
        }
      },
      template: `
      <div>
        <div>{{num}}</div>
        <button @click="num++">increase</button>
      </div>
      `
    }

    const vue = new Vue({
      el: '#app',
      components: {
        cop
      }
    })
  </script>
</body>

如果组件data不使用函数，则不法通过编译，直接报错。
这是因为如果可以用对象的话，那么每个复用的组件都会共用一个num因为对象的引用地址，而不是深拷贝。

从js上层面上理解

对象形式

	class Father1 {
      constructor() {
      }
    }
    
    Father1.prototype.msg = {
      data: 'msg'
    };

    const a = new Father1();
    const b = new Father1();
    a.msg.data = 'xxx';
    console.log(a.msg, b.msg); // a:{data: "xxx"}  b:{data: "xxx"}
    //这里拿到的都是Father的原型，对象只是拿到的地址，就是浅拷贝。
    // 所以一旦修改所有引用的都会修改

这里可以理解成data用对象的方式，一旦复用，所有的数据会影响。

函数形式

class Father2 {
      constructor() {
        this.msg = this.msg();
      }
    }
    
    Father2.prototype.msg = function () {
      return {
        data: 'aaa'
      }
    }
    
    const c = new Father2();
    const d = new Father2();
    c.msg.data = 'xxx';
    console.log(c.msg, d.msg); // {data: "xxx"} {data: "aaa"}

这里每个实例（理解成组件）都会有自己独立的data，这样避免复用data共用的情况。
自己踩的继承原型的坑——有关继承、原型、修改原型上的函数返回值上的值的坑。。。

xiaoQinVar

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue（复用）组件，data属性为何是一个函数。

data属性为何是一个函数总而言之：为了防止组件复用相互影响。从Vue组件的角度上理解<body> <div id="app"> <cop></cop> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"><...
复制链接

扫一扫

专栏目录