vue总结系列 ----- 单向数据流

可能很多人都以为vue的双向绑定其实是错误的，vue真正的是单向数据流，vue的双向绑定只不过是语法糖

我的理解是：

model层：data对象中的数据，或后台传过来的数据

view层：在html或模板（template）中{{}}中的值

双向绑定:model的更新会触发view的更新，view的更新会触发model的更新

单向数据流：model的更新会触发view的更新，view的更新与model的更新没关系

vue中当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter,通过虚拟DOM把值传到view上面去（单向数据流）

那么有人要说了明明我记得当我们的HTML上的值发生了改变我们vue中data中的值也会改变？是吗？

下面我们来看下例子

<body>
    <div id="app">{{value}}</div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
       var app = new Vue({
            el:'#app',
            data() {
                return {
                    value : 'zqx'
                }
            },
        })
      
    </script>
</body>

在看再console中的操作

扫描二维码关注公众号，回复： 6224071 查看本文章

看到了吗视图层是发生了改变但是，app.value还是"zqx",说明了什么：view的更新与model的更新没关系，但是你会说我记得有啊，html中的值发生了改变vue中的值就会改变，那是只有在v-model的情况下他是出发了一个事件

v-model不过是一个语法糖，具体示例如下

其实他相当于下面这个：

自从html5开始input每次输入都会触发oninput事件，所以输入时input的内容会绑定到sth中，于是sth的值就被改变，同时会吧sth传给model层

这样的一个过程其实也就是v-model他就是父组件向（在new实例的过程之后，或值发生了改变）子组件传值，而子向父传值确说通过的事件传参数改变，这样的传递方式不可以说是双向绑定，是单向数据流（只有父向子传值），子不可以通过prop把值给父亲

并不可以代表说view发生了改变model就会改变，所以vue是单向数据流

大佬勿喷，毕竟我还是个小白可以指出我的错误，谢谢

vue总结系列 ----- 单向数据流

猜你喜欢