Problem Description
- By
new Vueroot Vue instance created in the data is an object, used to store data, then the component has no data yet? - The component cannot directly access the data in the Vue instance, so the component should have its own place to save the data
- The component object also has a data attribute (it can also have attributes such as methods), but the data attribute of the component must be a function, and this function returns an object, and the data is stored inside the object
So why is the data in the vue component we created a function? Because in this way, each component instance can maintain an independent copy of the [returned object]! !
First of all, the most obvious perception is that if we manually assign the data in the component to an object, an error will be reported when running the code, and the error message prompts us that data should be a function, as shown in the figure:
Second, the reason is that Vue makes each component The objects all return a new object, because if it is the same object, the components will affect each other after multiple uses.
Code demo
Demo 1 : The data of the component is a function that returns a new object
<div id="app">
<!--两个组件实例-->
<cpn></cpn>
<hr>
<cpn></cpn>
</div>
<template id="cpn">
<div>
<h2>计数器：{
{counter}}</h2>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//创建注册一个计数器组件
Vue.component('cpn', {
template: '#cpn',
//组件的data属性是一个函数，函数返回一个对象，该对象内部保存着组件实例的数据
data: function () {
return {
counter: 0
}
},
methods: {
increment() {
this.counter++;
},
decrement() {
this.counter--;
}
}
})
let vm = new Vue({
el: "#app",
data: {
}
});
</script>
The effect of the code above: each component instance maintains its own data object, and does not interfere with each other.
Demo 2: The data of the component is a function that returns a fixed object
Looking at the final result, we can understand why this function is designed to return a new object every time.
<div id="app">
<!--两个组件实例-->
<cpn></cpn>
<hr>
<cpn></cpn>
</div>
<template id="cpn">
<div>
<h2>计数器：{
{counter}}</h2>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//提前定义一个对象
let obj = {
counter: 0
};
Vue.component('cpn', {
template: '#cpn',
data: function () {
//返回提前定义好的obj对象
return obj;
},
methods: {
increment() {
this.counter++;
},
decrement() {
this.counter--;
}
}
})
let vm = new Vue({
el: "#app",
data: {
}
});
</script>
The effect is shown in the figure, the two counters affect each other, which is not the result we want.
