1. 动态组件【重点】30%
2. 修饰符【重点】70%
3. 混入mixin
4. 内置组件
5. 自定义v-model
6. 路由和组件的懒加载
7. 递归组件
8. MVVM架构模式
9. 虚拟DOM

1. 动态组件

动态组件：将组件作为数据拿来使用，可以通过数据驱动实现切换组件，非常灵活

第一步：将组件作为数据进行声明

import MyButton from '@/components/MyButton.vue'
export default {
  data(){
    return {
      aaa: MyButton, //将组件作为一个数据
    }
  }
}

第二步：在模板中使用组件时，用 组件

<component :is="aaa"></component>

2. 修饰符

2.1 事件修饰符

事件修饰符用于修饰事件，主要用于阻止冒泡或阻止默认行为

.stop 阻止冒泡

<button @click.stop="btnEvent">普通按钮</button>

.prevent 阻止浏览器的默认行为，一般用于 form 和 a

<a href="http://www.baidu.com" @click.prevent="linkEvent">百度搜索</a>

2.2 按键修饰符

按键修饰符主要用于修饰键盘事件，识别到键盘输入某个值以后可以自动触发事件

.enter 回车键

.space 空格键

.13 回车键

<p>用户名：<input type="text" @keydown.enter="username"/></p>
<p>用户名：<input type="text" @keydown.space="username"/></p>
<p>用户名：<input type="text" @keydown.65="username"/></p>

2.3 表单输入修饰符

.lazy 惰性，将input事件改变成了change事件

.number 数字修饰符，将输入框值自动转换成数字

.trim 去除字符串两边的空格

<p>用户名：<input type="text" v-model.lazy="username"/></p>

<p>用户名：<input type="text" v-model.number="username"/></p>
<h1>{{username}} {{typeof username}}</h1>

<p>用户名：<input type="text" v-model.trim="username"/></p>
<h1>{{username}}</h1>

2.4 sync修饰符

在子组件中同步修改父组件的数据

第一步：在子组件中将数据传给父组件

export default {
    props:['title'],
    methods:{
        //点击修改标题
        changeTitle(){
            //在子组件中更新父组件传入的数据
            this.$emit('update:title', '明天星期三');
        }
    }
}

第二步：在父组件中使用子组件时传入数据，并使用 .sync 同步

<my-title :title.sync="title"></my-title>

3. 混入mixin

混入 mixin：提取公共的配置选项

第一步：提取公共配置，将公共装在 mixin/index.js 中

//公共的mixin配置对象
export default {
    data() {
        return {
            msg: '今天发生一件大事，张三又失踪了'
        }
    },
    methods: {
        changeMsg() {
            this.msg = '今天又发生一件大事，张三找到了'
        }
    }
}

第二步：使用mixin

//引入mixin
import mixin from '@/mixin/index.js'

export default {
  //声明公共混入模块
  mixins:[mixin],
}

4. 内置组件

<slot> 插槽，在子组件中可以使用 slot 组件实现插槽

<component> 动态组件，将子组件作为一个数据通过 :is 进行加载

<transition> 动画组件，可以用于实现动画效果

第一步：将要实现动画的组件使用包裹起来，注意：必须添加name属性

<transition name="show">
    <div class="box" v-if="flag">123456789</div>
</transition>

第二步：必须要设置对应的样式

/* 入场和出场的动画 */
.名字-enter-active, .名字-leave-active {
  transition: all 1s;
}

/* 入场和出场的样式 */
.名字-enter, .名字-leave-to {
  transform: translateY(-100%) scale(0) rotate(3600deg);
}

<keep-alive> 缓存组件，将页面组件缓存起来，数据不会重置

<keep-alive>
   <router-view/>
</keep-alive>

<!--带包含功能，哪些组件需要缓存，注意：包含里面要写组件名称-->
<keep-alive :include="['HomeView']">
    <router-view/>
</keep-alive>

5. 自定义v-model

将数据从父组件传到子组件，子组件做双向绑定，数据更改后要传回到父组件，就是 v-model

第一步：

<my-input :value="value" @input="value=$event">用户名：</my-input>

<!--简写-->
<my-input v-model="value">用户名：</my-input>

第二步：

export default {
    props:['value'],
    data(){
        return {
            username: this.value, //将获取到的数据作为内部的初始值
        }
    },

    watch:{
        username(v){ //监听username的改变，将值传到父组件
            this.$emit('input', v);
        }
    }
}

6. 懒加载

6.1 路由懒加载

{
    path: '/about',
    component: () => import('../views/AboutView.vue'), //懒加载，访问路由时才进行加载
}

6.2 组件懒加载

export default {
    components:{
        //组件的懒加载，用到时才会加载
        MyButton: ()=>import('@/components/MyButton.vue'),
    }
}

7. 递归组件

递归组件就是组件内自己调用自己

<template>
    <div>
        <ul>
            <li v-for="v in list" :key="v.id">{{v.label}}
                <!-- 递归组件 -->
                <my-menu :list="v.children"></my-menu>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name:'MyMenu', //组件名称
    props:['list'], //接收传入的数据
}
</script>

8. MVVM实现原理

8.1 什么是MVVM？

MVVM是一种流行的前端框架架构模式，分为 Model模型、View视图、ViewModel视图模型。模型就是数据，模型改变时通过DOM操作让视图改变，视图上输入框改变数据时，通过事件监听器，让数据跟着变。

补充：

MV ：MV不是架构模式，是一个概念，是模型+视图+其它 的架构模式的统称，包含了 MVVM MVC MVP ...

MVP：MVP是模型-视图-表示器，它比MVC框架大概晚出现20年，是从MVC模式演变而来的。它们的基本思想有相同之处：Model层提供数据，View层负责视图显示，Controller/Presenter层负责逻辑的处理。

MVC：模型-视图-控制器，用户输入网址时，调用控制器，接收get或post数据，通知模型层访问数据库的数据，将数据交给视图层，显示到页面上。

8.2 手写MVVM

<h1>显示数据：<span>****</span></h1>
<input type="text" id="username">

<script>
    //定义数据
    let obj = { name: '张三疯' }

    //DOM操作实现数据显示
    function render() {
        document.querySelector('span').textContent = obj.name;
        document.querySelector('#username').value = obj.name;
    }
    render();

    console.dir(document.querySelector('span'))

    //挟持数据，实现数据绑定
    let name = obj.name;
    Object.defineProperty(obj, 'name', {
        get() { //获取obj.name属性时，自动执行get方法
            return name;
        },
        set(v) { //设置obj.name属性时，自动执行set方法
            name = v;
            render(); //监听到修改数据动作时就重新渲染
        },
    });

    //视图层V到模型层M
    document.querySelector('#username').oninput = function () {
        obj.name = this.value;
    }
</script>

9. 虚拟DOM

虚拟DOM是一个JS对象，用于保存与直接DOM的对应关系，当数据改变时，进行最小粒度的更新，只更新改变的那一部分，就是虚拟DOM。具体比较算法是 diff算法。

diff算法是为了避免不必要的渲染，按需更新，虚拟DOM会采用Diff算法进行虚拟DOM节点比较，比较节点差异，从而确定需要更新的节点，再进行渲染。