一、Vue-cli构建的项目目录
二、Vue双向数据绑定
原理
Vue遍历data对象中的所有数据，使用Object.defineProperty，将这些属性在getter/setter中处理。当属性被访问时，将所有依赖该数据的函数部分收集起来，当属性被修改时，通知watcher更新依赖该属性的部分。
不涉及视图层，仅在js中简单实现数据动态响应的功能
//思想：在getter中收集依赖，在setter中运行依赖，更新数据
let data={price:6,nums:3,total:0},target=null//目标函数
//创建一个依赖，功能：保存对数据依赖的函数，运行依赖data中数性的函数
class Dep{
constructor(){
this.subscribers=[]//订阅者，订阅对data属性有关联的函数等
}
depend(){//收集关联函数，到订阅者
if(target&&!this.subscribers.includes(target)){
this.subscribers.push(target)//同一个目标，只能订阅一次
}
}
notify(){//数据变化，通知关联的依赖更新，也就是重新调用函数，运行
this.subscribers.forEach(sub=>sub())
}
}
//遍历属性，监控
Object.keys(data).forEach((key)=>{
let internalValue=data[key],dep=new Dep()
Object.defineProperty(data,key,{
//访问属性，会自动调用该函数
get(){
dep.depend()//订阅关联函数
return internalValue
},
//修改属性
set(val){
internalValue=val
dep.notify()//更新依赖
}
})
})
function watcher(fn){
target=fn
target()//target中如果访问或修改data中的属性，那么将会自动调用getter和setter
target=null
}
//调用函数，开启观察
watcher(()=>{
data.total=data.price*data.nums
})
控制台内输入，查看结果：
参考资料：【译】Vue.js是如何做到数据响应的？
三、VirtualDOM与diff
什么是虚拟DOM
在真实的dom中修改其一部分，可能会引起整个dom的波动，牵一发而动全身，开销较大，那么虚拟dom就是为了改变这种大开销而提出来的，他是js对象，它的目的是最小限度的修改真是的dom，来实现这个过程的就是diff算法。
diff算法只会在同层比较，不会跨层级比较，并且每次比较的结果，会立马在真实的dom中体现，不是都比较完了，在一次性改变真实的dom
diff算法步骤
中心思想
遍历newVdom中的节点，找到它在oldVdom中的位置，如果找到了就移动对应（dom：表示真实）dom元素，如果没有找到，就说明是新增加的节点，那么就新建节点插入dom。如果newVdom遍历结束了，oldVdom还有没有处理过的节点，就说明这些节点在newVdom中被删除了，那么删除即可。
vue中的diff
遍历通过在newVdom和oldVdom中设置头指针和尾指针来实现，通过移动指针来比较。处理的节点会标记为已处理（标记的方法有2种，当节点正好在vdom的指针处，移动指针将它排除到未处理列表之外即可，否则就要采用其他方法，Vue的做法是将节点设置为undefined。）
节点的比较有5种情况
1、if (oldVnode === vnode)，他们的引用一致，可以认为没有变化。
2、if(oldVnode.text !== null && vnode.text !== null && oldVnode.text !== vnode.text)，文本节点的比较，需要修改，则会调用Node.textContent = vnode.text。
3、if( oldCh && ch && oldCh !== ch ), 两个节点都有子节点，而且它们不一样，这样我们会调用updateChildren函数比较子节点，这是diff的核心.
4、else if (ch)，只有新的节点有子节点，调用createEle(vnode)，vnode.el已经引用了老的dom节点，createEle函数会在老dom节点上添加子节点。
5、else if (oldCh)，新节点没有子节点，老节点有子节点，直接删除老节点。
diff核心
1、首先新旧头、尾两两比较（new_s:old_s，new_s:old_e，new_e:old_s，new_e:old_e）共四种。
处理了这些场景之后，一方面一些不需要做移动的DOM得到快速处理，另一方面待处理节点变少，缩小了后续操作的处理范围，性能也得到提升
2、如果过程1中，不满足节点相等，又分两种情况：
- 结点设置了key
设key后，会从用key生成的对象oldKeyToIdx中查找匹配的节点，所以为节点设置key可以更高效的利用dom。这也就是v-for中要设置key的原因- 没有设置key
直接创建新节点，删除旧节点。不能复用
下面举个例子，画出diff完整的过程，每一步dom的变化都用不同颜色的线标出。
参考资料：解析vue2.0的diff算法
深入Vue2.x的虚拟DOM diff原理
四、Vuex
1、什么是vuex
vuex是用来管理各个组件的共享数据的，它可以看做是一个仓库，仓库里包含了State、Actions和Mutations，当其中一个组件更改了State中的共享数据时，也会反映在其他组件中。
使用场景：开发大型单页面应用，各个组件之间有很多共享数据。否则可以使用总线。
在vue-cli构建的项目中使用方式
1、新建store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)//使用插件的写法
export default new Vuex.Store({//创建一个仓库，仓库里有State、actions和mutations
state: {
city: '上海'//共享数据
} ,
actions: {
changeCity(ctx, city){
ctx.commit('Xiugaicity', city)//通过commit触发mutations修改数据，‘xiugaicity’是自定义的触发事件
}
},
mutations: {
xiugaicity(state, city){
state.city = city
}
}
})
2、在main.js中引入，在vue实例中添加store
import store from './store/index.js'
var vm=new Vue({
el: '#app',
// router必须有，否则app中的使用router-view会报错
router,
store,
// 这里的App是从import App from './App'这里倒入的变量，可以更改
components: { App },
template: '<App/>'
})
3、在组件中使用，在需要修改城市的地方调用dipatch,触发actions中的行为
this.$store.dispatch('changeCity',city)//'changeCity'自定义事件，与actions中的事件一致
如果只有同步操作，修改state中的数据的时候，可以不dispatch惊动actions，只需要
this.$store.commit('xiugaicity',city),越过actions直接commit触发mutations更改数据。
4、优化代码
//对于state中的属性每次通过this.$store.state.city来获取太麻烦，
//借助mapState,将state中的属性映射为组件的this.city属性，对于mutations等，
//同样有mapMutations ，将this.$store.commit('xiugaicity',city)映射为this.xiugaicity方法
// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'
computed: {
localComputed () { /* ... */ },
// 使用对象展开运算符可以和组件中的其他计算属性并存
...mapState({
city:city
})
}
五、Vue组件通信
1、通过Prop向子组件传递数据
父组件在子组件实例中，通过定义一个属性：a=“message”，希望子组件接受这个信息，子组件通过props来接收这个属性。
<body>
<div id="app">//cnt是要传递的信息的包装属性，count代表的值才是真正的信息
<button-counter :cnt="count"></button-counter>
</div>
</body>
<script>
Vue.component('button-counter',{
data:function(){
return{
count:this.cnt
}
},
props:['cnt'],//接收cnt属性，不要直接改变父组件传递过来的cnt，需要复制一下，否则会报错
template:`<button @click="count++">Click{{count}}</button>`
})
new Vue({
el:'#app',
data:{
count:0
}
})
</script>
props书写方式：
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object }
props特性，对应的属性值不会在dom中显示，非props特性会在dom结构中显示，子组件使用非props传过来的值，会报错，不使用则不会报错。
2、通过事件向父级组件发送消息
子组件通过$emit('event',value)向父级组件抛出事件且传值，父级组件通过@event="函数名或者js表达式"来执行。
1、父组件通过js表达式接受
<body>
<div id="app">
<button-counter @addcount="count+=$event"></button-counter>
<div>count:{{count}}</div>
</div>
</body>
<script>
Vue.component('button-counter',{
data:function(){
return{
}
},
template:`<button @click="$emit('addcount',1)">Click add count</button>`
})
new Vue({
el:'#app',
data:{
count:0
}
})
</script>
2、在methods中处理
<body>
<div id="app">
<button-counter @addcount="addcount"></button-counter>
<div>count:{{count}}</div>
</div>
</body>
<script>
Vue.component('button-counter',{
data:function(){
return{
}
},
template:`<button @click="add">Click add count</button>`,
methods:{
add(){
this.$emit('addcount',1)
}
}
})
new Vue({
el:'#app',
data:{
count:0
},
methods:{
addcount(val){
this.count+=val
}
}
})
</script>
3、使用bus总线，组件之间传值
<body>
<div id="app">
<button-counter :name='bob'></button-counter>
<button-counter :name='ali'></button-counter>
</div>
</body>
<script>
Vue.prototype.bus=new Vue()//使用bus总线，bus本身就是vue实例
Vue.component('button-counter',{
data:function(){
return{
n:this.name
}
},
props:['name'],
template:`<button @click="change">name:{{this.n}}</button>`,
methods:{
change(){
this.bus.$emit('addcount',this.n)
}
},
mounted(){//在各个组件mounted中监听组件传值
var this_=this
this.bus.$on('addcount',function(n){
this_.n=n
})
}
})
new Vue({
el:'#app',
data:{
bob:'bob',
ali:'dfd'
}
})
</script>
4、使用vuex来管理组件的共享数据。
MVC|MVP|MVVM
1、MVC
视图（View）：
用户界面。
控制器（Controller）：业务逻辑
模型（Model）：数据保存
通信方式：
1、View 传送指令到 Controller
2、Controller 完成业务逻辑后，要求 Model 改变状态
3、 Model 将新的数据发送到 View，用户得到反馈
2、MVP
MVP 模式将 Controller 改名为 Presenter，同时改变了通信方向。
1.各部分之间的通信，都是双向的。
- View 与 Model 不发生联系，都通过 Presenter 传递。
- View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。
3、MVVM
MVVM 模式将 Presenter 改名为 ViewModel，基本上与 MVP 模式完全一致。
唯一的区别是，它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。
网友评论