Vue实例

  时间:2019-01-11
本文章向大家介绍Vue实例,主要包括Vue实例使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
    Vue是如今前端比较火的javascript MVVM的框架,其主要思想是数据驱动与组件化。


在MVVM框架中,View层和Model层相互之间是没有联系的,通过ViewModel使View和Model之间产生交互。ViewModel是Vue实例的核心,创建Vue实例主要就是创建ViewModel的各个组成部分。
DOM Listener和Data Bindings可以看成数据绑定的两个核心工具。DOM Listener主要监听View层中的DOM元素,当DOM元素发生改变时,Model层中数据也会随之发生改变。Data Bindings主要监听Model层中数据,当数据发生改变时,View层中的DOM元素也会改变。
Vue实例主要包括创建,运行,销毁三个阶段,这期间会发生一系列的时间,这些事件就是Vue的生命周期函数。数据驱动是指当Model中的数据发生改变时,页面上的数据也会随之发生改变。通过Vue实例的生命周期简单的介绍一下数据驱动的实现。

(1)创建阶段:首先通过new Vue()创建一个空的Vue实例。通过Init Events and Lifecycle初始化Vue实例中的默认事件以及生命周期钩子函数,此时会自动执行beforecreate这个生命周期钩子函数,这个函数被执行时data,methods,filter等指令对象还没有被初始化。通过Init injections and reactivity初始化注入和校验,执行created函数时,data,methods等指令对象已经被初始化了。因此如果要调动methods方法或者获取数据,最早只能通过created函数使用。此时初始化阶段结束,进入编译阶段。首先判断是否有“el”这个对象,若没有则停止这个生命周期,知道手动挂载“el”对象。若有则判断是否有template这个对象,如果有,则将这个模板编译到render函数中,render函数的作用是将HTML节点渲染成虚拟DOM。如果没有template这个对象,则将外部HTML作为template进行渲染。在执行beforemount这个钩子函数时,已经通过编译在内存生成了DOM,但是并没有挂载到页面中去。通过create VM.$el and replace “el” with it将内存中的虚拟DOM挂载到真实的页面中去。在执行mounted这个钩子函数时,组建的创建阶段已经完成。
(2)运行阶段:这个阶段主要有两个生命周期钩子函数。这两个钩子函数根据data数据的改变而依次执行。当data数据发生改变时,将执行beforeUpdate,此时data数据是最新的。而页面中的数据还是旧的,这两个数据还没有同步。通过Virtual DOM re-render and patch虚拟DOM的重新渲染。当data数据发生改变时,会在内存中重新渲染出一份虚拟DOM,当虚拟DOM发生改变时,会将该虚拟DOM挂载到页面中去。此时就完成了从data(Model)到页面(View)的操作,即完成了数据驱动。
(3)销毁阶段:在执行beforeDestory钩子函数时,Vue实例还没有真正被销毁,data,methods等选项对象还是可用的。当执行destoryed钩子函数时Vue实例已经被销毁,实例中的一些选项对象已经不可用了。

上一页 下一页

原文地址:http://www.manongjc.com/article/42890.html