引言：一次开发中，用到了Vue的“插件”功能，主要是在Vue-Router中，需要弹出一个选择用户角色的弹窗，等选择过后再进入具体地页面。这里通过此前Element的$message等方法，得知需要用到Vue“插件”这个功能点。
事后发现很多Vue的细节功能点自己都没有去了解，遂开此章记录。
**

1、Object.freeze

起初，我想不到我什么时候要用到它。
后面回忆起：我常常把“常用变量”放到一个统一的文件夹维护。
！！！而我使用常用变量的方法是这样的

  1. import { shopType } from '@/utils/constant'
  3. export {
  4.  data() {
  5.     return {
  6.             shopType: shopType
  7.     }
  8.   }
  9. }

事实上我不太清楚，我这种用法是否合适。
还是说，我应该将这种常量，统一放在一个全局的 this.$constant 里面？！SSS Problem！！

不过，某种程度上，这个可以用 Object.freeze 优化一点点（效率提升！！）
参考文档)

  1. import { shopType } from '@/utils/constant'
  3. export {
  4.  data() {
  5.     return {
  6.             shopType: Object.freeze(shopType)
  7.     }
  8.   }
  9. }

另外，值得一提的是，和【浅拷贝】一样，Object.freeze 并不能冻结深层对象

  1. let ty = {a: {b: 1}}
  2. Object.freeze(ty)
  3. ty.a.c = 'hh'
  4. // 对象： {"a":{"b":1,"c":"hh"}}

还值得一提的：v-once指令和Object.freeze是不同的。v-once只是插值（dom上的值）不允许被更新了；但是data中的数据还是允许变更的。

2、Vue插件

一次鉴权选择角色，第一次让我需要用到它

3、动态参数

  1.     <button :[attrName]="attr" @[eventName]="handleEvent">未知事件</button>
  2.     <button @click="changeNull">修改未知事件为null</button>
  1.       eventName: 'click',
  2.       attrName: 'title',
  • 需要在意，vue语法上不允许 :[attrName + “”] 这种操作，eslint也会提醒你无法如此的。Vue官网会提醒你如果非要两者相加得出动态参数值，请使用计算属性，或者在其他地方提前处理好。

那么，动态参数应用在哪里？

我想，如果有一个功能是让用户动态地设置、修改事件触发方式，例如游戏，或者那种高频互动的产品，或有用武之地。

4、关于name属性的作用

image.png

  • 便于调试（有两方面的便于调试，对于你自己、和vue-devtool都是）：用于自己索引，全局搜索的时候方便搜索你要找的组件是什么；方便Vue组件索引，不写的话vue-devtool会使用文件名显示；如果你自己声明了，它会用你起的名字
  • 允许组件递归自身，这个我还没用过
  • 用于作为 keep-alive 的判断依据，如下图所示：

image.pngimage.png

5、关于v-cloak这个属性（知道一下就行，建议立马跳过）

老实说我至今没有遇见它的使用场景。 据说它是为了解决网速过慢，导致的Vue还未加载完毕，页面闪动的问题。

比如你data有一个需要展示的 msg 信息，当vue加载太慢，屏幕上就会出现
{{msg}}
模拟：
image.png
解决：
image.png

6、关于Vue-on事件修饰符中的passive

其实self、once等修饰符也挺少用，不过我学习的时候感觉 passive 是比较难理解的。
image.png