Vue

[anjia]

目录

• Event Bus
• 全局API，https://cn.vuejs.org/v2/api
  • 实例属性
  • 实例方法/事件，三个方法。更多详见深入响应式原理
    • vm.$watch
    • vm.$set
    • vm.$delete
  • 实例方法/生命周期，四个方法
    • vm.$mount
    • vm.$forceUpdate
    • vm.$nextTick
    • vm.$destory
  • 指令
  • 特殊特性
    • key 主要用在 Vue 的虚拟 DOM 算法
    • ref 用来给元素或子组件注册引用信息。子组件引用
    • is 用于动态组件且基于 DOM 内模板的限制来工作。动态组件、DOM模板解析说明
    • 已废弃 slot slot-scope scope
• 自定义指令

[anjia]

组件通信 Event Bus

/utils/event-bus.js

import Vue from 'vue'
export const EventBus = new Vue()

使用：

import { EventBus } from '@/utils/event-bus'

EventBus.$emit('custom_event_name', this.data)   // 发送事件
EventBus.$on('custom_event_name', (data) => {})  // 监听事件
EventBus.$off('custom_event_name')  // 销毁

注意：

1. 确保先 $on() 再 $emit()
2. 结束时，要销毁 $off()。否则会监听到多次

场景 1

路由，从组件 A -> B。使用如下：

// 组件A
beforeDestroy() {
    EventBus.$emit()
}

// 组件 B
beforeCreate() {
    EventBus.$on()
}
beforeDestroy() {
    EventBus.$off()
}

说明：注意它两的生命周期，确保先 $on() 再 $emit()

不适用的情况：

1. 传 B 页面的初始数据。这样以来会导致，一刷新 B 就空了。因为数据丢了

EventBus 实践

• vm.$on() 监听 当前实例上的自定义事件
• vm.$emit() 分发 当前实例上的事件
• vm.$off() 取消监听该事件的监听器...
  • 若没参数，则移除所有的事件监听器
  • 若只提供了事件，则移除该事件所有的监听器
  • 若同时提供了事件+回调，则只移除这个回调的监听器
• vm.$once() 监听事件，但只触发一次
  • 第一次触发之后，就被移除

$on 和 $off 配对

https://cn.vuejs.org/v2/api/index.html#实例方法-事件

[anjia]

实例属性

let vm = this

1. vm.$data 实例观察的数据对象。data
2. vm.$options 当前 Vue 实例的初始化选项
3. vm.$props 当前组件接收到的 props 对象
4. vm.$attrs 包含了父作用域中不作为 prop 被识别的特性绑定，除了class和style
5. vm.$listeners 包含了父作用域中的v-on事件监听器

---

6. vm.$root 当前组件树的根 Vue 实例
7. vm.$el Vue 实例使用的根 DOM 元素
8. vm.$parent 父实例，如果有的话
9. vm.$children 当前实例的直接子组件。并不保证顺序、也不是响应式的
10. vm.$refs 注册过ref特性的所有 DOM 元素和组件实例。子组件引用、特殊特性-ref

---

11. vm.$slots 被插槽分发的内容。这在渲染函数里特别有用。插槽
    • v-slot指令比slot和slot-scope更新
      • 写法即，在组件里直接引用<slot></slot>
      • 定义默认值，即<slot>默认值</slot>
      • 此API可用于分发内容，灵感来自Web Components规范草案
    • 具名插槽
      • <slot name="header"></slot>
      • 不带name属性的，默认名字是 default
        • 任何没有被包裹在<template v-slot:xxx>...</template>中的内容都会被视为默认插槽的内容
    • 作用域插槽
      • 为了父级的插槽内容中访问到父组件的变量，可以将此变量绑定到<slot>元素上
        • eg.<slot v-bind:user="user">{{ user.lastName }}<slot>
      • 一旦出现多个插槽，请始终为所有插槽使用完整的基于<template>的语法
      • 当只有一个时，可以简写为<current-user v-slot="slotProps">{{ slotProps.user.firstName }}</current-user>
        • 即将你的插槽内容，包括在一个传入单个参数的函数里
        • 即v-slot的值，可以是任何的 JS 表达式，eg.可以使用ES2015解构传入具体的插槽 prop
    • 动态插槽名 <template v-slot:[dynamicSlotName]>...</template> eg.动态参数
12. vm.$scopedSlots 用来访问作用域插槽。这在渲染函数里特别有用。推荐
    • 与vm.$slots相比，更推荐用vm.$scopedSlots

v-on 是 v-bind 的缩写 #header 是 v-slot:header 的缩写

---

13. vm.$isServer 当前 Vue 实例是否运行于服务器。详见 服务端渲染

https://cn.vuejs.org/v2/api/#示例属性

[anjia]

指令

• 数据绑定语法-插值
  • v-text：<span v-text="msg"></span> 同 <span>{{msg}}</span>
  • v-html 仅在可信内容上用
    • 注意在单文件组件里，scoped的样式不会用在v-html内部，因为那部分 HTML 没有被 Vue 的模板编译器处理
    • 若想针对v-html设置带作用域的 CSS，可以替换成CSS Modules 或者额外的全局样式-用类似BEM的作用域策略
• 条件渲染
  • v-show 始终会被渲染在DOM，它只是简单地切换CSS属性display
    • 它不支持<template>元素，也不支持v-else
  • v-if v-else v-else-if
  • v-show和v-if的区别
    • 与v-show相比，v-if是真正的条件渲染
      • v-show有更高的初始渲染开销，因为它始终会被渲染DOM-不论初始条件是什么
      • v-if有更高的切换开销，因为它会确保条件块内的事件监听器和子组件适当地被销毁和重建
    • 所以
      • v-show适合频繁地切换
      • v-if适合运行时条件很少改变
• 列表渲染 v-for
• 事件处理器/值绑定/表单控件绑定（双向绑定）
  • v-on
  • v-bind
  • v-model
• 组件插槽 v-slot
• 其它
  • v-pre 跳过大量没有指令的节点会加快编译。跳过这个元素和它的子元素的编译过程。
  • v-once 只渲染元素和组件一次。优化更新性能
  • v-cloak

[anjia]

自定义指令

适用场景：对普通 DOM 元素进行底层操作

Vue.directive(); // 注册一个全局自定义指令 v-xx
Vue.component(); // 注册组件，directives 选项可注册局部指令

钩子函数：

1. bind：指令第一次绑定到元素时调用，只调用一次（适合一次性的初始化设置）
2. inserted：被绑元素插入到父元素时调用（插入到父元素，未必被插入到文档中）
3. update：所在组件的 VNode 更新时（也可能发生在子 VNode 更新之前，VNodes-虚拟 DOM）
4. componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用
5. unbind：指令与元素解绑时调用，只调用一次

钩子函数的参数：

1. el：指令所绑的元素，可直接操作 DOM
2. binding：指令相关的值。详见下方示例
3. vnode：Vue 编译生成的虚拟节点，VNode API
4. oldVnode

除了el，其它参数都只读 如要在钩子中间共享数据，可通过元素的dataset

参数说明：

• 动态指令参数：<div v-demo:[argument]="value"></div> 这里 argument便可以根据组件示例的数据进行更新
• 字面量对象：可接受所有合法的 JS 表达式。eg.<div v-demo="{name:'anjia', age:3}"></div>

示例：

<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>

<script>
Vue.directive('demo', {
  bind: function (el, binding, vnode) {
    var s = JSON.stringify
    el.innerHTML =
      'name: '       + s(binding.name) + '<br>' +         // demo
      'value: '      + s(binding.value) + '<br>' +        // hello!
      'expression: ' + s(binding.expression) + '<br>' +   // message
      'argument: '   + s(binding.arg) + '<br>' +          // foo
      'modifiers: '  + s(binding.modifiers) + '<br>' +    // {"a":true, "b":true} 包含修饰符的对象
      'vnode keys: ' + Object.keys(vnode).join(', ')      // tag,data,....
  }
})

new Vue({
  el: '#hook-arguments-example',
  data: {
    message: 'hello!'
  }
})
</script>

https://cn.vuejs.org/v2/guide/custom-directive.html