原文網址：Vue--為什么data是個函式--實體講解_IT利刃出鞘的博客-CSDN博客
簡介
說明
本文用示例介紹Vue中的data設計為函式的原因，
分別用Vue和原生JavaScript進行展示，
結論
物件是一個參考資料型別，如果data是一個物件會造成所有組件共用一個data，若data是一個函式，每次函式都會回傳一個新的物件，這樣每個組件都會維護一份獨立的物件（data），
根實體物件data可以是物件也可以是函式（根實體是單例），不會產生資料污染情況，
官網
組件基礎 — Vue.js
問題引出
大家都知道，Vue的組件一般是下邊這樣寫的，
可以看到，data是個函式，那么為什么不寫成物件呢？就像這樣：data: { msg: 'Hello'}
<template>
<div class="hello">
hello world
</div>
</template>
<script>
export default {
name: 'Demo',
data () {
return {
msg: 'Hello'
}
}
}
</script>
<style scoped>
</style>
實體：使用Vue創建計數器
例1：data為函式
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>this is title</title>
</head>
<body>
<div id="components-demo">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>Vue.config.productionTip = false</script>
<script>
// 定義一個名為 button-counter 的新組件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">你點擊了 {{ count }} 次</button>'
})
new Vue({
el: '#components-demo'
})
</script>
</body>
</html>
結果：每個計數器單獨計數
例2：data為物件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>this is title</title>
</head>
<body>
<div id="components-demo">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>Vue.config.productionTip = false</script>
<script>
// 定義一個名為 button-counter 的新組件
Vue.component('button-counter', {
data: {
count: 0
},
template: '<button v-on:click="count++">你點擊了 {{ count }} 次</button>'
})
new Vue({
el: '#components-demo'
})
</script>
</body>
</html>
結果：直接報錯
是因為新版的Vue2直接進行了檢測，如果不是函式，就會報錯，
如果是舊版的Vue2，那么結果是：點擊了一個按鈕，所有按鈕都會增加次數（它們共享data里的count這個屬性），
實體：原生JS
例1：data為函式
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
</head>
<body>
<div class="container">
這是個Demo
</div>
<script>
function MyComponent() {
this.data = this.data();
}
MyComponent.prototype.data = function() {
return {
age: 12
}
};
let user1 = new MyComponent();
let user2 = new MyComponent();
console.log(user1.data === user2.data) // false
user1.data = {age: 13};
console.log('user1的age：' + user1.data.age); //user1的age：13
console.log('user2的age：' + user2.data.age); //user2的age：12
</script>
</body>
</html>
結果：輸出的結果不同
例2：data為物件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
</head>
<body>
<div class="container">
這是個Demo
</div>
<script>
function MyComponent() {
}
MyComponent.prototype.data = {
age: 12
}
let user1 = new MyComponent();
let user2 = new MyComponent();
console.log(user1.data === user2.data) // false
user1.data = {age: 13};
console.log('user1的age：' + user1.data.age); //user1的age：13
console.log('user2的age：' + user2.data.age); //user2的age：12
</script>
</body>
</html>
結果：輸出的結果相同
其他網址
Vue 組件 data 為什么必須是函式(分析原始碼，找到答案)_Jioho的博客-CSDN博客
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/404377.html
標籤：其他