首先,我们来看这个例子
<!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 父组件向子组件传递 子组件向父组件传递等数据流传递。