关于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