组件可以有自己的数据，数据必须是函数。

在下面的示例中，数据返回外部定义的对象。这个组件已经在页面中使用了三次。单击1时，会发生以下情况：数据中的计数属性会影响所有实例。

html头元http-equiv=' Content-Type ' Content=' text/html；charset=utf-8'/link rel='样式表' type='text/css' href='./CSS/bootstrap . CSS ' rel=' external no follow ' style type=' text/CSS ' # app { margin :20 px；}/style/head body div id=' app ' counter/counter/counter/counter/div模板id='tmp1' div输入类型='button '值=' 1 ' @ click=' increment ' h1 { { count } }/h1/div/模板/body script src=' http 3360./lib/vue . js '/Script Script var data obj={ count :0 }//这是一个计数器组件。每次点击按钮，添加1vue.component ('counter '，{template3360' # tmp1 '，data : function(){ returndataobj }，methods: {increment () {this。count } })var VM=new vue({ El 3360 ' # app '，})/script/html。当数据选项是一个函数时，每个实例可以维护一个返回对象的独立副本。

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

补充：让我们看看为什么数据必须是vue组件中的一个函数

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

上面解释了数据不能成为对象的原因。在这里，我们简单谈谈数据是函数的原因。Data是一个通过return返回对象副本的函数，这样每个实例都有自己独立的对象，数据属性值可以更改而不会相互影响。

数据是一个函数的例子：

data:函数的摘要(){return {K1:' V1 '，K2:' V2 '，}}

以上是边肖介绍的Vue组件中的数据必须是函数的原因分析。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！