Vue.js 组件中data为什么必须是个函数

Vue.js中的data:

  • 类型:Object | Function
  • 限制:组件的定义只接受 function

那么为什么组件中定义的data只接受function呢?下面我们通过几个例子来说明一下:

<body>
    <div id="app">
        <counter>counter>
    div>
    <template id="temp1">
        <div>
            <input type="button" value="+1" @click="increment">
            <h3>{{count}}h3>
        div>
    template>
    <script type="text/javascript">
        var dataObj = {count: 0};
        Vue.component('counter',{
            template:'#temp1',
            data(){
                return dataObj
            },
            methods:{
                increment() {
                    this.count++
                }
            }
        })
        var vm = new Vue({
            el: "#app",
            data:{},
            methods: {}
        })
    script>
body>

简单的分析一下代码:

1、我们首先创建一个名字为counter的组件,如果直接给data属性设置一个对象而不是一个函数那么在浏览器中直接报错。
Vue.js 组件中data为什么必须是个函数_第1张图片
2、我们这里data函数中返回一个外部定义的对象的值,在浏览器中运行代码:
在这里插入图片描述
每次点击按钮,下面的值都会+1

3、如果我们在页面上同时使用三个counter组件:

<div id="app">
   <counter>counter>
   <hr>
   <counter>counter>
   <hr>
   <counter>counter>
   <hr>
div>

在这里插入图片描述
点击任意一个按钮,三个数同时变化,因为它们都指向同一个对象,我们当然希望点击不同的按钮只实现当前组件内的数据变化,那么我们在函数中返回一个对象,每次创建一个组件 的时候,在内存中同时开辟一块空间给当前组件存放data,这样就不会出现同一个data的现象。我们只需要将如上代码进行一点更改:

data: function (){
    //return dataObj
    return{
        count:0
    }
}

在这里插入图片描述
参考文章:https://www.cnblogs.com/zmyxixihaha/p/10660088.html

你要去做一个大人,不要回头,不要难过。

“这世上没有平白无故的闪闪发光。”

你可能感兴趣的:(Vue.js)