快捷導(dǎo)航

vue單向數(shù)據(jù)流的深入講解

更新時(shí)間：2022年07月15日 09:32:34 作者：韜光養(yǎng)晦,厚積薄發(fā)

單向數(shù)據(jù)流方式使用一個(gè)上傳數(shù)據(jù)流和一個(gè)下傳數(shù)據(jù)流進(jìn)行雙向數(shù)據(jù)通信,兩個(gè)數(shù)據(jù)流之間相互獨(dú)立,下面這篇文章主要給大家介紹了關(guān)于vue單向數(shù)據(jù)流的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

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

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

在父?jìng)髯拥那疤嵯?，父組件的數(shù)據(jù)發(fā)生會(huì)通知子組件自動(dòng)更新
子組件內(nèi)部，不能直接修改父組件傳遞過(guò)來(lá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)我們?cè)诟附M件中點(diǎn)擊按鈕時(shí)，會(huì)將父組件中的數(shù)據(jù)進(jìn)行修改，這樣子組件通過(guò)props接收的數(shù)據(jù)也會(huì)隨之改變，這就印證了vue遵循單向數(shù)據(jù)流的第一條原則，在父?jìng)髯拥那疤嵯?，父組件的數(shù)據(jù)發(fā)生變化會(huì)通知子組件自動(dòng)更新

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

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

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

特殊情況

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