脚本宝典收集整理的这篇文章主要介绍了Vue 成长之路(一),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
一、什么是 Vue ?
首先,Vue 是一个 MVVM 框架,M -- 模型,就是用来定义驱动的数据,V -- 视图,是经过数据改变后的 htML,VM -- 框架视图,就是用来实现双向绑定的中间桥梁。Vue.js 是采用数据劫持结合发布者-订阅者模式的方法,通过 Object.definePropety() 来接吃个够属性的 setter、getter,在数据变动时发布消息给订阅者,出发相应的监听回调。
二、Vue 的生命周期
创建前:beforeCreate
创建后:created
载入前:beforemounte
载入后:mounted
更新前:beforeUpdate
更新后:updated
销毁前:beforedestory
销毁后:destroyed
三、Vue 双向数据绑定原理
对需要 Observer 的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter 和
getter。这样的话,给这个对象的某个值赋值,就会触发 setter,那么就能监听到数据变化。
说明:
* Observer 的数据对象:写在 data() 里面用 return 包裹的数据。
* data() 里面的数据使用 return 包裹,因为使用 return 包裹后数据中变量只在当前的组建生效,不会影响其他组件;不使用 return包裹的数据会在项目的全局可见,会造成全局污染。
* 如果 data 中的数据为对象,则使用 walk 遍历 data 上每个 key,对每个 key 调用 defineRective 来获取该 key 的 set/get 控制权。[defineRective: 设置对象的 key 属性,由watcher 的实例对象进行 get 操作,此时 watcher 的实例对象将被自动添加到 Dep 实例的依赖数组中。在外部操作出发set 时,将通过 Dep 实例的 notify 来通知所有依赖的 watcher 进行更新。]
* 如果 data 中的数据是数组,就使用 ObserverArray 遍历 data,对 data 中的每一个元素调用 Observer 分别进行观察。
Watcher订阅者是Observer和Compile之间通信的桥梁,主要做的事情是:
四、Vue 初始化工作
1.初始化各方法执行顺序
initLifeCycle(vm) -> initEvents(vm) -> callHook(vm, 'beforeCreated') -> initProps(vm) -> initMethods(vm) -> initData(vm) -> initComputed(vm) -> initWatch(vm) -> callHook(vm, 'created') -> initRender(vm)
2.vue生成实例的过程
五、Vue 自定义指令
1.格式
全局:
Vue.directive('directiveName', {
inserted: function(el) {
...
},
...
})
局部:
directives: {
inserted: function(el) {
...
},
...
}
2.自定义指令对象的钩子函数(均为可选)
3.钩子函数的参数
binding: 一个对象,包含以下属性
* name - 指令名,不含前缀 v-
* value - 指令的绑定值
* oldValue - 指令绑定的前一个值
* exPression - 字符串形式的指令表达式
* arg - 传给指令的参数
* modifiers - 一个包含修饰符的对象
六、Vue 响应数据变化的几种方法
1.methods: 每次获取都会重新计算求值
2.COMputed(计算属性,有缓存): 基于数据依赖进行缓存,只有当数据变化时,才会重新求值。(计算属性只有 getter,可以在需要的时候自己设定 setter)。computed 擅长处理的情景:一个数据受多个数据影响。
3.watch: 当需要在数据变化时执行异步操作或者消耗较大的操作时,比较有效。watch 擅长处理的情景:一个数据影响多个数据。
4.v-model: 基于数据双向绑定(对于 v-for 循环列表中的项,需要使用键值)
eg(4):
<div v-for="(item, index) in list" :key="index">
<input v-model="list[index]" />
</div>
以上是脚本宝典为你收集整理的Vue 成长之路(一)全部内容,希望文章能够帮你解决Vue 成长之路(一)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。