Vue 学习笔记 —— 其它零碎知识点（三）

幸运丫
295 阅读3分钟

笔记内容来自于 b 站教学视频 尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通 张天禹老师

一个重要的内置关系

  1. 一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
  2. 为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue 原型上的属性、方法

Vue 与 VueComponent 的关系

  • 构造函数.prototype 叫做显示原型属性
  • 实例.__proto__ 叫做隐式原型属性
  • 实例的隐式原型属性永远指向自己缔造者的原型对象
  • 实例.__proto__ === 构造函数.prototype

image.png

Vue CLI

index.html 解析

image.png

main.js 解析

image.png

关于不同版本的 Vue

  1. vue.js 与 vue.runtime.xxx.js的区别：
    • vue.js 是完整版的 Vue，包含：核心功能 + 模板解析器
    • vue.runtime.xxx.js 是运行版的 Vue，只包含：核心功能
  2. 因为 vue.runtime.xxx.js 没有模板解析器，所以不能使用 template 配置项，需要使用 render 函数接收到的 createElement 函数去指定具体内容

vue.config.js 配置文件

  1. 使用 vue inspect > output.js 可以查看到 Vue 脚手架的默认配置，但是不能修改
  2. 使用 vue.config.js 可以对脚手架进行个性化定制，详情见：cli.vuejs.org/zh

plugins.js 插件

  1. 创建插件文件 image.png

  2. 使用插件 image.png

3.插件总结 image.png

webStorage

  1. 存储内容大小一般支持 5MB 左右（不同浏览器可能还不一样）
  2. 浏览器端通过 Window.sessionStruage 和 Window.localStorage 属性来实现本地存储机制
  3. 相关 API：
    • xxxxxStorage.setItem('key', 'value') 该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值
    • xxxxxStorage.getItem('person') 该方法接受一个键名作为参数，返回键名对应的值
    • xxxxxStorage.removeItem('key') 该方法接受一个键名作为参数，并把该键名从存储中删除
    • xxxxxStorage.clear() 该方法会清空存储中的所有数据
  4. 备注：
    • SessionStorage 存储的内容会随着浏览器窗口关闭而消失
    • LocalStorage 存储的内容，需要手动清除才会小时
    • xxxxxStorage.getItem('person') 如果 xxx 对应的 value 获取不到，那么 getItem 的返回值是 null
    • JSON.parse(null) 的结果依然是 null

组件自定义事件

  1. 一种组件间通信的方式，适用于：子组件 ===> 父组件
  2. 使用场景：A 是父组件，B 是子组件，B 想给 A 传数据，那么就要在 A 中给 B 绑定自定义事件（事件的回调在 A 中）
  3. 绑定自定义事件
    • 第一种方式，在父组件中：<Demo @atguigu="test"/> 或 <Demo v-on:atguigu="test"/>
    • 第二种方式，在父组件中：
    <Demo ref="demo"/>
......
mounted() {
   this.$refs.xxx.$on('atguigu', this.test)
}
    • 若想让自定义事件只能触发一次，可以使用 once 修饰符，或 $once 方法
  4. 触发自定义事件：this.$emit('atguigu', 数据)
  5. 解绑自定义事件：this.$off('atguigu')
  6. 组件上也可以绑定原生 DOM 事件，需要使用 native 修饰符
  7. 注意：通过 this.$refs.xxx.$on('atguigu', 回调) 绑定自定义事件时，回调要么配置在 methods 中，要么用箭头函数，否则 this 指向会出问题！
  8. 解绑的三种使用方法：下图 image.png

全局事件总线（GlobalEventBus）

  1. 一种组件间通信的方式，适用于 任意组件间通信
  2. 安装全局事件总线：
new Vue({
    ......
    beforeCreate() {
        Vue.prototype.$bus = this // 安装全局事件总线，$bus 就是当前应用的 vm
    },
    ......
})
  1. 使用事件总线：
    • 接收数据：A 组件想接收数据，则在 A 组件中给 $bus 绑定自定义事件，事件的 回调留在 A 组件自身
    methods() {
    demo(data){......}
}
......
mounted() {
    this.$bus.$on('xxxx', this.demo)
}
    • 提供数据：this.$bus.$emit('xxxx', 数据)
  2. 最好在 beforeDestroy 钩子中，用 $off 去解绑 当前组件所用到的 事件

消息订阅与发布（pubsub）

tips: 消息订阅与发布可用的包很多，这里只用一个 pubsub 作为例子来说明订阅发布使用方法

  1. 一种组件间通信的方式，适用于 任意组件间通信
  2. 使用步骤
    1. 安装 pubsub: npm i pubsub-js
    2. 引入：import pubsub from 'pubsub-js'
    3. 接收数据：A 组件想接收数据，则在 A 组件中订阅消息，订阅的 回调留在 A 组件自身
    methods() {
    demo(data){......}
}
......
mounted() {
    this.pid = pubsub.subscribe('xxx', this.demo) // 订阅消息
}
    1. 提供数据：pubsub.publish('xxx', 数据)
    2. 最好在 beforeDestroy 钩子中，用 pubsub.unsubscribe(this.pid) 去 取消订阅

nextTick

  1. 语法：this.$nextTick(回调函数)
  2. 作用：在下一次 DOM 更新结束后执行其指定的回调
  3. 什么时候用：当改变数据后，要基于更新后的新 DOM 进行某些操作时，要在 nextTick 所指定的回调函数中执行

Vue 封装的过渡与动画

  1. 作用：在插入、更新或移除 DOM 元素时，在合适的时候给元素添加样式类名
  2. 图示：

image.png

  1. 写法：
    a. 准备好样式：

    1. 元素进入的样式
      • v-enter：进入的起点
      • v-enter-active： 进入过程中
      • v-enter-to：进入的终点
    2. 元素离开的样式
      • v-leave：离开的起点
      • v-leave-active：离开过程中
      • v-leave-to：离开的终点
        b. 使用 <transition> 包裹要过渡的元素，并配置 name 属性
    <transition name="hello">
    <h1 v-show="isShow">你好啊！</h1>
</transition>

    c. 备注：若有多个元素需要过渡，则需要使用 <transition-group>，且每个元素都要指定 key 值

  2. 举例：过渡

image.png

  1. 举例：动画

image.png

杂记

  • ...params 意思是，除了第一个接收的参数是 name 之外，其它参数都整理到 params 身上

image.png

avatar
文章
阅读
粉丝