美文网首页
11. 组件中的data以及data为什么必须是函数

11. 组件中的data以及data为什么必须是函数

作者: 最爱喝龙井 | 来源:发表于2019-10-24 14:37 被阅读0次

组件中的data保存的是自己的数据,但是这个data必须是个函数,然后返回一个对象的形式

<div id="app">
        <cpn1></cpn1>
    </div>
    <template id="cpnC1">
        <div>
            <h2>{{title}}</h2>
            <p>make the world a better place</p>
        </div>
    </template>
    <script>
        Vue.component('cpn1', {
            template: '#cpnC1',
            data() {
                return {
                    title: 'hello world111'
                }
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {}
        });
    </script>

组件中的data为什么必须是一个函数

首先,我们先思考一下下面的代码:

        let obj = {
            name: 'jason',
            age: 18
        }
        function getObj() {
            return obj
        }
        let obj1 = getObj();
        let obj2 = getObj();
        let obj3 = getObj();

        obj1.name = 'lucy';
        console.log(obj2.name); //lucy
        console.log(obj3.name); //lucy

这里就有个问题,我们修改了其中一个的name属性,其他的几个也变了,这是因为对象是引用类型,保存的是一个内存的地址,引用的其实都是同一个对象,所以这种方式的话不太行😥,接着看下面的代码:

<script>
        function getObj() {
            return {
                name: 'jason',
                age: 18
            }
        }
        let obj1 = getObj();
        let obj2 = getObj();
        let obj3 = getObj();

        obj1.name = 'lucy';
        console.log(obj2.name); //jason
        console.log(obj3.name); //jason
    </script>

拿函数包裹一下返回的话,就能够确保每次都返回的是不同的对象,所以,在Vue的组件中data必须是一个函数,然后返回一个对象的形式,这样才能确保,组件中的数据的独立性

相关文章

  • 11. 组件中的data以及data为什么必须是函数

    组件中的data保存的是自己的数据,但是这个data必须是个函数,然后返回一个对象的形式 组件中的data为什么必...

  • vue 组件中的data为什么是一个函数

    组件中 data 为什么是一个函数? 为什么组件中的 data 必须是一个函数,然后 return 一个对象,而 ...

  • Vue-2

    组件模板的抽离写法 为什么组件data必须是函数

  • 组件避免冲突

    组件中data为什么是一个函数 子组件中的 data 属性值会相互影响,如果组件中 data 选项是一个函数,那么...

  • vue相关的知识

    1. 组件的data为什么必须是函数? 组件中的 data 写成一个函数,数据以函数返回值形式定义,这样每复用一次...

  • vue 中的 data 为什么是函数?

    new Vue() 实例中,data可以是直接是一个对象,为什么在vue组件中,data必须是一个函数呢?因为组件...

  • vue相关知识点

    组件中的 data 为什么是函数 组件是用来复用的,组件中的data应是互不影响的,防止data复用。 v-if和...

  • 微信小程序和vue的区别

    数据类型 vue组件中data必须是函数 data(){return{}},new Vue中的选项可以是函数也可以...

  • vue题库

    为什么vue组件中data必须是一个函数? 组件是可复用的,当复用组件时,由于数据对象指向的是同一个data对象,...

  • Vue组件data必须是函数

    Vue组件data必须是函数 一、组件data() 函数 定义一个组件 注册组件Vue.component('cp...

网友评论

      本文标题:11. 组件中的data以及data为什么必须是函数

      本文链接:https://www.haomeiwen.com/subject/uhmrvctx.html