vue中为什么组件中的data属性必须定义为一个方法并返回一个对象

最新推荐文章于 2022-05-25 09:59:19 发布

面对疾风ba

最新推荐文章于 2022-05-25 09:59:19 发布

阅读量1k

点赞数

分类专栏： vue学习笔记文章标签： vue

本文链接：https://blog.csdn.net/u011608672/article/details/114323128

版权

vue学习笔记专栏收录该内容

36 篇文章 5 订阅

订阅专栏

为什么组件中的data属性必须定义为一个方法并返回一个对象

通过计数器案例演示详解

对象为引用类型，当重用组件时，由于数据对象都指向同一个data对象，当在一个组件中修改data时，其他重用的组件中的data会同时被修改；
而使用返回对象的函数，由于每次返回的都是一个新对象（Object的实例），引用地址不同，则不会出现这个问题，样组件间不会互相干扰；

例1:指向一致的data数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
    <title>Document</title>
</head>
<body>
    <div id="app">
      <num1></num1>
      <num1></num1>
      <num1></num1>
    </div>

    <!-- 定义组件 -->
    <template id="tmpl">
      <div>
        <input type="button" value="加1" @click="add">
        <h1>{{ count }}</h1>
      </div>
    </template>
    <script>
        
        //如果使用全全局的定义，
        var dataObj = { count:0 }

        Vue.component('num1', {
          template: '#tmpl',
          data(){
                return dataObj
          },
          methods:{
            add(){
              this.count++
            }
          }
        });

        var vm = new Vue({
            el:'#app',
            data:{},
            methods:{}
        })
    </script>
</body>
</html>

例1效果：
在这里插入图片描述

例2:指向不一致的data数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
    <title>Document</title>
</head>
<body>
    <div id="app">
      <num1></num1>
      <num1></num1>
      <num1></num1>
    </div>

    <!-- 定义组件 -->
    <template id="tmpl">
      <div>
        <input type="button" value="加1" @click="add">
        <h1>{{ count }}</h1>
      </div>
    </template>
    <script>
        Vue.component('num1', {
          template: '#tmpl',
          data(){
                return {
                  count:0
                }
          },
          methods:{
            add(){
              this.count++
            }
          }
        });

        var vm = new Vue({
            el:'#app',
            data:{},
            methods:{}
        })
    </script>
</body>
</html>

案例2效果：
在这里插入图片描述

面对疾风ba

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
vue中为什么组件中的data属性必须定义为一个方法并返回一个对象

为什么组件中的data属性必须定义为一个方法并返回一个对象通过计数器案例演示详解对象为引用类型，当重用组件时，由于数据对象都指向同一个data对象，当在一个组件中修改data时，其他重用的组件中的data会同时被修改；而使用返回对象的函数，由于每次返回的都是一个新对象（Object的实例），引用地址不同，则不会出现这个问题，样组件间不会互相干扰；例1:指向一致的data数据<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫

专栏目录