vue單向數(shù)據(jù)流

在vue中需要遵循單向數(shù)據(jù)流原則

• 在父傳子的前提下，父組件的數(shù)據(jù)發(fā)生會通知子組件自動更新
• 子組件內(nèi)部，不能直接修改父組件傳遞過來的props => props是只讀的

代碼示例

父組件代碼：

<template>
  <div style="border: 1px solid #000">
    <h1>我是父組件</h1>
    <Son :info="info" :person="person"></Son>
    <button @click="fn">修改數(shù)據(jù)（父）</button>
  </div>
</template>

<script>
import Son from "./Son.vue";
export default {
  data() {
    return {
      info: "我是父組件中的數(shù)據(jù)",
      person: ["張三", "李四", "趙六"],
    };
  },
  components: {
    Son,
  },
  methods: {
    fn() {
      this.info = "我是父組件中點(diǎn)擊修改后的數(shù)據(jù)";
    },
  },
};
</script>

<style scoped>
</style>

子組件代碼：

<template>
  <div>
    <h2>我是子組件</h2>
    <p>{{ info }}</p>
    <p v-for="(item, index) in person" :key="index">{{ item }}</p>
    <button @click="fn">修改數(shù)據(jù)（子）</button>
  </div>
</template>

<script>
export default {
  props: ["info", "person"],
  methods: {
    fn() {
      // 修改基本數(shù)據(jù)類型
      this.info = this.info + ",我現(xiàn)在被傳遞到子組件中";
      // 修改引用數(shù)據(jù)類型
      // this.person.push("韓七");
    },
  },
};
</script>

<style scoped>
div {
  border: 1px solid red;
  margin: 10px;
}
</style>

當(dāng)我們在父組件中點(diǎn)擊按鈕時，會將父組件中的數(shù)據(jù)進(jìn)行修改，這樣子組件通過props接收的數(shù)據(jù)也會隨之改變，這就印證了vue遵循單向數(shù)據(jù)流的第一條原則，在父傳子的前提下，父組件的數(shù)據(jù)發(fā)生變化會通知子組件自動更新

當(dāng)我們在子組件中點(diǎn)擊按鈕時，我們將父組件傳遞過來的數(shù)據(jù)進(jìn)行修改，此時在子組件中數(shù)據(jù)得到修改，但是會報(bào)錯，并且，父組件中的數(shù)據(jù)不會發(fā)生改變

然后我們用vue調(diào)試工具再來看一下，子組件中的數(shù)據(jù)發(fā)生變化，父組件的數(shù)據(jù)有沒有跟著一起變化

從上面可見知道，父組件的數(shù)據(jù)發(fā)生變化會通知子組件自動更新，但是修改子組件通過props從父組件接收的數(shù)據(jù)時，它不會通知父組件自動更新，

特殊情況

上面講述的是將基本數(shù)據(jù)類型改變會報(bào)錯，那么將引用數(shù)據(jù)類型改變會不會報(bào)錯呢，答案是否定的，如果父組件傳給子組件的是一個引用數(shù)據(jù)類型，這里用數(shù)組為例，子組件修改數(shù)組內(nèi)的元素，是不會報(bào)錯的，數(shù)組是引用類型，互相更新，但不能改變引用地址，下面看一下效果

先將子組件內(nèi)的點(diǎn)擊事件處理函數(shù)要改變的數(shù)據(jù)從基本數(shù)據(jù)類型改為引用數(shù)據(jù)類型，然后點(diǎn)擊按鈕來看一下父組件和子組件中的數(shù)據(jù)有沒有同步更新

這樣就驗(yàn)證了數(shù)據(jù)需要遵循單向數(shù)據(jù)流原則的第二點(diǎn)（特殊情況除外），通過子組件直接修改父組件傳遞過來的props，這樣是非常不建議的，他會影響后續(xù)不同狀態(tài)下數(shù)據(jù)。

注意點(diǎn):

在vue中需要遵循單向數(shù)據(jù)流原則

1. 在父傳子的前提下，父組件的數(shù)據(jù)發(fā)生會通知子組件自動更新
2. 子組件內(nèi)部，不能直接修改父組件傳遞過來的props => props是只讀的

最后說明下 : 父組件傳給子組件的是一個對象，子組件修改對象的屬性，是不會報(bào)錯的，對象是引用類型, 互相更新；但不能改變引用地址.

總結(jié)

到此這篇關(guān)于vue單向數(shù)據(jù)流的文章就介紹到這了,更多相關(guān)vue單向數(shù)據(jù)流內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論