Vue——为什么组件data是函数

问题描述

为什么Vue组件中的data是函数？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <conter></conter>
    </div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    Vue.component("conter",{
       template:"<button type=\"button\" @click=\"num++\">点我{{num}}</button>",
        data:function () {
            return{
                num: 1
            }
        }
    });
    const app=new Vue({
        el: "#app"
    });
</script>
</html>

根本原因

Object是引用数据类型，如果不用function返回，每个组件的data都是内存的同一个地址，一个数据改变了其他也改变了；组件是可复用的，一个数据改变其他的也改变这很明显不是我们想要看到的结果，所以组件的data返回值必须是函数。当然了如果你想多个组件共享同一份data，也可以使用对象

JavaScript只有函数构成作用域(注意理解作用域，只有函数{}构成作用域,对象的{}以及if(){}都不构成作用域),data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，不会相互影响。

示例

const MyComponent = function() {};
MyComponent.prototype.data = {
    a: 1,
    b: 2
}
const component1 = new MyComponent();
const component2 = new MyComponent();
 
component1.data.a === component2.data.a; // true
component1.data.b = 5;
component2.data.b //5

如果两个实例同事引用一个对象，那么当你修改其中一个属性的时候，另外一个实例也会跟着该；

两个实例应该有自己各自的域才对，需要通过下面的方法进行处理

const MyComponent = function() {
    this.data = this.data();
};
 
MyComponent.prototype.data = function() {
    return {
        a:1,
        b:2
    }
};

 

posted @ 2020-12-09 20:09  别无所求---  阅读(126)  评论(0)  编辑  收藏  举报