热门关键字:
jquery > jquery教程 > html5 > 关于vue.js的部分总结

关于vue.js的部分总结

290
作者:管理员
发布时间:2020/3/16 10:27:30
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=1048

  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

  单独路由独享组件:

  beforeEnter

  7.vuex是什么?怎么使用?哪种功能场景使用它?

  只用来读取的状态集中放在store中;改变状态的方式是提交mutations,这是个同步的事物;异步逻辑应该封装在action中。

  在main.js引入store,注入。新建了一个目录store,…..export。

  场景有:单页应用中,组件之间的状态、音乐播放、登录状态、加入购物车

  vuex的mutation和action的特性是什么?有什么区别?

  mutation用于修改state的数据,是同步的。

  action类似于muation,不同在于:action提交的是mutation,而不是直接变更状态

  action可以包含任意异步操作

  8.css只在当前组件起作用

  在style标签中写入scoped即可:<stylescoped></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-else

  12.vue常用的修饰符?

  prevent:提交事件不再重载页面

  stop:阻止事件冒泡

  self:当事件发生在该元素本身而不是子元素的时候会触发

  capture:事件侦听,事件发生的时候会调用

  13.对keep-alive的了解

  keep-alive是Vue内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。

  keep-alive加入了两个属性:include(包含的组件缓存)与exclude(排除的组件不缓存,优先级大于include)

  <keep-aliveinclude='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是什么?怎么使用?描述使用它实现登录功能的流程?

  请求后台资源的模块。npminstallaxios-S装好,然后发送的是跨域,需在配置文件中config/index.js进行设置。

  后台如果是Tp5则定义一个资源路由。js中使用import进来,然后.get或.post。返回在.then函数中如果成功,

  失败则是在.catch函数中





如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐