组件中的data保存的是自己的数据,但是这个data必须是个函数,然后返回一个对象的形式
<div id="app">
<cpn1></cpn1>
</div>
<template id="cpnC1">
<div>
<h2>{{title}}</h2>
<p>make the world a better place</p>
</div>
</template>
<script>
Vue.component('cpn1', {
template: '#cpnC1',
data() {
return {
title: 'hello world111'
}
}
})
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>
组件中的data为什么必须是一个函数
首先,我们先思考一下下面的代码:
let obj = {
name: 'jason',
age: 18
}
function getObj() {
return obj
}
let obj1 = getObj();
let obj2 = getObj();
let obj3 = getObj();
obj1.name = 'lucy';
console.log(obj2.name); //lucy
console.log(obj3.name); //lucy
这里就有个问题,我们修改了其中一个的name属性,其他的几个也变了,这是因为对象是引用类型,保存的是一个内存的地址,引用的其实都是同一个对象,所以这种方式的话不太行😥,接着看下面的代码:
<script>
function getObj() {
return {
name: 'jason',
age: 18
}
}
let obj1 = getObj();
let obj2 = getObj();
let obj3 = getObj();
obj1.name = 'lucy';
console.log(obj2.name); //jason
console.log(obj3.name); //jason
</script>
拿函数包裹一下返回的话,就能够确保每次都返回的是不同的对象,所以,在Vue的组件中data必须是一个函数,然后返回一个对象的形式,这样才能确保,组件中的数据的独立性
网友评论