内容概述

本文章主要是我个人认为在VUE项目中比较重要的知识点，都是运用过程中最为基础的，作为自己的总结笔记，也希望可以帮到各位做一个疏导，记得双击么么哒~

v-if&v-else

v-if是对根据状态值的true和false确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-show他的操作就是CSS中display的none和block的切换

v-on&v-bind的缩写

v-on的v-on:click和v-on:change缩写为@click、@onchange
v-bind:data 缩写成为 :data

computed&watch区别

computed是计算属性，主要的特点是具有缓冲性，并且被监听的值不需在data中初始化，只有监听的值发生变化之后触发，一般用于多处影响这个值的时候用computed做监听。

computed： {
    mesCount () {
        return this.$store.state.app.messageCount;
    }
}

watch:监听的值一般为data中定义的初始化的值，主要用于对值或一些状态的监听，在变化之后触发。其监听的值是一个值影响多个处的情况。

watch:{
        value:{
          handler(curVal,oldVal){
            this.getData() // 当监听值变化之后触发的方法
          },
          deep:true
        }
    }

处理vue中对数组操作之后，值可实现实时变化

解决方法如下：

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// vm.$set，Vue.set的一个别名
vm.$set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

vue的生命周期

阶段	描述
beforeCreate	组件实例被创建之初，组件的属性生效之前，data和$el都为undefined
created	data开始初始化组件实例已经完全创建，属性也绑定，但真实 dom 还没有生成，$el 还不可用
beforeMount	在挂载开始之前被调用：相关的 render 函数首次被调用
mounted	el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子
beforeUpdate	组件数据更新之前调用，发生在虚拟 DOM 打补丁之前
update	组件数据更新之后
activited	keep-alive 专属，组件被激活时调用
deactivated	keep-alive 专属，组件被销毁时调用
beforeDestory	组件销毁前调用
destoryed	组件销毁后调用

父组件如何监听子组件的生命周期

在mounted阶段做一些操作

// Parent.vue
<Child @mounted="doSomething"/>
    
// Child.vue
mounted() {
  this.$emit("mounted");
}

使用@hook 来监听即可

//  Parent.vue
<Child @hook:mounted="doSomething" ></Child>

doSomething() {
   console.log('父组件监听到 mounted 钩子函数 ...');
},
    
//  Child.vue
mounted(){
   console.log('子组件触发 mounted 钩子函数 ...');
},    
    
// 以上输出顺序为：
// 子组件触发 mounted 钩子函数 ...
// 父组件监听到 mounted 钩子函数 ...

vue中的data为什么是data+return的函数

主要的原因是为了防止变量的污染，再有组件是复用的，运用函数的形式可以，以维护一份被返回对象的独立的拷贝，组件实例之间的 data 属性值不会互相影响

组件通信方式

props / $emit 适用父子组件通信,这种方法是 Vue 组件的基础,父组件向子组件传值使用props，子组件向父组件传值的时候，需要在父组件中的使用子组件处调用加载子组件中的一致的方法，并会自动返回传值。

// 父组件
<map-data-table @ievent = "ievent" :style-obj="{margin: '12px 0 0 11px'}"></map-data-table>

//子组件
this.$emit('ievent',this.data);

EventBus 适用于父子、隔代、兄弟组件通信这种方法通过一个空的容器，用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件。
vueX 适用于父子组件、隔代、兄弟组件通信。VueX作为中间组件，通过

this.$store.commit（'xxx'）

调用方法实现全局中的数据变化实现通信，并且可以采用

this.$store.state.app.xxx

实现实时获取变量值。

vue-router路由模式

hash：hash模式其实就是利用触发浏览器的location.hash 来实现的，我们可以使用 hashchange 事件来监听 hash 值的变化，从而对页面进行跳转（渲染），它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。
history：该模式是H5提供的，主要通过history.pushState() 和history.replaceState() 实现路由的跳转。在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能，一个向路由数组中添加，一个是替换数组中的参数
优劣：通过history api，我们丢掉了丑陋的#，但是它也有个问题：不怕前进，不怕后退，但是当F5强制刷新的时候,刷新是实实在在地去请求服务器的,如果服务器中没有相应的响应或者资源，会分分钟刷出一个404来。在hash模式下，前端路由修改的是#中的信息，而浏览器请求时是不需要携带的，所以没有问题.但是在history下，你可以自由的修改path。
abstract : 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。

Vue-router hash模式更改为history模式

当你使用 history 模式时，URL 就像正常的 url，不是带有#的路由情况，看起来相较于hash模式更加美观一些，该模式的实现需要前后端配合完成。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 xxxxx.com/xxx/ 就会返回 404，这就会大大降低用户的体验度。

1、首先需要在router下的router.js设置mode: 'history'

2、后端配置以Nginx为例：

3、以上情况可解决非根目录下的路由配置为history的情况，但是在根目录下还是会出现问题。一下解决非根目录下的问题，主要的目的是为对其地址进一步处理。

location /history {
   root C:/web/static;
 index index.html index.htm;
 #error_page 404 /history/index.html;
 if (!-e $request_filename) {
  rewrite ^/(.*) /history/index.html last;
  break;
 }
}

非根目录下我们需要加上base的路径，这样才可以保证不会出现空白页。路由可以正常访问。

VueX

首先VueX是一个状态管理器，它的核心是store，这是一个状态管理容器，改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。
State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
Mutation：是唯一更改 store 中状态的方法，且必须是同步函数（原因：实质上任何在回调函数中进行的状态的改变都是不可追踪的）。
Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。

对vue框架使用的优化

区分场景使用v-if和v-show，对资源消耗做一个评估。
computed 和 watch 区分使用场景。
v-for 遍历必须为 item 添加 key，且避免同时使用 v-if。
做图片和路由的懒加载。
第三方插件的按需引入。

webpack层面的优化

Webpack 对图片进行压缩
提取公共代码
提取组件的 CSS
构建结果输出分析

vue实现热更新

热更新主要的目的是实现

VUE强化知识点