Since the company has recently continued to carry out learning sessions, so that developers can learn more knowledge and skills, so I wrote a tutorial on vue.js, although there are many online tutorials, but this tutorial is my personal study and The summary of experience is only for those who are learning. The main reason is that interviews are often asked, as well as some sorting of common knowledge points and skills in development. I hope that those who are in the learning stage can avoid detours and be more clear Learn useful knowledge and skills:
This tutorial is mainly divided into three stages: introductory chapter, advanced chapter and advanced chapter. Every content will be released from time to time. Of course, some other learning knowledge will be continuously updated in the later period. , Any questions and areas that need to be expanded are welcome.
1.
Introduction to
vue.js 1.1 Introduction to vue.js 1.2 Environment installation of
vue.js 1.3 Directory structure of
vue.js 1.4 Template syntax and instructions of
vue.js 1.5 Life cycle of
vue.js 1.6 Routing of vue.js
2 , Vue.js advanced chapter
2.1 vue.js custom instructions and filters
2.2 vue.js calculation properties, listeners and mixins mixed into
2.3 vue.js transition animation
2.4 vue.js props and parent-child components Communication
2.5 vue.js asynchronous update strategy and the purpose and principle of
nextTick 2.6 the use of axios in vue.js
Three, vue.js advanced chapter
3.1 vue.js component and slot
3.2 vuex state management mode
3.3 routing guard
3.4 internationalization
3.5 Expansion
Next, we will enter the advanced vue.js study:
3.1, vue.js componentization and slot 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 vuex state management module of vue.js
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 The parsing process and routing guard of vue.js routing navigation
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 internationalization (extension):
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: '<App/>',
components: {
App }
})
3.使用：
<div>{
{
$t('common.title')}}</div>
改变当前使用的语言：
this.$i18n.locale = 'en' ； // 将当前使用的语言切换到英文
3.5 Expansion
提高开发效率和页面性能的一些小技巧以及需要注意的点:
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