关于vue.js的部分总结

1.MVVM和MVC的区别:    MVVM:是Model-View-ViewModel的简写,即模型-视图-视图模型    模型:后端传递的数据    试图:所看到的页面    视图模型:mvvm模式的核心,它是链接view和model的桥梁。    两个实现方向:        1)模型===》视图:后端传递的数据转化成所看到的页面,实现方式(数据绑定)        2)视图===》模型:即将所看到的页面转化成后端的数据,实现的方式是(DOM 事件监听)    MVC:MVC是Model-View-Controller的简写,即模型-视图-控制器    controller指的是页面业务逻辑,使用MVC的目的就是将M和V代码分离    使用MVVM模式有几大好处:           1). 低耦合。View能够独立于Model变化和修改,一个ViewModel能够绑定到不一样的View上,当View变化的时候Model能够不变,当Model变化的时候View也能够不变。          2). 可重用性。能够把一些视图的逻辑放在ViewModel里面,让不少View重用这段视图逻辑。          3). 独立开发。开发人员能够专一与业务逻辑和数据的开发(ViewModel)。设计人员能够专一于界面(View)的设计。          4). 可测试性。能够针对ViewModel来对界面(View)进行测试2.vue的生命周期    八个:建立前、建立后、载入前、载入后、更新前、更新后、销毁前、销毁后    生命周期的做用:让咱们在控制整个Vue实例的过程时更容易造成好的逻辑    DOM 渲染在 载入后(mounted) 中就已经完成了。3.vue实现双向绑定原理    vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,经过Object.defineProperty()    来劫持各个属性的setter,getter,在数据变更时发布消息给订阅者,触发相应监听回调。4.Vue组件间的参数传递    1)父组件与子组件传值        父===》子:子组件经过props方法接受数据;        子===》父:子组件经过$emit方法传递参数,触发父组件event    2)非父子组件间的数据传递,兄弟组件传值        eventBus,就是建立一个事件中心,至关于中转站,能够用它来传递事件和接收事件        VUEX项目较大时5.Vue与React的区别6.vue路由的钩子函数    首页能够控制导航跳转,beforeEach,afterEach等,通常用于页面title的修改。    一些须要登陆才能调整页面的重定向功能。    beforeEach主要有3个参数to、from、next    to:route即将进入的目标路由对象    from:route当前导航正要离开的路由    next:function必定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。能够控制网页的跳转。    全局导航钩子:    router.beforeEach(to, from, next),    router.beforeResolve(to, from, next),    router.afterEach(to, from ,next)    组件内钩子:    beforeRouteEnter,    beforeRouteUpdate,    beforeRouteLeave    单独路由独享组件:    beforeEnter7.vuex是什么?怎么使用?哪一种功能场景使用它?    只用来读取的状态集中放在store中; 改变状态的方式是提交mutations,这是个同步的事物; 异步逻辑应该封装在action中。    在main.js引入store,注入。新建了一个目录store,….. export 。    场景有:单页应用中,组件之间的状态、音乐播放、登陆状态、加入购物车    vuex 的mutation和action的特性是什么?有什么区别?        mutation用于修改state的数据,是同步的。        action 相似于 muation, 不一样在于:action 提交的是 mutation,而不是直接变动状态        action 能够包含任意异步操做8.css只在当前组件起做用    在style标签中写入scoped便可:<style scoped></style>9.v-if 和 v-show 区别    v-if按照条件是否渲染,v-show是display的block或none    v-show的值不管为true或false,元素都会存在与html代码中,而只有当v-if的值为true,元素才会存在HTML中    v-show指令只是设置了元素css的style值10.$route和$router的区别    $route是“路由信息对象”,包括path,params,hash,query,fullPath,matched,name等路由信息参数    $router是“路由实例”对象包括了路由的跳转方法,钩子函数等11.vue.js的两个核心是什么?vue几种经常使用的指令?    数据驱动、组件系统    指令:v-for、v-if、v-bind、v-on、v-show、v-else12.vue经常使用的修饰符?    prevent:提交事件再也不重载页面    stop:阻止事件冒泡    self:当事件发生在该元素自己而不是子元素的时候会触发    capture:事件侦听,事件发生的时候会调用13.对keep-alive的了解    keep-alive是 Vue 内置的一个组件,可使被包含的组件保留状态,或避免从新渲染。    keep-alive加入了两个属性:include(包含的组件缓存) 与 exclude(排除的组件不缓存,优先级大于include)        <keep-alive include='include_components' exclude='exclude_components'>            <component>                 <!-- 该组件是否缓存取决于include和exclude属性 -->            </component>        </keep-alive>    参数解释:    include - 字符串或正则表达式,只有名称匹配的组件会被缓存    exclude - 字符串或正则表达式,任何名称匹配的组件都不会被缓存    include 和 exclude 的属性容许组件有条件地缓存。两者均可以用“,”分隔字符串、正则表达式、数组。当使用正则或者是数组时,要记得使用v-bind 。13.vue.js是什么?    是一套构建用户界面的 渐进式框架。与其余重量级框架不一样的是,Vue 采用自底向上增量开发的设计。    Vue 的核心库只关注视图层,而且很是容易学习,很是容易与其它库或已有项目整合。另外一方面,    Vue 彻底有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。    Vue.js 的目标是经过尽量简单的 API 实现响应的数据绑定和组合的视图组件14.vue.js特性    MVVM、组件化、指令系统、支持虚拟DOM    虚拟dom:虚拟DOM是用Object来表明一颗节点,这个Object叫作VNode,而后使用两个VNode进行对比,根据对比后的结果修改真实DOM。             每次渲染都会生成一个新的VNode,而后和上一次渲染时用的VNode进行对比。而后将这一次新生成的VNode缓存,用来进行下一次对比。    虚拟dom的缺点:    1. 代码更多,体积更大    2. 内存占用增大    3. 小量的单一的dom修改使用虚拟dom成本反而更高,不如直接修改真实dom快15.vue.js的特色    简洁:页面由HTML模板+Json数据+Vue实例组成    数据驱动:自动计算属性和追踪依赖的模板表达式    组件化:用可复用、解耦的组件来构造页面    轻量:代码量小,不依赖其余库    快速:精确有效批量DOM更新    模板友好:可经过npm,bower等多种方式安装,很容易融入16.Vue 项目时为何要在组件中写 key,其做用是什么?    在开发过程当中,咱们须要保证某个元素的 key 在其同级元素中具备惟一性。    在 Diff 算法中 会借助元素的 Key 值来判断该元素是新近建立的仍是被移动而来的元素,    从而减小没必要要的元素重渲染。17.computed 和 watched 的区别:   computed 是计算属性,依赖其余属性计算值,而且 computed 的值有缓存,只有当计算值变化才会返回内容。   watch 监听到值的变化就会执行回调,在回调中能够进行一些逻辑操做。18.axios是什么?怎么使用?描述使用它实现登陆功能的流程?   请求后台资源的模块。npm install axios -S装好,而后发送的是跨域,需在配置文件中config/index.js进行设置。   后台若是是Tp5则定义一个资源路由。js中使用import进来,而后.get或.post。返回在.then函数中若是成功,   失败则是在.catch函数中
相关文章
相关标签/搜索