首先,我們來看這個例子
<!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 父組件向子組件傳遞 子組件向父組件傳遞等數據流傳遞。