可能很多人都以为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中的操作
看到了吗视图层是发生了改变但是,app.value还是"zqx",说明了什么:view的更新与model的更新没关系,但是你会说我记得有啊,html中的值发生了改变vue中的值就会改变,那是只有在v-model的情况下他是出发了一个事件
v-model不过是一个语法糖,具体示例如下
<input v-model="sth">
其实他相当于下面这个:
<input v-bind:value="sth" v-on:input="sth=$event.target.value">
自从html5开始input每次输入都会触发oninput事件,所以输入时input的内容会绑定到sth中,于是sth的值就被改变,同时会吧sth传给model层
这样的一个过程其实也就是v-model他就是父组件向(在new实例的过程之后,或值发生了改变)子组件传值,而子向父传值确说通过的事件传参数改变,这样的传递方式不可以说是双向绑定,是单向数据流(只有父向子传值),子不可以通过prop把值给父亲
并不可以代表说view发生了改变model就会改变,所以vue是单向数据流
大佬勿喷,毕竟我还是个小白可以指出我的错误,谢谢