Vue碎片化小记

vue插槽

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

组件：
Vue.component('child',{
    template:`
        

            Hello,World!
            
        
    `
})

使用：

    
        
你谁啊，
            我是默认的插槽啊 
    

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

组件：给组件命名，aaa，bbb
Vue.component('child',{
    template:` 

        
具名插槽组件

        

        


        

        


        
        
`
})

使用：

    
        
        
        
你谁啊，
            我是默认的插槽啊 
    

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

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

组件定义：
Vue.component('child',{
    template:` 

            
        
        `
})

使用：

    
        
    

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才生效
    
      
        
      

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状态）

    model
    

弹窗组件：