双向绑定
简单说明什么是双向绑定：
model（数据）——>（改变更新）view
同时也可以
view（视图）——>（改变更新）model
单向数据流
仅仅
model（数据）——>（改变更新）view
Vue ----双向绑定 or 单向数据流
Vue是单向数据流，不是双向绑定
Vue的双向绑定不过是语法糖
Object.defineProperty是用来做响应式更新的，跟双向绑定没得关系
常规的事件好理解，比如说
<template>
<div>
<PersonalInfo
:phone="phone"
:zip-code="zipCode"
@change="(val)=>{phone=val}"
@changes="(val)=>{zipCode=val}"
/>
phone： {{ phone}}
<br />
zipCode： {{ zipCode }}
</div>
</template>
<script>
import PersonalInfo from "./components/PersonalInfo";
export default {
components: {
PersonalInfo
},
data() {
return {
phone: "12",
zipCode: "123"
};
}
};
</script>
v-model的扩展就是类似如上
那么子组件代码就是修改数据
<template>
<div>
<input
:value="phone"
@input="handlePhoneChange"
/>
<input
:value="zipCode"
@input="handleZipCodeChange"
/>
</div>
</template>
<script>
export default {
props:['phone','zip-code'],
methods:{
handlePhoneChange(e){
this.$emit("change", e.target.value)
},
handleZipCodeChange(e){
this.$emit("changes", e.target.value)
}
}
}
</script>
<style>
</style>
说白了就是v-model就相当于 ：phone=“phone”属性绑定 以及@change的事件，代码看不懂就算了
那么这里也还有一个语法糖，.sync修饰符
这个也简单，就是内置扩展 emmmmm 看代码
<template>
<div>
<PersonalInfo :phone.sync="phone" :zip-code.sync="zipCode" />
phone： {{ phone}}
<br />
zipCode： {{ zipCode }}
</div>
</template>
<script>
import PersonalInfo from "./components/PersonalInfo";
export default {
components: {
PersonalInfo
},
data() {
return {
phone: "12",
zipCode: "123"
};
}
};
</script>
那其实这里相当于两行
：phone.sync=“phone” == ：phone=“phone” @update：phone=“（val）=>（phone=val）”
那么子组件代码就是这样
<template>
<div>
<input
:value="phone"
@input="handlePhoneChange"
/>
<input
:value="zipCode"
@input="handleZipCodeChange"
/>
</div>
</template>
<script>
export default {
props:['phone','zip-code'],
methods:{
handlePhoneChange(e){
this.$emit("update:phone", e.target.value)
},
handleZipCodeChange(e){
this.$emit("update:zipCode", e.target.value)
}
}
}
</script>
<style>
</style>
好了，万恶的语法糖！！！
弱弱的声明：如果你认为v-model是通过Object.defineProperty更新的，请不要喷我
VDOM（虚拟DOM） Key
（并没有作图）这块建议自己百度吧，VDOM啊 Diff算法啊等等，接下来全是文字描述，尽量写懂吧，这块内容其实挺多挺复杂
Vue中，我们的事件不再直接操作DOM，事件改变State，然后通过Vue的底层去映射到真实DOM上
Virtual DOM
state+template=====>类似真实DOM的VDOM树
那么在更新VDOM树的时候（Virtual DOM Diff），它只比对同层级的节点
比如说一个节点是 A { B：{C} , B：{C} }，更新后的状态是 A1 { B1：{C1} , B1：{C1} }
（如果懵逼画个树状图吧自己）
A只跟A1比较，下面的不管，B也只是跟同级比较，让他趋于一样（当然如果有key就不一样，待会说），比如说
现在 第一级up大哥 A，下面三个小弟 B C D（脑补一下吧），C下面还有两个小弟 E F，更新之后现在是 A 下面 C D B，E F小弟还在C下面，那算法只需要移动原来的B C D位置就可以了。
此时换个：A，下面三个小弟 B C D，其中，C下面还有连个小弟 E F，现在更新后的状态是，A 下面 只剩下 BD， 同时 C跟下面的E F 小弟 变成了 B的小弟，也就是 B是D的爸爸，B是 E F的爷爷
那么这个操作就不是移动了，而是删除创建（虽然C没有改变，注意上面的场景C是存在的，所以当时E F 并没有删除）
首先算法算到第二层的时候，它发现 C 已经没有了，直接凶残的就给它删了，不存在移动这种事情；然而当它算到第三级也就是 E F的时候，也是重新创建了节点，并没有移动
好，下一个场景，此时还是 A带着下面三个小弟 B C D,C下面有两个小弟 E F，然而更新后的A不变，下面是 B G D，原来的C变成了G，C下面的EF 不变，还是G的小弟，这种情况怎么算呢？那么还是同级比较，在第二级发现C不在了，直接删除，那么E F 也跟着C删除了，因此后面的G下面的 E F 也是重新新建的
又一个场景，上面的场景下面的节点都是不一样的，这回来个一样的（可以理解为v-for生成的），现在大哥A下面有三个相同节点的小弟（属性或者哪里不一样）B1，B2, B3，B2下面存在E F小弟；更新后就是 A下面的 B2 , B1 ,B3，并且B2下面的小弟不变;（此时无key）那么首先算法它只是一个更新操作，就是把B1更新成了B2，B2更新成了B1，那么下面的E F节点很显然，又是新建的（已经删除了）。（如果有key的话）那么这种时候就跟第一个场景一样，三个节点就分开了，就是一个移动，这就是Key的作用！你可以理解为key将相同的节点区分开了不同的节点
就好比如下
A 下面 B1 B2 B3 更新后为 A B1 B4 B2 B3 如果没有key，就是前面的B2 更新成B4 ，B3更新成B2 新建B3，然而有key的话，就可以理解为 A 下面的 B C D，更新后为 A 下面 B G C D，就是加个G而已
（很笼统的概念，百度百度吧~~~）
网友评论