Vue

一、Vue.js是什么？

• Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层，并且非常容易学习，非常容易和其他库和已有的项目整合。另一方面，Vue完全有能力驱动单文件组件和Vue生态系统支持的库开发的复杂单页应用。
• Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。

二、Vue的双向绑定原理

• vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

具体步骤：

第一步：

需要observer的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter，这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化。

第二步：

compile解析模板指令将模板中的变量替换成数据，然后初始化渲染页面的视图，并将每一个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图。

第三步：

watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是：
(1)在自身实例化时往属性订阅器（dep）里面添加自己
(2)自身必须有一个update()方法
(3)待属性变动dep.notice()通知时，能调节自身的update()方法，并触发Compile中绑定的回调，则功成身退。

第四步：

MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化->视图更新；视图交互变化->数据model变更的双向绑定效果。

三、什么是MVVM？

• MVVM是model-view-ViewModel的缩写，MVVM是一种设计思想。
  (1) Model层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；
  (2) View代表UI组件，他负责将数据模型转化成UI展现出来；
  (3) ViewModel是一个同步View和Model的对象。
• 在MVVM架构下，View和Model之间并没有直接的联系，而是通过ViewModel进行交互，Model和ViewModel之间的交互是双向的，因此View的数据变化会同步到Model中，而Model数据的变化也会立即反应到View上。
• ViewModel通过双向数据绑定吧View层和Model层连接了起来，而View和Model之间的同步工作完全是自动的，无需人为干涉，因此开发者只需要关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由MVVM来统一管理。

四、Vue的生命周期

• 生命周期就是Vue实例从开始创建到销毁的过程，即开始创建、初始化数据、编译模板、挂在DOM渲染、更新渲染、销毁等一系列过程。
  （1）beforeCreate（创建前）：在数据观测和初始化事件还未开始。
  （2）created（创建后）：完成数据观测，属性和方法的运算，初始化事件， $el属性还没有显示出来。
  （3）beforeMount（载入前）：在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
  （4）mounted（载入后）：在el被新创建的vm.$el替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中，此过程中进行ajax交互。
  （5）beforeUpdate（更新前）：在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
  （6）updated（更新后）：在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作，然而在大多数情况下，应该避免在此期间更改状态，因此这可能会导致更新无限循环。该钩子在服务器渲染期间不被调用。
  （7）beforeDestroy（销毁前）：在实例销毁之前调用。实例仍然完全可用。
  （8）destryed（销毁后）：在实例销毁之后调用，调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器渲染期间不被调用。

    <div id='app'>
        <input type='text' name='setNum' v-model='number'/>
        <p>{{number}}</p>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var vue = new Vue({
            el : '#app',
            data : {
                number : 1
            },
            beforeCreate : function(){
                console.log('beforeCreate 钩子执行...');
                console.log(this.number);
            },
            created : function(){
                console.log('created 钩子执行...');
                console.log(this.number);
            },
            beforeMount : function(){
                console.log('beforeMount 钩子执行...');
                console.log(this.number);
            },
            mounted : function(){
                console.log('mounted 钩子执行...');
                console.log(this.number);
            },
            beforeUpdate : function(){
                console.log('beforeUpdate 钩子执行...');
                console.log(this.number);
            },
            updated : function(){
                console.log('updated 钩子执行...');
                console.log(this.number);
            },
            beforeDestroy : function(){
                console.log('beforeDestroy 钩子执行...');
                console.log(this.number);
            },
            destroyed : function(){
                console.log('destroyed 钩子执行...');
                console.log(this.number);
            }
        })
    </script>

五、父子组件之间传值

1. 父组件给子组件传值

• 先定义一个子组件，在组件中注册props
• 在父组件中，引入子组件，并传入子组件内需要的值

//子组件
<template>
    <div>{{data}}</div>
</template>
<script>
    exprot default{
        name:"son",
        //接受父组件传值
        props:["data"]
    }
</script>

//父组件
<template>
    <Main :obj="data"></Main>
</template>
<script>
    //引入子组件
    import Main form "./main"

    exprot default{
        name:"parent",
        data(){
            return {
                data:"我要向子组件传递数据"
            }
        },
        //初始化组件
        components:{
            Main
        }
    }
</script>

2. 子组件给父组件传值

• 在子组件中创建一个按钮，给按钮绑定一个点击事件
• 在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数

• 在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法

  
  子组件.png
  父组件.png

六、active-class 是哪个组件的属性？

vue-router 模块的 router-link 组件。

七、vue-router 有哪几种导航钩子?

1. 全局导航钩子

• router.beforeEach(to, from, next),
• router.beforeResolve(to, from, next),
• router.afterEach(to, from ,next)

2. 组件内钩子

• beforeRouteEnter,
• beforeRouteUpdate,
• beforeRouteLeave

3. 单独路由独享组件

• beforeEnter

八、 vue 当中的指令和它的用法

1. v-if：判断是否隐藏
2. v-for：把数据遍历出来
3. v-bind：绑定属性
4. v-model：实现双向绑定
5. v-on：监听DOM事件