Vue--为什么data是个函数--实例讲解

桃扇骨 2023-10-02 17:38 21阅读 0赞

原文网址：[Vue--为什么data是个函数--实例讲解\_IT利刃出鞘的博客-CSDN博客][Vue--_data_--_IT_-CSDN]

## 简介 ##

**说明**

本文用示例介绍Vue中的data设计为函数的原因。

分别用Vue和原生JavaScript进行展示。

**结论**

对象是一个引用数据类型，如果data是一个对象会造成所有组件共用一个data。若data是一个函数，每次函数都会返回一个新的对象，这样每个组件都会维护一份独立的对象（data）。

根实例对象data可以是对象也可以是函数（根实例是单例），不会产生数据污染情况。

vue支持将一个对象作为vue构造参数中data属性的值，如果data是方法的话，也会先取得内部返回的对象结果。详见代码：

// vue/src/core/instance/state.js
    function initData (vm: Component) {
      var data = vm.$options.data;
      data = vm._data = typeof data === 'function'
        ? getData(data, vm)
        : data || {};
      if (!isPlainObject(data)) {
        data = {};
        process.env.NODE_ENV !== 'production' && warn(
          'data functions should return an object:\n' +
          'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
          vm
        );
      }
      ...
    }

**官网**

[组件基础 — Vue.js][_ Vue.js]

## **问题引出** ##

大家都知道，Vue的组件一般是下边这样写的。

可以看到，data是个函数，那么为什么不写成对象呢？就像这样：data: \{ msg: 'Hello'\}

<template>
      <div class="hello">
        hello world
      </div>
    </template>
    
    <script>
    export default {
      name: 'Demo',
      data () {
        return {
          msg: 'Hello'
        }
      }
    }
    </script>
    
    <style scoped>
    
    </style>

## 实例：使用Vue创建计数器 ##

### 例1：data为函数 ###

<!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>this is title</title>
    </head>
    
    <body>
    
    <div id="components-demo">
        <button-counter></button-counter>
        <button-counter></button-counter>
        <button-counter></button-counter>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>Vue.config.productionTip = false</script>
    
    <script>
        // 定义一个名为 button-counter 的新组件
        Vue.component('button-counter', {
            data: function () {
                return {
                    count: 0
                }
            },
            template: '<button v-on:click="count++">你点击了 {
       { count }} 次</button>'
        })
    
        new Vue({
            el: '#components-demo'
        })
    </script>
    
    </body>
    </html>

结果：每个计数器单独计数

![42b07dee713041778afde8e7ca97bd3b.gif][]

### 例2：data为对象 ###

<!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>this is title</title>
    </head>
    
    <body>
    
    <div id="components-demo">
        <button-counter></button-counter>
        <button-counter></button-counter>
        <button-counter></button-counter>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>Vue.config.productionTip = false</script>
    
    <script>
        // 定义一个名为 button-counter 的新组件
        Vue.component('button-counter', {
            data: {
                count: 0
            },
            template: '<button v-on:click="count++">你点击了 {
       { count }} 次</button>'
        })
    
        new Vue({
            el: '#components-demo'
        })
    </script>
    
    </body>
    </html>

结果：直接报错

![d5f1d040e91f48488ea0d46306b3e24f.png][]

是因为新版的Vue2直接进行了检测，如果不是函数，就会报错。

如果是旧版的Vue2，那么结果是：点击了一个按钮，所有按钮都会增加次数（它们共享data里的count这个属性）。

## 实例：原生JS ##

### 例1：data为函数 ###

<!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>This is title</title>
    </head>
    
    <body>
    
    <div class="container">
        这是个Demo
    </div>
    
    <script>
        function MyComponent() {
            this.data = this.data();
        }
    
        MyComponent.prototype.data = function() {
            return {
                age: 12
            }
        };
    
        let user1 = new MyComponent();
        let user2 = new MyComponent();
    
        console.log(user1.data === user2.data)  // false
    
        user1.data = {age: 13};
    
        console.log('user1的age：' + user1.data.age); //user1的age：13
        console.log('user2的age：' + user2.data.age); //user2的age：12
    </script>
    </body>
    </html>

结果：输出的结果不同

![816acb2b55a343e0878c10eae624f4bb.png][]

### 例2：data为对象 ###

<!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>This is title</title>
    </head>
    
    <body>
    
    <div class="container">
        这是个Demo
    </div>
    
    <script>
        function MyComponent() {
        }
    
        MyComponent.prototype.data = {
            age: 12
        }
    
        let user1 = new MyComponent();
        let user2 = new MyComponent();
    
        console.log(user1.data === user2.data)  // false
    
        user1.data = {age: 13};
    
        console.log('user1的age：' + user1.data.age); //user1的age：13
        console.log('user2的age：' + user2.data.age); //user2的age：12
    </script>
    </body>
    </html>

结果：输出的结果相同

![bdabf92a42c84622986547fb52a6e583.png][]

## 其他网址 ##

[Vue 组件 data 为什么必须是函数(分析源码，找到答案)\_Jioho的博客-CSDN博客][Vue _ data _Jioho_-CSDN]

[Vue--_data_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122334962
[_ Vue.js]: https://cn.vuejs.org/v2/guide/components.html#data-%E5%BF%85%E9%A1%BB%E6%98%AF%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0
[42b07dee713041778afde8e7ca97bd3b.gif]: https://img-blog.csdnimg.cn/42b07dee713041778afde8e7ca97bd3b.gif
[d5f1d040e91f48488ea0d46306b3e24f.png]: https://img-blog.csdnimg.cn/d5f1d040e91f48488ea0d46306b3e24f.png
[816acb2b55a343e0878c10eae624f4bb.png]: https://img-blog.csdnimg.cn/816acb2b55a343e0878c10eae624f4bb.png
[bdabf92a42c84622986547fb52a6e583.png]: https://img-blog.csdnimg.cn/bdabf92a42c84622986547fb52a6e583.png
[Vue _ data _Jioho_-CSDN]: https://blog.csdn.net/Jioho_chen/article/details/106934607