一:Vue是什么?
Vue是一套用于构建用户界面的渐进式框架,Vue 被设计为可以自底向上逐层应用,Vue的核心是只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
二、渐进式框架含义?
主张最少。
每个框架都会不可避免有一些自己的特点,从而对使用者有一定的要求。这些要求就是主张,主张有强有弱,它的强势程度影响了在业务开发中的使用方式。
比如Angular:它的两个版本都是强主张,如果你只用这个框架,就必须接受以下东西:必须使用它的模块机制、依赖注入、特殊形式定义组件(这个是每个视图框架都有的,难以避免),so Angular是带有比较强的排它性,如果你的应用不是从头开始,而要不断考虑是否和其他东西集成,这些主张会带来一定的困扰
比如React:它有一定程度的主张,主要是函数式编程的理念。比如说你要知道什么是副作用,什么是纯函数,如何隔离副作用。它的侵入性看似没有Angular那么强,主要因为是它是软性侵入。
而vue:它是渐进的,没有强主张,可以在原有的大系统上面,把一两个组件改用它来说实现,当jQuery用,也可以整个用它全家桶开发,当Angular用;还可以用它的视图,搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念,也可以函数式,都可以,它只是个轻量视图而已,只做了自己该做的事,没有做不该做的事,仅此而已。
渐进也可以理解为 提供足够的选择,并且没有很多强制性的要求。使用Vue的时候,并不需要把整个框架的所有东西都用上,可以根据实际情况选择你需要的部分;
如下图所示,vue的体系从内到外依次是声明式渲染(Declarative Rendering)、组件系统(Component System)、客户端路由(Client-side Routing)、大规模状态管理(Large Scale State Management)、构建系统(Build System)。,声明式渲染和组建系统是Vue的核心库所包含内容,而客户端路由、状态管理、构建工具都有专门解决方案。这些解决方案相互独立,你可以在核心的基础上任意选用其他的部件,不一定要全部整合在一起。
三、自底向上逐层应用?
由基层开始做起,把基础的东西写好,再逐层往上添加效果和功能。
四、Vue的两个核心
数据驱动和组件化
五、vue生命周期钩子函数有哪些
beforeCreate,Created( 创建前,后 ),beforeMounted、Mounted(挂载前后),beforeUpdate、Updated(更新前、后),beforeDestory,Destoryed(销毁前、后)
1、beforeCreate:是在在Vue实例初始化之后触发的第一个钩子,在当前阶段,el 和 data 并未初始化,因此无法访问methods, data, computed等上的方法和数据。
beforeCreate(){ console.log(this)=>vue实例对象初始化完成 console.log(this.msg)=>访问data中的数据为undefined console.log(this.getMsg) => 访问methods的方法为undefined }
2、Created:实例创建完成之后被调用,当前阶段已完成数据观测,也就是可以使用数据,更改数据,在这里更改数据不会触发updated函数。可以做一些初始数据的获取,在当前阶段无法与dom进行交互,如果非要想,可以通过vm.$nextTick来访问dom(完成了属性和方法的运算,watch/event事件回调,完成了data 数据的初始化,el没有)
3、beforeMount: 相关的render函数首次被调用(虚拟DOM),实例已完成以下的配置: 编译模板,把data里面的数据和模板生成html,完成了el和data 初始化,注意此时还没有挂载html到页面上。
在这一阶段发生的事情还是比较多的。 首先会判断对象是否有el选项。如果有的话就继续向下编译,如果没有el选项,则停止编译,也就意味着停止了生命周期,直到在该vue实例上调用vm.$mount(el)
然后,我们往下看,template参数选项的有无对生命周期的影响。
(1)如果vue实例对象中有template参数选项,则将其作为模板编译成render函数。
(2)如果没有template选项,则将外部HTML作为模板编译。
(3)可以看到template中的模板优先级要高于outer HTML的优先级。
在vue对象中还有一个render函数,它是以createElement作为参数,然后做渲染操作,而且我们可以直接嵌入JSX,
so =>render函数选项 > template选项 > outer HTML.
new Vue({ el: '#app', render: function(createElement) { return createElement('h1','this is createElement') } })
4、Mounted:也就是模板中的HTML渲染到HTML页面中。真实dom挂载完毕,数据完成双向绑定,可以访问到动漫节点,使用$refs属性对动漫进行操作
在mounted之前h1中还是通过{{message}}进行占位的,因为此时还有挂在到页面上,还是JavaScript中的虚拟DOM形式存在的。在mounted之后可以看到h1中的内容发生了变化。
5、beforeUpdate()
数据更新时调用,发生在虚拟 DOM 重新渲染之前。 你可以在这个钩子中进一步地更改数据,不会造成重渲染。
6、updated()
发生在更新完成之后,当前阶段组件dom一完成更新,你应该避免在此期间更改数据,因为这可能会导致无限循环的更新。
该钩子在服务器端渲染期间不被调用。
7、beforeDestroy()
实例销毁之前调用。在这一步,实例仍然完全可用。可以在这是进行善后的守卫工作,比如清除计时器
8、destroyed()
Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
注意:除了beforeCreate和created钩子之外,其他钩子均在服务器渲染期间不被调用
源码:
function initLifecycle (vm) { //这个函数主要是有父实例的情况下处理vm.$parent和vm.$children这俩个实例属性.其他的就是新增了一些实例属性 var options = vm.$options; // locate first non-abstract parent var parent = options.parent; if (parent && !options.abstract) { while (parent.$options.abstract && parent.$parent) { parent = parent.$parent; } parent.$children.push(vm); } vm.$parent = parent; vm.$root = parent ? parent.$root : vm; vm.$children = []; vm.$refs = {}; vm._watcher = null; vm._inactive = null; vm._directInactive = false; vm._isMounted = false; vm._isDestroyed = false; vm._isBeingDestroyed = false; }
function initEvents (vm) { vm._events = Object.create(null); vm._hasHookEvent = false; // init parent attached events var listeners = vm.$options._parentListeners; if (listeners) { updateComponentListeners(vm, listeners); } }
六、vue 的双向绑定的原理是什么
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。具体实现过程:
我们已经知道实现数据的双向绑定,首先要对数据进行劫持监听,所以我们需要设置一个监听器Observer,用来监听所有属性。如果属性发上变化了,就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个,所以我们需要有一个消息订阅器Dep来专门收集这些订阅者,然后在监听器Observer和订阅者Watcher之间进行统一管理的。接着,我们还需要有一个指令解析器Compile,对每个节点元素进行扫描和解析,将相关指令对应初始化成一个订阅者Watcher,并替换模板数据或者绑定相应的函数,此时当订阅者Watcher接收到相应属性的变化,就会执行对应的更新函数,从而更新视图。因此接下去我们执行以下3个步骤,实现数据的双向绑定:
1.实现一个监听器Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者。
2.实现一个订阅者Watcher,可以收到属性的变化通知并执行相应的函数,从而更新视图。
3.实现一个解析器Compile,可以扫描和解析每个节点的相关指令,并根据初始化模板数据以及初始化相应的订阅器。
流程图如下:
数据劫持:在Vue中其实就是通过Object.defineProperty来劫持对象属性的setter和getter操作,并“种下”一个监听器,当数据发生变化的时候发出通知。
参考:https://blog.csdn.net/weixin_33757609/article/details/92719453
七、MVVM
MVVM是 Model-View-ViewModel缩写,也就是把MVC中的Controller演变成ViewModel。Model层代表数据模型,View代表视图(UI组件),View是Model是view和model的桥梁,数据会绑定到ViewModel层并自动将数据渲染到页面中,视图变化的时候也会通知viewmodel层更新数据