vue.js渐进式教程(高级篇)

由于公司最近持续开展学习会，让开发人员能够学到更多的知识和技能，所以本人写了一篇关于vue.js的教程，虽然网上的教程很多，但本篇教程是本人的个人学习和经验总结，只针对于正在学习中的小伙伴们，主要是面试经常会被问到，以及开发中常用知识点和技能的一些整理，希望正在学习阶段的小伙伴能够少走弯路，能够更明确的学到有用的知识和技能：
此教程主要分为三个阶段入门篇，进阶篇和高级篇，将会不定期发布每一篇内容，当然，后期也会持续更新一些其它方面的学习知识，有问题和需要扩充的地方欢迎大家提出。
一、vue.js入门篇
1.1 vue.js的介绍
1.2 vue.js的环境安装
1.3 vue.js的目录结构
1.4 vue.js的模板语法和指令
1.5 vue.js的生命周期
1.6 vue.js的路由
二、vue.js进阶篇
2.1 vue.js的自定义指令和过滤器
2.2 vue.js的计算属性、侦听器和mixins混入
2.3 vue.js的过渡动画
2.4 vue.js的props和父子组件之间的通信
2.5 vue.js异步更新的策略以及nextTick的用途和原理
2.6 vue.js中使用axios
三、vue.js高级篇
3.1 vue.js组件化和插槽
3.2 vuex状态管理模式
3.3 路由守卫
3.4 国际化
3.5 拓展
接下来我们就进入vue.js高级篇的学习：

3.1、vue.js组件化和slot插槽

  一.vue.js组件化：
所谓组件化开发，就是将各个不同的view和业务逻辑封装到不同的component中，component的粒度可大可小。这样的好处是，在不同的组件中 开发展示效果和业务逻辑，就形成了我们常说的高内聚，低耦合。对component粒度的把控需要我们根据项目的实际情况作出选择。粒度过大或者过小都不利于我们的可持续开发。

     1.组件化开发的优点：
	 ①组件之间不会相互影响，能有效减少出现问题时定位和解决问题的时间；
	 ②组件化程度高的页面，具有清晰的页面组织和高可读性的HTML结构代码，组件之间的关系一目了然；
	 ③组件化会强迫开发人员划清各个组件的功能边界，使得开发出的功能更加健壮；

     2.公共组件的使用（以标签的形式展示）：
	 <three></three>

     3.在组件内导入公共组件：
	 import Three from "../components/three";
	 components:{Three}

	二、vue.js的slot插槽：
	插槽的作用：让用户可以拓展组件，去更好地复用组件和对其做定制化处理；
	使用场景：我们在构建页面过程中一般会把用的比较多的公共的部分抽取出来作为一个单独的组件，但是在实际使用这个组件的时候却又不能完全的满足需求，我希望在这个组件中添加一点东西，这时候我们就需要用到插槽来分发内容
	  1.普通插槽：<slot></slot>
	  2.具名插槽：<slot name=’name’></slot>    使用时配合template一起使用  <template v-slot:name></template>    v-slot可以简写成“#”
      3.作用域插槽:解决父组件在向子组件插槽传递模板内容时存在访问子组件数据的问题
	     <slot name="content3" v-bind:user="user"></slot>	子组件通过v-bind向父组件传递数据，绑定在 <slot> 元素上的 attribute 被称为插槽 prop；
	     <template #content3="{user}">  
        	        <p>{{user.title }}<p>
      	     </template>

3.2 vue.js的vuex状态管理模块

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex采用MVC模式中的Model层，规定所有的数据必须通过action--->mutaion--->state这个流程进行来改变状态的。
1.vue的安装：
        npm install vuex --save

2.vuex的使用：
        在store.js文件中引入，实例化仓库:
	import Vue from 'vue'；import Vuex from 'vuex'
	Vue.use(Vuex)
	export default new Vuex.Store({})	        
        在main.js中挂载:import store from './store/store.js';new Vue({el:”#app”,store})	

3.vuex的核心概念：
        ①state 存放状态，基本数据
                         ②mutations state成员操作，提交更改数据的方法（同步）commit
                         ③getters 加工state成员给外界，从基本数据派生的数据
                         ④actions 异步操作（像一个装饰器，包裹mutations,可以使之异步）
                         ⑤modules 模块化状态管理
        
4.vuex的特点
①能够在vuex中集中管理共享的数据，易于开发和后期维护
②能够高效的实现组件直接得数据共享，提高开发效率
③储存在vuex中的数据都是响应式的，能够实现数据与页面的同步
	
5.vuex异步更新数据的流程：
①.在组件中发起dispatch执行action
②.在action中执行异步操作，异步完成后提交mutation
③.在mutation中更新state，mutation还会和调试工具产生交互
④.state数据改变，从而驱动视图更新

3.3 vue.js的路由导航的解析过程和路由守卫

1.路由导航的解析过程：
     ①.导航被触发；
     ②.在失活的组件里调用 beforeRouteLeave 守卫；
     ③.调用全局的 beforeEach 守卫；
     ④.在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)；
     ⑤.在路由配置里调用 beforeEnter；
     ⑥.解析异步路由组件；
     ⑦.在被激活的组件里调用 beforeRouteEnter；
     ⑧.调用全局的 beforeResolve 守卫 (2.5+)；
     ⑨.导航被确认；
     ⑩.调用全局的 afterEach 钩子；
     11.触发 DOM 更新；
     12.用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数；

2.全局前置路由守卫（beforeEach）:
const router = new VueRouter({})
router.beforeEach((to,from,next)=>{
})

3.全局后置钩子（afterEach）：后置钩子不存在next回调函数
router.afterEach((to, from) => {
  
})

4.组件内守卫：
beforeRouteEnter：在渲染该组件的对应路由被 confirm 前调用，不能获取组件实例 `this`，因为当守卫执行前，组件实例还没被创建
beforeRouteUpdate (2.2 新增)  在当前路由改变，但是该组件被复用时调用
beforeRouteLeave 导航离开该组件的对应路由时调用

5.路由独享的守卫
beforeEnter
beforeLeave

3.4 vue.js国际化（扩展）：

1.安装：npm install vue-i18n
2.配置：在main.js中引入：
	import VueI18n from 'vue-i18n'
	import en  from './assets/i18n/en'
	import zh  from './assets/i18n/zh'		
	Vue.use(VueI18n)；
    实例化vue-i18n：
	const i18n = new VueI18n({
	     locale:  'zh',
	     messages: {
		          'zh': zh, // 中文语言包
		          'en': en // 英文语言包
	     }
	})

   将i18n实例挂载到vue上：
	new Vue({
   	     el: '#app',
   	     i18n,
   	     template: '',
   	     components: { App }
	})
3.使用：
      <div>{{$t('common.title')}}</div>
      改变当前使用的语言：
      this.$i18n.locale = 'en' ； // 将当前使用的语言切换到英文

3.5 拓展

  提高开发效率和页面性能的一些小技巧以及需要注意的点:
   1.使用es6 new set()去重：const array = [1, 2, 3, 3, 5, 5, 1]；const uniqueArray = [...new Set(array)]；

   2.component：resolve=>(require([‘需要加载的路由的地址’])，resolve)，异步组件实现懒加载
   import：当项目打包时路由里的所有component（组件）都会打包在一个js中，造成进入首页时，需要加载的内容过多，时间相对比较长。
   require：这种方式引入的时候，会将你的component（组件）分别打包成不同的js，加载的时候也是按需加载，只用访问这个路由网址时才会加载这个js。

   3.尽量使用v-if,减少使用v-show

   4.组件拆分，页面分为多个组件

   5.v-for加唯一key

   6.长列表使用this.list = Object.freeze(list);冻结数据

   7.v-for 中避免同时使用 v-if

   8.理解Vue的生命周期，不要造成内部泄漏，使用过后的全局变量在组件销毁后重新置为null

   9.修改vue.config.js中的配置项，把productionSourceMap设置为false，不然最终打包过后会生成一些map文件，并且在生成环境是可以通过map去查看到源码的，这样会造成源码泄漏，这里建议大家设置为false。productionGzip设置为true可以开启gzip压缩，使打包过后体积变小

   10.vs快速搜索替换文件中的console.log：console.log\(.*\);

    11.vscode 安装any-rule插件，常用的正则都可以搜到

    优化案例分析：https://juejin.cn/post/6922641008106668045