Vue组件中的data必须是一个function的原因浅析

组件可以有自己的data，并且data必须是一个function。

在下面这个例子中，data 返回了一个在外部定义的对象。并且这个组件在页面中使用了3次，点击+1时出现了如下情况：data中的count属性影响到了所有实例。

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="../css/bootstrap.css" rel="external nofollow" >
  <style type="text/css">
 #app{
  margin:20px;
 }
  </style>
 </head>
<body>
 <div id='app'>
  <counter></counter>
  <counter></counter>
  <counter></counter>
 </div>
 <template id="tmp1">
  <div>
   <input type="button" value="+1" @click="increment">
   <h1>{{count}}</h1>
  </div>
 </template>
</body>
<script src="../lib/vue.js"></script>
<script>
 var dataObj = {count:0}
 //这是一个计数器组件,每当点击按钮,让data中的count值加1
 Vue.component('counter',{
  template:'#tmp1',
  data:function(){
   return dataObj
  },
  methods:{
   increment(){
    this.count++
   }
  }
 })
 var vm = new Vue({
  el:'#app',
 })
</script>
</html>

而当data选项是一个函数的时候，每个实例可以维护一份被返回对象的独立的拷贝，这样各个实例中的data不会相互影响，是独立的。

 Vue.component('counter',{
  template:'#tmp1',
  data:function(){
   return {count:0}
  },
  methods:{
   increment(){
    this.count++
   }
  }
 })

  补充：下面看下vue组件中data必须是一个函数的原因

vue组件中data值不能为对象，因为对象是引用类型，组件可能会被多个实例同时引用。如果data值为对象，将导致多个实例共享一个对象，其中一个组件改变data属性值，其它实例也会受到影响。

上面解释了data不能为对象的原因，这里我们简单说下data为函数的原因。data为函数，通过return 返回对象的拷贝，致使每个实例都有自己独立的对象，实例之间可以互不影响的改变data属性值。

data为函数的示例：

data:function(){
  return {
      k1: 'v1',
      k2: 'v2',
    ...
  }
}

总结

以上所述是小编给大家介绍的Vue组件中的data必须是一个function的原因浅析，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • vue深入解析之render function code详解

    vue深入解析之render function code详解

    前言 最近在深入的学习研究vue,其实vue在使用上入门并没有什么太高的门槛,但前端同学们也不该仅仅停留在使用上.以 vue 设计.编码之优秀,足当抽丝剥茧,扒开它的外壳,深入其原理.让我们一起来刺破 vue 的心脏,下面话不多说了,来一起看看详细的介绍吧. vue核心执行过程图 vue核心的执行过程主要分为这几个阶段: 1) 编译模板,生成可复用的render function code(这是今天要重点解读的),这一步在vue实例的整个生命周期中只会执行一次甚至零次,因为我们可以在打包的时候可

  • 详解Vue.js搭建路由报错 router.map is not a function

    详解Vue.js搭建路由报错 router.map is not a function

    错误: 出现问题原因:2.0已经没有map这个方法了,只有1.0兼容该方法. 解决方法: (1)方法1:使用命令npm install vue-router@0.7.13兼容1.0版本vue. 在代码中的使用方法: (2)解决方法2:基于vue2.0,写对应的方法. 具体用法如下图: 注:1.0和2.0在一些用法上有比较大的差别,用的时候需要注意. 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.

  • 浅谈vue的props，data，computed变化对组件更新的影响

    本文介绍了vue的props,data,computed变化对组件更新的影响,分享给大家,废话不多说,直接上代码 /** this is Parent.vue */ <template> <div> <div>{{'parent data : ' + parentData}}</div> <div>{{'parent to children1 props : ' + parentToChildren1Props}}</div> <

  • 详解Vue.js基于$.ajax获取数据并与组件的data绑定

    详解Vue.js基于$.ajax获取数据并与组件的data绑定

    Vue.js与jQuery不冲突??? 在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax请求来完成的. 说到ajax请求,第一反应肯定想到了jQuery,项目中如果引入jQuery会帮助我们简化很多操作,简化DOM操作,ajax方法获取后端数据等. 然而,Vue.js和jQuery冲突吗??? 答案显然是不冲突!!! 接下来会实现Vue.js组件中使用jQuery的ajax方法获取服务器端数据并绑定至组件的data中. 创建Vue.js单文件组件 <

  • 详解vue项目中如何引入全局sass/less变量、function、mixin

    让我们考虑下场景:当使用rem/vw开发移动端的时候,你定义了一个px转rem的函数,或者是网站配色的全局变量等,然后到工程里为每个vue文件或者组件@import 'publicfilename.scss',那得重复做这样的工作很多很多...次,万一这些公用文件目录路径变怎么办呢,哭都来不及,想想都觉得恐怖呀! 接下来拯救我们的神器就要登场了---sass-resources-loader,它可以省去重复性的引入,还支持less,postcss等,具体用法如下: npm install -d

  • Vue组件中的data必须是一个function的原因浅析

    组件可以有自己的data,并且data必须是一个function. 在下面这个例子中,data 返回了一个在外部定义的对象.并且这个组件在页面中使用了3次,点击+1时出现了如下情况:data中的count属性影响到了所有实例. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="

  • vue组件中props与data的结合使用方式

    目录 组件中props与data的结合使用 子组件中data从props中动态更新数据 组件中props与data的结合使用 如前所述(vue组件属性(props)及私有数据data),vue组件中,props是组件公有属性,对外:data是组件的私有数据,对内.正因为props对外,由外部赋值,因此在组件内部,是只读的,即组件内部不适宜去改变这些元素的值.当然,改也可以改,但运行时刻会有告警. 正如我们写一个函数,对于传入的参数,我们一般是只读对待的,极少会去修改它的值一样.当然,这只是一种编

  • 在vue组件中使用axios的方法

    现在我们通过webpack+vue-cli搭建起了一个vue项目的框架,如果我们需要在vue组件中使用axios向后台获取数据应该怎么办呢? 通常情况下,我们搭建好的项目目录应该是这样子的 首先需要安装axios,这个会npm的都知道 下一步,在main.js中引入axios import axios from "axios"; 与很多第三方模块不同的是,axios不能使用use方法,转而应该进行如下操作 Vue.prototype.$axios = axios; 接着,我们就可以在A

  • vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show

    需求:点击btn,弹出modal显示图表(以折现图为例) 这应该是很基本的需求也是很容易实现的,代码和效果如下: 代码解释:setTem是一个方法,改变modal为true,默认为false : chart-line是图表子组件,通过data向其传递参数,data绑定的数据是父组件mounted后拿到的数据 效果图:点击btn后的确显示了modal框,但是里面的图表不能显示,接着改变子组件任何代码,迫使重新编译子组件,则子组件的图表可以正常显示 分析:当点击btn时,modal框的确弹出来了,但

  • Vue组件中prop属性使用说明实例代码详解

    Prop 的大小写 (camelCase vs kebab-case) HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符.这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名: Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 props: ['postTitle'], template: '<h

  • vue组件中使用props传递数据的实例详解

    在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息.看看它们是怎么工作的.  一.基本用法 组件不仅仅是要把模板的内容进行复用,更重要的是组件间要进行通信. 在组件中,使用选项props 来声明需要从父级接收的数据, props 的值可以是两种, 一种是字符串数组,一种是对象. 1.1 字符串数组: <div id="app4"> <my-component4 messa

  • vue组件中的数据传递方法

    Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递.组件之间传递数据大致分为三种情况: 父组件向子组件传递数据,通过 props 传递数据. 子组件向父组件传递数据,通过 events 传递数据. 两个同级组件之间传递数据,通过 event bus 传递数据. 一.父组件向子组件传递数据 子组件部分: <template> <div class="child"> {{ msg }} </

  • VUE组件中的 Drawer 抽屉实现代码

    因为项目中用的是 element-ui 框架,而这个框架并没有抽屉组件,所以自己实现一个,具体代码如下: drawer.vue <template> <div class="drawer"> <div :class="maskClass" @click="closeByMask"></div> <div :class="mainClass" :style="mai

  • vuex 实现getter值赋值给vue组件里的data示例

    通过watch将orderDetailsData对象赋值给data中的consignee对象,这样能将操作能避免v-model修改时,直接改动vuex中的值. <template> <input type="text" placeholder="请输入收货人名字" v-model="consignee.name"> <input type="text" placeholder="请输入收

  • Vue 中 template 有且只能一个 root的原因解析(源码分析)

    引言 今年, 疫情 并没有影响到各种面经的正常出现,可谓是络绎不绝(学不动...).然后,在前段时间也看到一个这样的关于 Vue 的问题, 为什么每个组件 template 中有且只能一个 root? 可能,大家在平常开发中,用的较多就是 template 写 html 的形式.当然,不排除用 JSX 和 render() 函数的.但是,究其本质,它们最终都会转化成 render() 函数.然后,再由 render() 函数转为 Vritual DOM (以下统称 VNode ).而 rende

随机推荐