30-vue元件的data為什麼是函式

阿新 • • 發佈：2021-01-07

技術標籤：vue vue

想要理解vue元件的data為什麼是函式時，我們先了解下js的物件

1,看如下程式碼

  function abc() {
    return {
      name : 'zhangsan',
      age : 12
    }
  }
  let obj1 = abc()
  let obj2 = abc()
  let obj3 = abc()
  
  obj1.name = 'kobe'
  console.log(obj2);
  console.log(obj3);

看結果圖：

我們會發現，obj1,obj2,obj3物件裡的每個屬性是獨立的

在這裡插入圖片描述

原因是return 是儲存的物件的記憶體地址。obj1佔用一個獨立的記憶體地址（假設為0x11），obj2,obj3也是如此。各自佔用自己的記憶體地址。當obj1.name='kobe’時，是對0x11記憶體地址裡的name屬性進行了修改，但未修改obj2,obj3的記憶體地址裡對應name的值。此程式碼是函式執行一次，建立一個新的記憶體空間

2,看以下程式碼

 const obj = {
    name: 'sc',
    age: 18
  }
  
  function abc() {
    return obj;
  }
  let obj1 = abc()
  let obj2 = abc()
  let obj3 = abc()
  
  obj1.name = 'kobe'
  console.log(obj2);
  console.log(obj3);

結果圖：

在這裡插入圖片描述

我們會發現會跟著改。因為const obj時，就建立了一個物件。而沒執行函式，return obj的記憶體地址。他會在記憶體裡找有沒有該地址，有就直接返回。

為什麼vue元件的data為什麼是函式

就是如上述，防止出現使用到相同物件。最好的例項證明是：計數器，購物車的+-

這是如果使用單個物件引起的連環問題

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</ 
title>
</head>
<body>

<!--元件例項物件-->
<div id="app">
  <cpn></cpn>
  <cpn></cpn>
  <cpn></cpn>
</div>

<template id="cpn">
  <div>
    <h2>當前計數: {{counter}}</h2>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  // 1.註冊元件
  const obj = {
    counter: 0
  }
  Vue.component('cpn', {
    template: '#cpn',
    // data() {
    //   return {
    //     counter: 0
    //   }
    // },
    data() {
      return obj
    },
    methods: {
      increment() {
        this.counter++
      },
      decrement() {
        this.counter--
      }
    }
  })

  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>

</body>
</html>

正確使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<!--元件例項物件-->
<div id="app">
  <cpn></cpn>
  <cpn></cpn>
  <cpn></cpn>
</div>

<template id="cpn">
  <div>
    <h2>當前計數: {{counter}}</h2>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  // 1.註冊元件
  Vue.component('cpn', {
    template: '#cpn',
     data() {
       return {
         counter: 0
       }
     },
    methods: {
      increment() {
        this.counter++
      },
      decrement() {
        this.counter--
      }
    }
  })

  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>

</body>
</html>