Vue知识点总结

1.Vue生命周期

vue生命周期图示
》》在beforeCreate 和Created之间,进行初始化事件,进行数据的观测。此时还没有el选项
》》在Created钩子函数和beforeMount这一阶段发生的事情就比较多了。
首先 会判断对象是否有el选项,如果有就继续编译,如果没有则停止编译,也就意味着生命周期停止,直到在该实例上调用vm.$mount(el)

template参数选项对生命周期的影响
  1. 如果vue实例对象中有template参数选项,则将其作为模板编译成render函数。
  2. 如果没有template选项,则将外部HTML作为模板编译。
  3. template中的模板优先级高于外部HTML的优先级
  4. 在vue对象中还有一个render函数,它是以create element作为参数,然后做渲染操作。render函数的优先级最高

》》beforeMount和mounted钩子函数之间 此时是给vue实例对象添加$el 成员,并且替换掉挂载的Dom元素。
》》在mounted之前还是通过{{message}}进行占位,在mounted之后就发生了变化。
》》beforeUpdate和update之间
当vue发现data中的数据发生了改变,会触发对应组件的重新渲染,先后调用beforeUpdate和updated钩子函数。
》》beforeDestroy和destroyed钩子函数
beforeDestroy在实例销毁之前调用,在这一步,实例仍然可用
destroyed在vue实例销毁之后调用。调用后,vue实例指示的所有东西都会解绑,所有的事件监听器会被移除,所有的子实例也会被销毁。
综上:
第一次页面加载会触发哪几个钩子?
beforeCreated 、created 、 beforeMount、mounted
DOM渲染在mounted中就已经完成
生命周期钩子的一些使用方法:
  beforecreate : 可以在这加个loading事件,在加载实例时触发
  created : 初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用
  mounted : 挂载元素,获取到DOM节点 updated : 如果对数据统一处理,在这里写上相应函数
  beforeDestroy : 可以做一个确认停止事件的确认框 nextTick : 更新数据后立即操作dom

2.vue双向数据绑定原理

  vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。
这里写图片描述
  具体步骤:
  第一步:需要 observe 的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter 和 getter 这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化
  第二步:compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图
  第三步:Watcher订阅者是Observer和Compile之间通信的桥梁,主要做的事情是:

   1、在自身实例化时往属性订阅器(dep)里面添加自己
   2、自身必须有一个update()方法
  3、待属性变动dep.notice()通知时,能调用自身的 update() 方法,并触发Compile中
  绑定的回调,则功成身退。

  第四步:MVVM作为数据绑定的入口,整合Observer、Compile和Watcher三者,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据model变更的双向绑定效果。
  参考链接

3.MVVM

MVVM是Model-View-ViewModel的缩写,他是一种基于前端开发的架构模式,其核心是提供对View和View Model的双向数据绑定,这使得ViewModel的状态改变可以自动传递给View,即双向数据绑定。
这里写图片描述
而Vue.js是一个提供了MVVM风格的双向数据绑定的JavaScript库,专注于View层。它的核心是MVVM中VM,也就是ViewModel。ViewModel负责连接 View 和 Model,保证视图和数据的一致性,这种轻量级的架构让前端开发更加高效、便捷


未完待续

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值