关于vue.js的部分总结【黑马web前端】

更新时间:2019年07月26日 10时53分41秒来源:黑马程序员论坛

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即可：<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-else

12.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>
               
         </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函数中

推荐了解热门学科

java培训	Python人工智能	Web前端培训	PHP培训
区块链培训	影视制作培训	C++培训	产品经理培训
UI设计培训	新媒体培训	产品经理培训	Linux运维
大数据培训	智能机器人软件开发

传智播客是一家致力于培养高素质软件开发人才的科技公司，“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来，教学研发团队一直致力于打造精品课程资源，不断在产、学、研3个层面创新自己的执教理念与教学方针，并集中“黑马程序员”的优势力量，针对性地出版了计算机系列教材50多册，制作教学视频数+套，发表各类技术文章数百篇。

传智播客从未停止思考

传智播客副总裁毕向东在2019IT培训行业变革大会提到，“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员，具备多领域、多行业项目经验的人才成为企业用人的首选。”

中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示，“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验，从而多出了更多的项目经验。“为此，传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家，集中研发面向中高级程序员的课程，用以满足企业用人需求，尽快补全IT行业所需的人才缺口。

何为中高级程序员课程?

传智播客进行了定义。中高级程序员课程，是在当前主流的初级程序员课程的基础上，增加多领域多行业的含金量项目，从技术的广度和深度上进行拓展。“我们希望用5年的时间，打造上百个高含金量的项目，覆盖主流的32个行业。”传智播客课程研发总监于洋表示。

黑马程序员热门视频教程【点击播放】

Python入门教程完整版（懂中文就能学会）	零起点打开Java世界的大门
C++\| 匠心之作从0到1入门学编程	PHP\|零基础入门开发者编程核心技术
Web前端入门教程_Web前端html+css+JavaScript	软件测试入门到精通

上海中心

关于vue.js的部分总结【黑马web前端】

相关阅读