關於vue那點單向數據流和雙向數據流


首先,我們來看這個例子

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <input type="text" v-model="msg">
    <div>hello,{{msg}}</div>
  </div>
  <div id="app1"></div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var vue = new Vue({
      el: '#app',
      data: {
        msg: 'ererere'
      }
    })
    setInterval(() => {
      vue.msg = 'hahah'
    }, 1000);
    new Vue({
      data: {
        msg: '1111'
      }
    }).$mount('#app1')
  </script>
</body>

</html>
使用vue控制台發現,vue是可以在一個頁面構造兩個Vue包裝類的,那么肯定也可以生成兩個實例對象。而解析語法還是根據js的動態解析,如果把下一個Vue實例對象也叫vue,那么改變的就是第二個包裝類的msg了(第一個不變)。先不說vue.msg是怎么改掉data的值的(代理),我們看看頁面中雙向數據流。

 

 綁定的msg 通過界面的輸入更改 也就是視圖里的更改 從而使數據data里的值更改,這種還好辦,但是反而視圖的更改再次回到頁面的更改,比如你看下面那個hello,{{msg}}  也發生了更改,這個我們統稱為雙向數據流,而不是v-model綁定Input框的雙向數據綁定。 是兩個概念,還是有一點區別的。

而單項數據流呢  更多指的是props  $emit  父組件向子組件傳遞  子組件向父組件傳遞等數據流傳遞。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM