组件中data为什么是个函数

总结：
1.vue中组件是用来复用，为了防止data复用，将它定义成一个函数。
2.当我们将组件中的data写成一个函数，数据是以函数返回值形式定义的，这样每复用一次data，都会返回一份新的data，拥有自己的作用域。
3.当我们组件中data写成一个对象的时候，对象是引用数据类型，它就会共用一个内存地址，造成数据污染。
组件中的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"><title>Document</title>
</head><body><div id="app"><num></num><num></num><num></num></div><template id="num"><div><p>{{count}}</p><button @click="count++">点击</button></div></template>
</body>
<script src="./vue.js"></script>
<script>Vue.component('num', {template: "#num",data() {return {count: 0}}})let app = new Vue({el: "#app",})
</script></html>

效果如下：

点击不同的按钮，每个按钮完成自己的++功能，互不影响。

如果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"><title>Document</title>
</head><body><div id="app"><num></num><num></num><num></num></div><template id="num"><div><p>{{count}}</p><button @click="count++">点击</button></div></template>
</body>
<script src="./vue.js"></script>
<script>const counter = {count: 0}Vue.component('num', {template: "#num",data() {return counter}})const app = new Vue({el: "#app",})
</script></html>

效果图如下：

点击的时候一起发生变化，共用了一个内存地址。

组件中data为什么是个函数相关推荐

为什么Vue组件里面data必须是个函数
Vue组件里面data必须是个函数 **首页我们先了解一个原形和原型链,每个js对象和js方法都有一个原形,js对象的是隐式原形 proto,而方法中的是显示原形prototype,下面举个例子: e ...
vue中组件的data为什么是一个函数
组件是可复用的vue实例,一个组件被创建好之后,就可能被用在各个地方,而组件不管被复用了多少次,组件中的data数据都应该是相互隔离,互不影响的,基于这一理念,组件每复用一次,data数据就应该被复制 ...
组件中data为什么是函数
data是一个函数,但是返回的是一个对象,如果data直接是一个对象,会造成联动反应,即改变其中一个组件中的数据,其他的数据也会进行变化 <!DOCTYPE html> <html& ...
微信小程序 - 自定义组件中类似页面 onShow 的页面显示就触发的生命周期钩子函数（页面回退时更新数据常用, 例如回退页面更新子组件数据, 回退更新子组件中 data 内容）
前言在微信小程序中,用户回退页面触发更新数据的操作,一般都是在页面 onShow() 中写上执行更新的函数即可. 但如果咱们把数据和方法都写在了自定义子组件中,那么用户回退页面时, 更新数据就成了 ...
Vue组件中data的使用方式
全局组件中的data使用方式: js中写法: Vue.component("mycom1",{template:'<h1>这是全局组件--{{msg}}</h1& ...
java socket中属性详解_前端开发：关于Vue组件中的data属性值是函数而不是对象的详解...
最近在搞关于前端开发的基础知识归纳,发现了不少经典知识点,那么本篇博文就来分享一个经典的知识点:Vue组件中的data属性值为什么是函数而不是对象.首先来了解一下Vue组件的使用理念:在Vue组件使用 ...
vue中data定义数字类型_[乐意黎原创] Vue中data定义的三种方式和区别
在 Vue中,定义data时,经常有好几种写法,一不小心会混淆,这里彻底详述一下,以便记分清 . 一.在vue中,定义data可以有三种写法. 1. 第一种写法,data是一个对象. var app ...
html5怎么改为vue_是否还在疑惑Vue.js中组件的data为什么是函数类型而不是对象类型...
点击上方"前端印象",选择"设为星标"第一时间关注技术干货! 引言要理解本篇文章,必须具备JavaScript中基本数据类型和引用数据类型的概念,大家可以花两 ...
微信小程序自定义组件中 triggerEvent() 函数失效的一种情况 (Cannot read property ‘triggerEvent‘ of undefined)
在网络上并没有搜索到这种情况,这里记录下避免以后的自己和广大码农踩到这个坑问题描述:在自定义组件中想调用 this.triggerEvent()函数给父组件传参,过程中报错:Cannot read ...

组件中data为什么是个函数

组件中data为什么是个函数相关推荐

最新文章

热门文章