vue2系列1-mvvm,生命周期,响应式原理,nextTick
个人学习和总结,如有错误欢迎指正
文章目录
一、mvvm和mvc模式
1、mvvm模型
vue是参考了mvvm模型。在vue中,v是view视图展示在浏览器中,m是model数据在data对象中,vm是vue的实例对象,用来链接view和model。
vue实例vm,是一个桥梁把数据和视图链接起来,绑定数据展示在页面里,监听页面的Dom属性的变化,同时修改data的值,实现双向数据绑定。
2、mvc模式
mvc模式中,m是model数据,可以去查询数据库。v是view视图,是浏览器展示的html/js/css。c是controller控制器,数据和视图不直接联系,通过控制器来连接。
控制器就像是一个中介。比例用户点击按钮需要一个电影列表,那么控制器就通知model去查询数据库,数据库查询成功后把返回的结果给到控制器,控制器在通知view去展示电影列表。
二、vue2的生命周期
beforeCreate() {
console.log('app beforeCreate,vue初始化,data还未代理,methods方法还不能用')
},
created() {
console.log('app created,data代理完成,methods可以用了')
},
beforeMount() {
console.log(`app beforeMount,有template,用template模版,没有template用包含el的div作为模版。
如果没有el,生命周期会停止,等到vm.$mount(el)之后会继续。只有el根节点渲染,其它DOM都是虚拟Dom,还未编译。`)
},
mounted() {
console.log('app mounted,虚拟Dom变成真是DOM,模版编译完成,页面挂载完成')
},
beforeUpdate() {
console.log('app beforeUpdate,数据改变的时候,会虚拟dom元素对比,此时数据变了,dom元素还未改变')
},
updated() {
console.log('app updated,数据改变了,dom元素也更新了')
},
beforeDestroy() {
console.log('app beforeDestroy')
},
destroyed() {
console.log('app destroyed')
},
父子组件生命周期加载顺序:
三、响应式原理
响应式原理可以简单理解为分2步。
第一步数据劫持。将data对象利用Object.defineProperty重新加工,设置getter和setter,得到一个新的对象。将新对象重新赋值给data和vue实例_data对象。当数据改变setter执行的时候,vue会进行视图更新。
第二步数据代理。如果没有第二步数据代理,在用到数据时要写成this._data.xxx,为了方便使用,vue对_data里的每一个key,利用Object.defineProperty里的get和set函数,进行了数据代理,这样使用的是this.x即可。
// 第一步数据劫持
let data = { // 传入的data
a: 1,
b:2
}
let newObj = new Observe(data)
function Observe(obj) {
let keys = Object.keys(data)
keys.forEach((k)=>{
Object.defineProperty(this, k, {
get() {
return obj[k]
},
set(value) {
obj[k] = value
console.log('通知vue可以更新dom')
}
})
})
}
let vm = {} // 假设vue对象是个空对象
vm._data = data = newObj
// this._data.a的值就是data的值,但是呢,用的时候每次都有_data不方便,于是就有了第二步数据代理
// 第二步,数据代理。
let keys = vm._data.keys()
keys.forEach((k)=>{
Object.defineProperty(vm, k, {
get() {
return vm._data[k]
// 触发了第一步里的getter
},
set(val) {
vm._data.k = val
// 触发了第一步里的setter,dom更新了
}
})
})
// 这样2步之后,this.a的值取的就是this._data.a也是data.a
// 设置this.a的值,就修改了this._data.a的值,也会修改data.a的值,然后通知更新Dom。
四、数组数据响应式
如果理解了vue的响应式原理,就理解了数组索引值改变的时候,为什么视图不改变了。
Object.defineProperty是对象key的定义,数据的key是索引0,1,2,3…,Object.defineProperty无法对索引进行get和set函数设置。
在vue中,有7种改变数组的方法,可以更新视图。那是因为vue对这7种方法进行了重新编写。当你调用这7种方法的时候,调用的不在是Array原型上的方法,而是vue原型上的方法。
那为什么子组件也能调用这7种方法呢,是因为vue内部有一条原型链。
vue实例的原型对象简称vm,指向Vue函数的property
vue组件的原型对象简称vc,指向VueComponent函数的property。VueComponent函数的property的原型对象,指向了Vue函数的property
这条线也是vue中全局事件总线,能在每个组件都能访问的原因
7个改变数组的方法分别是:
push()
pop()
shift()
unshift()
sort()
reverse()
splice()
五、nextTick
nextTick是数据改变了,要基于更新后Dom进行操作,要在nextTick执行
this.$nextTick(()=>{
//获取最新的dom
})