实践开发：vue框架重点知识分析

一个VUE项目的主树：

assets文件夹是放静态资源；

components是放组件；

router是定义路由相关的配置;

view视图；

app.vue是一个应用主组件；

main.js是入口文件

 知识点：

1.MVC和MVVM

MVC是Model-View- Controller的简写，分别表示：

Model（数据模型），用于存放数据

View（视图），也就是用户界面

Controller（y业务逻辑）是Model和View的协调者，Controller把Model中的数据拿过来给View使用

关系：用户操作> View (负责接受用户的输入操作)>Controller（业务逻辑处理）>Model（数据持久化）>View（将结果通过View反馈给用户）

缺点：1.所有业务逻辑都在Controller里操作，逻辑复杂且不利于维护，
　　　　　2.大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。
　　　　    3.当 Model 频繁发生变化，需要主动更新到View ；当用户的操作导致Model发生变化，同样需要将变化的数据同步到Model中， 这样的工作不仅繁琐，而且很难维护复杂多变的数据状态。

MVVM是Model-View-ViewModel的简写，分别表示：

　Movel（数据模型）

　    View（视图）
　　ViewModel 是一个同步View 和 Model的对象

核心是双向数据绑定，View和Model之间并没有直接的联系，是通过ViewModel进行交互，View的变动，自动反映在ViewModel上，反之亦然，这样就保证视图和数据的一致性。

2.vue的优点是什么？

·   低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

· 可重用性。一些视图逻辑放在一个ViewModel里面，让很多view重用视图逻辑。

·  独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。

· 可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

3.vue的生命周期

 第一对用于简单的ajax请求，页面初始化。

beforeCreate

 实例对象刚创建，元素DOM和数据都还没有初始化，没有绑定属性。

created

实例对象完成创建，属性已绑定，但DOM未生成，数据data已经初始化完成，方法也已经可以调用，但是DOM为渲染。

第二对马上渲染真实的DOM，获取vnode信息，ajax请求。

beforeMount

组件挂载之前触发，虚拟DOM创建已完成。DOM未完成挂载，数据也初始化完成，但是数据的双向绑定还是显示{{}}，这是因为Vue采用了Virtual DOM（虚拟Dom）技术，先占住了一个坑。

mounted

  组件挂载完成触发，真实DOM完成，数据和DOM都完成挂载，在上一个周期占位的数据把值给渲染进去。一般请求会放在这个地方，因为这边请求改变数据之后刚好能渲染。

  第三对

beforeUpdate

数据更新前触发，diff算法对比之后重新渲染。只要是页面数据改变了都会触发，数据更新之前，页面数据还是原来的数据，当你请求赋值一个数据的时候会执行这个周期，如果没有数据改变不执行。

updated

    组件更新完成，不能更改数据，负责死循环。只要是页面数据改变了都会触发，数据更新完毕，页面的数据是更新完成的。beforeUpdate和updated要谨慎使用，因为页面更新数据的时候都会触发，在这里操作数据很影响性能和容易死循环。

 第四对

beforeDestroy

实例对象销毁之前触发，清除计时器和事件。这个周期是在组件销毁之前执行，在我项目开发中，觉得这个其实有点类似路由钩子beforeRouterLeave,都是在路由离开的时候执行，只不过beforeDestroy无法阻止路由跳转，但是可以做一些路由离开的时候操作，因为这个周期里面还可以使用data和method。比如一个倒计时组件，如果在路由跳转的时候没有清除，这个定时器还是在的，这时候就可以在这个里面清除计时器。

Destroyed

实例对象销毁后触发，剩余DOM空壳。

4.vue双向绑定原理

   Vue数据双向绑定（即数据响应式），是利用了Object.defineProperty()数据劫持重新定义了，对象获取属性值get和设置属性值set的操作来实现的。

        监听器Observer，劫持并监听所有属性，有变动的，就通知订阅者。
        订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。
        解析器Compile，解析每个节点的相关指令，并根据初始化模板data数据以及初始化相应的订阅器。替换数据v-model,  v-on

5.组件的传值

 a.父组件与子组件传值

父组件通过标签上面定义传值  ：eg='data'  父组件中 data(){return {data:'egdata'}}.
   子组件通过props方法接受数据 props:['eg'] ,  在props 中添加了元素之后，就不需要在 data 中再添加变量了.

b.子组件向父组件传递数据
  子组件通过$emit方法传递参数触发事件，在父组件监听事件$on( )

子组件部分:

父组件中：

c.同级传值

1.query或params传参，this.$router.push( )

2.sessionstore传参

6.路由之间跳转

声明式（标签跳转） 编程式（ js跳转）

①.直接修改地址栏中的路由地址    ②通过router-link实现跳转   ③通过js的编程的方式

vue路由两种方式：name和<router-link>中的to传参

<router-link:to = "{name: xxx, params: { key :value }}"> valuestring </router-link>

vue-router利用url传参

7.vue计算属性

   watch：监听属性，监听数的变化，监听对象。

computed：计算属性，对属性业务逻辑的操作，不循环。它对数据处理后，缓存内存里面。方法对任务操作。

8.vuex是什么？怎么使用？哪种功能场景使用它？

vue框架中状态管理，处理组件间的通讯。

使用：在main.js引入store，注入。新建一个目录store，….. export 。

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

main.js:

import store from './store'

new Vue({

el:'#app',

store

})

属性有五种，分别是 State、 Getter、Mutation 、Action、 Module

·  vuex的State特性
           A、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的data
           B、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新
           C、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中

· vuex的Getter特性
           A、getters 可以对State进行计算操作，它就是Store的计算属性
           B、 虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用
           C、 如果一个状态只在一个组件内使用，是可以不用getters

·  vuex的Mutation特性
           Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态；Action 可以包含任意异步操作。

（3）不用Vuex会带来什么问题？

·         可维护性会下降，想修改数据要维护三个地方；

·         可读性会下降，因为一个组件里的数据，根本就看不出来是从哪来的；

·         增加耦合，大量的上传派发，会让耦合性大大增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背。

9.Vue中引入组件的步骤?

1）采用ES6的import ... from ...语法或CommonJS的require()方法引入组件
     2）对组件进行注册,代码如下

1.  // 注册

2.  Vue.component('my-component', {

template: '<div>A custom component!</div>'

})

使用组件<my-component></my-component>

10.vue.cli中怎样使用自定义的组件？

第一步：在components目录新建你的组件文件（smithButton.vue），script一定要export default {

第二步：在需要用的页面（组件）中导入：import smithButton from ‘../components/smithButton.vue’

第三步：注入到vue的子组件的components属性上面,components:{smithButton}

第四步：在template视图view中使用，<smith-button>  </smith-button>
    问题有：smithButton命名，使用的时候则smith-button。

11.vue的虚拟DOM 

Virtual DOM算法，简单总结下包括几个步骤：

1. 用JS对象描述出DOM树的结构，然后在初始化构建中，用这个描述树去构建真正的DOM，并实际展现到页面中
2. 当有数据状态变更时，重新构建一个新的JS的DOM树，通过新旧对比DOM数的变化diff，并记录两棵树差异
3. 把步骤2中对应的差异通过步骤1重新构建真正的DOM，并重新渲染到页面中，这样整个虚拟DOM的操作就完成了，视图也就更新了

12.自定义指令（v-check、v-focus）的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数？

全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。

组件内定义指令：directives

钩子函数：bind（绑定事件触发）、inserted(节点插入的时候触发)、update（组件内相关更新）

钩子函数参数：el、binding

13.怎么定义vue-router的动态路由？怎么获取传过来的动态参数？ 

在router目录下的index.js文件中，对path属性加上/:id。  使用router对象的params.id

14.active-class是哪个组件的属性？嵌套路由怎么定义？

vue-router模块的router-link组件。
   嵌套路由顾名思义就是路由的多层嵌套。 一级路由里面使用children数组配置子路由，就是嵌套路由。

15.为什么避免 v-if 和 v-for 用在一起？

当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中。通过v-if 移动到容器元素，不会再重复遍历列表中的每个值。

16.为什么使用key？

当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。

17.4种vue当中的指令和它的用法

v-if：判断是否隐藏；v-for：数据循环；v-bind:class：绑定一个属性；v-model：实现双向绑定

18.怎么定义vue-router的动态路由以及如何获取传过来的动态参数？

在router目录下的index.js文件中，对path属性加上/:id。使用router对象的params.id。

19.<keep-alive></keep-alive>的作用是什么?

<keep-alive></keep-alive> 包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染。

20.v-show和v-if指令的共同点和不同点

v-show指令是通过修改元素的display的CSS属性让其显示或者隐藏

v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果

21.vue中v-if与v-show的区别以及使用场景

v-if 是通过控制dom节点的存在与否来控制元素的显隐；

v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；

v-if 有更高的切换消耗；

v-show有更高的初始渲染消耗；

v-if切换局部编译/卸载的过程中合适地销毁和重建内部的事件监听和子组件；

v-show只是简单的基于css切换；

场景：如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好

·         v-show指令是通过修改元素的display的CSS属性让其显示或者隐藏

·         v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果

22.vue常用的修饰符

事件修饰符

.stop：用来阻止单击事件的冒泡

.self：表示当前事件发生在元素本身而不是子元素的时候进行触发

.prevent：表示提交事件不再进行重新加载

.capture：表示事件倾听，在事件发生的时候进行调用

表单修饰符（重点）：

.lazy - 取代 input 监听 change 事件

.number - 输入字符串转为有效的数字

.trim - 输入首尾空格过滤

按键修饰符：

.enter

.tab

.delete

鼠标按键修饰符

.left

.right

.middle

23.axios是什么？怎么使用？它实现的登录流程？

登陆流程为：1、提交登陆表单，拿到后台返回的数据 2、将数据存入vuex

登录状态token,和用户名user存在sessionStorage里，以便组件使用,如果token为true表示用户已经登陆

axios是基于promise（诺言）用于浏览器和node.js是http客户端。

axios的作用是什么呢：axios主要是用于向后台发起请求的，还有在请求中做更多是可控功能。

特点：支持浏览器和node.js

支持promise

能拦截请求和响应

能转换请求和响应数据

能取消请求

自动转换JSON数据

浏览器支持防止CSRF（跨站请求伪造）