阅读 136

关于vue那点单向数据流和双向数据流

关于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  父组件向子组件传递  子组件向父组件传递等数据流传递。


文章分类
后端
文章标签
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐