实践开发：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（跨站请求伪造）