简介
- v-model 和 .sync 的实质
- 去双向绑定
- 造轮子的基本思路
- 单页面与多页面下使用 Vue
本课默认你已经看完 Vue 官方文档的「所有内容」，如果没有看完，请尽快看完。
Vue 的双向绑定 v-model
从 Vue 0.x 开始，Vue 就用 v-model 来实现「双向绑定」。
如：
data: {
user: { name: 'frank'}
}
<input v-model="user.name">
能实现以下两个绑定：
- user.name 的变化自动同步到 input.value
- input.value 的变化自动同步到 user.name
但是当 FLUX 单向数据流兴起之后，Vue 的作者重新审视了「双向绑定」，发现「双向绑定」的一些问题之后，就更倾向于「单向绑定」了。v-model 被拆成两部分
data: {
user: { name: 'frank'}
},
<input :value="user.name" @input="user.name = $event">
这样一来，数据的变更权就回到数据拥有者手上了。
用一个 contenteditable 的 bug 来理解单向数据流。
同时为了巩固这一模式，Vue 规定子组件不能修改父组件传给它的 props，一旦发现就会打印出一个警告。
我们以保存用户名来举例说明什么是单向数据流。
可以看出起优点有：
- 数据拥有者清楚地知道数据变化的原因和时机（因为是它自己操作数据的）
- 数据拥有者可以阻止数据变化
这些都是在双向绑定中很难做到的。
.sync 修饰符
<div :selected.sync="x"> 等价于 <div :selected="x" @update:selected="x = $event">
例子：
Vue.component('child',{
props: ['selected'],
template: `
<div>
selected: {{selected}}
<hr>
<button @click="$emit('update:selected',1)">1</button>
<button @click="$emit('update:selected',2)">2</button>
</div>
`
})
var vm = new Vue({
el: '#app',
data:{
value:2
},
template:`
<div>
爸爸
<div style="border: 1px solid red;">
<child :selected="value" @update:selected="selected=$event"></child>
</div>
</div>
`
})
.sync 的作用和 v-model 一模一样，就是用双向绑定的语法糖，实现两个单向绑定。好处同上。
用 Vue 造一个 tabs 轮子
http://js.jirengu.com/xagiq/1/edit?js,output
渐进式的 Vue
Vue 的另一个大特点就是「渐进式」，意思就是你可以渐渐地用 Vue。而 React 几乎做不到这一点。
- 你可以继续操作 DOM
- 你可以很方便地做 SEO
- 你可以局部做单页面
- 你可以整体做单页面
computed V.S methods V.S. watch
- 触发时机
watch: 被 watch 的值变化的时候执行一个函数
methods: getMessage() 出现在视图里的时候，或视图更新的时候调用 getMessage
computed: 两个调试同时满足的时候：一、依赖的属性变化了 二、message 出现在视图里了或视图更新了 - 使用形式
watch 的值需要用 data 承载，本身返回值没有用
methods 的返回值可以直接展示在视图，但是要加括号
computed 不能加括号
其他看文档
v-model不是双向绑定
以前的Vue是双向绑定，但是现在的Vue不是双向绑定。
Vue有两个版本，一个叫runtime版本，是给Node用的，不能操作DOM，一个不是runtime版本，不是给Node用的，可以操作DOM。Node中是没有DOM的，浏览器里面是有DOM的。
-
对于不同版本的解释
- image.png
- JS有很多不同的加载器，requirejs是一种加载器是AMD的，直接在Nodejs中使用的require()是CommonJS的，阿里巴巴发明的一个新语法叫cmd（国外一般不用），ES6还出了一个import语法；
- 以上这些语法都是用来做模块加载的，但是并不知道代码会运行在哪个环境中，这个时候就需要使用UMD，UMD会只适应前面这些语法，UMD是最兼容的语法
- UMD包含完整版和只包含运行版。
- 完整版是运行版+编译器。
-
我们使用v-model绑定一个简单的，发现当我们更改了input中的值之后，下面的值随机发生变化
image.png -
这个表面看上去是双向绑定，但其实并不是，v-model只是做了两个单向绑定罢了；我们在使用model的时候，其实后台做了先将这个input的value绑定到user.name，然后监听input事件，一旦发生变化将user.name同步成内容值
image.png -
我们来看一下为什么是单向绑定的？
- image.png
- 我们加一个input，让input里面的值等于user.name，并监听input里面的变化，当变化了就将user.name更新成input里面的值。
- 我们发现，只要input里面的值变化了，input里面的光标就会跑到最前边
- 当我们在input里面输入一个值的时候，如1，1确实是写入了，但是会触发input事件，即调用user.name = innertext，会更新user.name。当user.name重新变化之后，span就需要重新渲染，就是因为user.name变化了。
- 重新渲染之后有一个缺点是，vue记不住光标的位置，光标会跑到最前边。这也就证明了每次变化之后，都是由父元素重新渲染子元素，这里的父元素就是app
- Vue所谓的双向绑定，实际上是先单向绑定了一个username，再监听input做一个单向的变化绑定，两个单向绑定形成一个双向绑定
-
使用v-model实际上做了两个绑定：
- 让JS的变化同步到DOM
- 让DOM的变化同步到JS
-
我们来看一下这个双向绑定存在的问题：
- 我们有一个界面，这个界面有两个input，有两个人分别在操作两个input，但是这两个input都是使用父元素的user.name
- 当两个人同时操作的时候，快的那个人最终拿到的结果可能不对，而慢的那个人改的起点可能不对。
- 双向绑定存在问题就是数据可能在任何时间被任何人更改，并且更改的时候不会有通知，只能在用的时候才觉得不对。
- 根据墨菲定律，小概率事件必然发生，这个事件一旦发生就会出现BUG
- 双向绑定在没有同级元素互相篡改的时候是ＯＫ的。但是一旦出现这种情况就不可控。
- image.png
-
当时解决的一个方法是：一个数据只允许一个人改，即拥有的时候只有一个人拥有，这个人可以改动，这里的人指的就是组件
- App具有user.name，作为父组件，它只把user.name传给多个需要的组件进行显示，但是这两个组件不准改数据，只能显示数据。
- 如果用户非要在input上面更改，就必须让组件通知数据拥有者，这个数据拥有者再去更改数据，并反馈给组件进行变化。这种变化是所有需要这个数据的组件一起变化。
- image.png
- 单向绑定的好处：
- 数据拥有者清楚地知道数据变化的原因和时机（比如一分钟之内等待有没有变化的，最终只返回一个最终结果）
- 数据拥有者可以阻止数据的变化
双向绑定只有再简单的时候有好处，复杂的时候不要使用双向绑定
现在使用v-model，Vue是通过两个单项绑定类模拟双向绑定的，可以进行拦截
-
父元素那边有一个统一的方法进行更改，叫handler，我们更改了任意input的值之后，另一个input也相应变化。都是通知父元素要进行变化，父元素变化之后，再重新渲染子元素
image.png 上面这种写法其实就是使用v-model，也就是v-model其实实现的就是两个单向绑定，但是这个handler函数是自己内部的，只做了更改操作。如果使用自定的handler，需要将v-model的语法糖解开，使用value绑定以及监听input事件调用handler
除了v-model，Vue没有提供其他双向绑定语法糖
-
我们创建一个子组件，当我们想改变selected的时候，点击按钮，会直接触发click事件，更改props中的selected。但是会报错，因为子组件直接更改了props中的selected；我们的原则是一个数据只能由一个人更改，这个人就是数据的拥有者，但是selected不是子组件拥有的，而是父组件拥有的，只不过通过props传给子组件的
image.png -
我们不应该点击的时候直接更改，应该通知父组件去更改，我们做一个更改之后，发现点击的之后就不会报错了
image.png Vue是更加倾向于单向数据流的，而不是直接由子元素更改父元素传入的值
-
但是一直有人想双向绑定，于是就使用:selected.sync="value"，使用这个就可以看起来直接改了，同时button要触发的事件改成
event"。本质上还是单向绑定的。
image.png Vue保留了双向绑定的能力，但是不推荐这个写法
