Vue碎片化小记

vue插槽

• 插槽内容（可以放任何东西），在组件加<slot></slot>

组件：
Vue.component('child',{
    template:`
        <div>
            Hello,World!
            <slot></slot>
        </div>
    `
})

使用：
<div id="app">
    <child>
        <div>你谁啊，
            我是默认的插槽啊 </div>
    </child>
</div>

• 具名插槽（顾名思义就是给插槽起个名字）

组件：给组件命名，aaa，bbb
Vue.component('child',{
    template:` <div>
        <h4>具名插槽组件</h4>

        <slot name="aaa"></slot>

        <div ></div>

        <slot name="bbb"></slot>

        <div ></div>

        <slot></slot>
        </div>
`
})

使用：
<div id="app">
    <child>
        <template slot="aaa">
            aaa
        </template>
        <template slot="bbb">
            bbb
        </template>
        <div>你谁啊，
            我是默认的插槽啊 </div>
    </child>
</div>

• 作用域插槽（组件上的属性，可以在组件元素内使用）

在<slot></slot>元素上定义一个属性work，使用组件child，在组件内template元素添加属性slot-scope命名为setWork

组件定义：
Vue.component('child',{
    template:` <div>
            <slot work="你好"></slot>
        </div>
        `
})

使用：
<div id="app">
    <child>
        <template slot-scope="setWork">
　　　　　　<!-- {"work":"你好，你在哪里工作"} -->
            {{setWork}}
        </template>
    </child>
</div>

vue父子组件生命周期

Vue实例需要经过创建、初始化数据、编译模板、挂载DOM、渲染、更新、渲染、卸载等一系列过程，这个过程就是vue的生命周期。vue提供的钩子函数：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed，当父子组件嵌套时他们有各自的钩子函数

描述：

• 创建阶段：beforeCreate、created、beforeMount、mounted四个钩子函数
• 更新过程：beforeUpdate、updated，父子过程——Parent BeforeUpdate -> Child BeforeUpdate -> Child Updated -> Parent Updated
• 销毁过程：beforeDestroy、destroyed

Vue keep-alive

keep-alive是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染，它有两个属性：include(包含的组件缓存) 与 exclude(排除的组件不缓存，优先级大于include)
对应的生命周期：activated和deactivated

使用方式：include/exclude使用正则或者是数组时，使用v-bind才生效
    <keep-alive include='include_components' exclude='exclude_components'>
      <component>
        <!-- 该组件是否缓存取决于include和exclude属性 -->
      </component>
</keep-alive>

Vue 双向绑定

数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调

Vue依赖收集

Vue要能够知道一个数据是否被使用，实现这种机制的技术叫做依赖收集。
每个组件实例都有相应的watcher实例 - 渲染组件的过程，会把属性记录为依赖 - 当我们操纵一个数据时，依赖项的setter会被调用，从而通知watcher重新计算，从而致使与之相关联的组件得以更新

Vue依赖收集与观察者模式

依赖收集是一对多的，一个数据变了，多个用到的就会做出处理。这样就会出现一个观察者模式。Vue依赖收集：依赖的数据是观察目标 - 视图、计算属性、侦听器这些是观察者

Vue——MVVM

『View』：视图层（UI 用户界面）
『ViewModel』：业务逻辑层（一切 js 可视为业务逻辑）
『Model』：数据层（存储数据及对数据的处理如增删改查）

• 1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
• 2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
• 3、实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图

动态路由

1. 前端写好路由，更具不通条件，权限展示不同（用户，按钮）
2. 前端配置好路由给到后端，登录后根据用户的不同后端传给前端展示

路由懒加载

首屏组件加载速度更快一些，延迟加载或按需加载，在需要的时候在加载

• vue异步组件实现懒加载

使用方式：
component：resolve=>(require(['需要加载的路由的地址'])，resolve)
具体使用
import Vue from 'vue'
import Router from 'vue-router'
　　/* 此处省去之前导入的HelloWorld模块 */
Vue.use(Router)

export default new Router({
 routes: [
  {
   path: '/',
   name: 'HelloWorld',
   component: resolve=>(require(["@/components/HelloWorld"],resolve))
  }
 ]
})

• ES 提出的import方法

使用方式：
const HelloWorld = （）=>import('需要加载的模块地址')
具体使用
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const HelloWorld = ()=>import("@/components/HelloWorld")
export default new Router({
 routes: [
  {
   path: '/',
   name: 'HelloWorld',
   component:HelloWorld
  }
 ]
})

组件懒加载与路由懒加载类同

Vue .sync修饰符

当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定，譬如一个弹窗（子组件关闭弹窗同时改变父组件ff状态）

<div id="app">
    <button @click="bnt">model</button>
    <model :show.sync='ff' style="padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;"></model>
</div>
弹窗组件：
<template>
    <div v-if="show">
        <p>默认初始值是{{show}}，所以是显示的</p>
        <button @click.stop="close">关闭</button>
    </div>
</template>
<script>
export default {
    props:['show'],
    methods:{
        close(){
            this.$emit('update:show', false); //触发 input 事件，并传入新值
        }
    }
}

Vue加载优化方案

1. 异步路由加载

使用方法：
const Index = r =>
  require.ensure([], () => r(require('@/pages/index')), 'Index')
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/board/index/:id?',
      name: 'Index',
      component: Index
    }
  ]
})

2.不打包引用库文件（单独引用，或者使用cdn），在webpack（webpack.base.conf.js）中配置

externals: {
    'element-ui': 'ELEMENT',
    'vue': 'Vue',
    'axios': 'axios',
    'echarts': 'echarts',
    'vue-router': 'VueRouter'
  }

3.开启gzip压缩
前端将文件打包成.gz文件，然后通过nginx的配置，让浏览器直接解析.gz文件。

    productionGzip: true,
    productionGzipExtensions: ['js', 'css'],

4.路由懒加载

  component(resolve) {
    require(['view/main.vue'], resolve)
  }
  bnt.vue
  component: () => import('view/bnt.vue')

5.图片资源懒加载 ，事件的销毁，v-if和v-show/computed和watch的使用场景，v-for/v-if慎用。 第三方库的按需加载

Webpack相关方向优化
减少 ES6 转为 ES5 的冗余代码 babel-plugin-transform-runtime