vue组件data是一个函数的原理

最新推荐文章于 2022-03-16 11:14:49 发布

爱喝酸奶的一旬

最新推荐文章于 2022-03-16 11:14:49 发布

阅读量175

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_43011185/article/details/108678677

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

先从demo开始

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       
    </div>
    <div id="app2">
    <!--创建三个计数器-->
        <demo></demo>
        <demo></demo>
        <demo></demo>
    </div>
</body>
<script src="js/vue.js"></script>

<!-- 第一种分离的方法，使用script标签-->

<script id="demo" type="text/x-template">
    <div>
        <h1>{{count}}</h1>
        <button @click='incre'>+</button>
        <button @click='decre'>-</button>
    </div>
  
</script>
<script>
   Vue.component('demo',{
       template:demo,
       data(){
           return{
            count:0,
           }
       },
       methods:{
           incre(){
               this.count++
           },
           decre(){
               this.count--
           }
       }
   })


    const vm2=new Vue({
        el:"#app2",
        data:{},
      
    })

结果如下
在这里插入图片描述

先看以下的js代码

<script>
 function demo(){
     return{
         name:"jack",
         age:23
     }
 }
var a=demo();
var b=demo();
var c=demo();


a.name="kkkkk";
console.log(b.name);
//jack

上面创建一个demo方法，这个方法返回了一个新的对象，我们每一次调用这个方法的时候，就会返回一个新的对象。变量因此 a，b，c他们各自互不影响，因为他们是不同对象，内存地址不同。

再看以下代码

var obj={
    name:"french",
    age:23
}



function test(){
    return obj;

}
var a1=test();
var a2=test()
a1.name="heool";
console.log(a2.name);
//heool

发现如果调用test方法，返回obj，这个只是一个引用，每一次调用这个方法，其实不是返回对象而是返回了对象的引用，就是这个对象的内存地址，因此a1，a2得到其实是obj的内存地址，他们共用这个地址。如果修改了a1的数据，那么a2就会跟着改变

总结

因此，vue在设计的时候，考虑到组件复用的问题，如果各个组件共享数据，并不是我想要的，因此，需要将他们分开。在使用的时候，如果data’不是函数，且返回的不是对象，则直接回报错

爱喝酸奶的一旬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue组件data是一个函数的原理

先从demo开始<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <
复制链接

扫一扫