開始學vue的時候總是抱着“是什麼，怎麼用”的策略，最近搞了一些項目之後覺得是時候搞下“爲什麼了”
爲什麼在項目中data需要使用return返回數據呢？
大家知道用組件化來寫vue項目,每個.vue都是一個個組件。那什麼是vue中的組件？
官網寫的很易懂——組件就是一個可複用的vue的實例。
這也就意味着如果你的data是一個普通的對象，那麼所有複用這個實例的組件都將引用同一份數據，這就造成了數據污染！
這個時候如果我們將data封裝成一個函數，我們在實例化組件的時候只是調用了這個函數生成的數據副本，這就避免了數據污染。
1.set方法,添加一個屬性和值
set方法還可以爲對象添加屬性和值
<script>
export default {
data(){
return {
obj:{
name:'xiaoming'
}
}
},
methods:{
change(){
this.$set(this.obj,'age',12)
console.log(this.obj);{name:xiaoming,age:12}
}
}
}
</script>
2.Object.assign（ES6語法），添加多個屬性和值
<script>
export default {
data(){
return {
obj:{
name:'xiaoming'
}
}
},
methods:{
change(){
this.obj=Object.assign({},this.obj,{
height:180,
eq:200
})
}
}
}
</script>
爲什麼在大型項目中data需要使用return返回數據呢？答：不使用return包裹的數據會在項目的全局可見，會造成變量污染；使用return包裹後數據中變量只在當前組件中生效，不會影響其他組件。
1
1、在簡單的vue實例中看到的Vue實例中data屬性，如下所示：
let app= newVue({
el:"#app",
data:{
msg:''
},
methods:{
}
})
2、在使用組件化的項目中，如下所示：
export default{
data(){
return {
showLogin:true,
// def_act: '/A_VUE',
msg: 'hello vue',
user:'',
homeContent: false,
}
},
methods:{
}
}
爲什麼vue中的data用return返回
1、爲什麼在項目中data需要使用return返回數據呢？
不使用return包裹的數據會在項目的全局可見，會造成變量污染；使用return包裹後數據中變量只在當前組件中生效，不會影響其他組件。
當一個組件被定義， data 必須聲明爲返回一個初始數據對象的函數，因爲組件可能被用來創建多個實例。如果 data 仍然是一個純粹的對象，則所有的實例將共享引用同一個數據對象！通過提供 data 函數，每次創建一個新實例後，我們能夠調用 data 函數，從而返回初始數據的一個全新副本數據對象。
在簡單的vue實例中看到的Vue實例中data屬性是如下方式展示的：
let app= new****Vue({
el:"#app",
data:{
msg:''
},
methods:{
}
})
在使用組件化的項目中使用的是如下形式：
export default{
data(){
return {
showLogin:true,
// def_act: '/A_VUE',
msg: 'hello vue',
user:'',
homeContent: false,
}
},
methods:{
}
}