一、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: ' '
})
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来接收这个属性。
//cnt是要传递的信息的包装属性,count代表的值才是真正的信息
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表达式接受
count:{{count}}
2、在methods中处理
count:{{count}}
3、使用bus总线,组件之间传值
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,反之亦然。