20201127

image.png
image.png
image.png

20201026

eval 的使用。
eval 接受一个字符串，然后会执行字符串内指定的代码，这段代码可以是表达式，也可以是任何执行语句或语句的组合。在执行完指定的代码后，如果最后执行的是一个表达式，则会返回该表达式的计算结果。

作用域

默认情况下，eval 内的代码运行在 eval 语句所在的作用域内，其可以获取到两个地方定义的变量：当前运行作用域和全局作用域。

有一个情况是例外，如果对 eval 的使用是引用的方式, 例如将 eval 赋值给另一个变量，那么 eval 内的代码实际执行在全局作用域，也就是只能获取到全局作用域的变量，而无法获取本地作用域的变量。

缺点

  • 安全性

eval 的一个缺点是不安全。 eval 内的代码可以获取当前作用域和全局作用域的一些变量和方法，如果参数字符串内包含有恶意代码，直接执行就会引发安全问题。

  • 性能问题

eval 将需要调用 javascript 解释器来将字符串代码转为机器码。由于之前所有的代码都已经转成了机器码，之前定义的变量名字已经不存在了，所以对于 eval 内代码变量的引用，需要去当前作用域及全局作用域去寻找这个变量是否存在。进一步的，由于 eval 内的代码还会对当前上下文做一些更改，所以浏览器不得不重新运行当前生成的机器码，来应用这个更改。

严格模式

在非严格模式下，eval语句中声明的变量声明在 eval 当前执行时所在的作用域。

  1. function a() {
  2.       eval('a = 8')
  3.     console.log(a)
  4. }
  5. a()

在严格模式下，eval 中的语句有自己的作用域，所以在 eval 中声明的变量，是无法在 eval 语句以外的地方获取到的。

  1. function a(){
  2.         "use strict";
  3.         eval('let a2 = 8')
  4.         console.log(a2)
  5.  }
  6. a()
  7. // Uncaught ReferenceError: a2 is not defined

20201020

  • 响应式对象中 symbol 的变动，不会触发watcher

  • v-model 中改变数据后会触发视图更新？？

    • 这个问题是因为 v-model 会把 v-model="item.value" 中的赋值操作改为 $set(item,'value') 。

  • 在grid-item中使用 min-width: 0 可以让文字截断 显示 ... ,如果使用 overflow:hidden 会有缺点，不能展示内层元素的阴影。 参考 。

    20200924

    解构的小坑

    解构时的默认值只对 undefined 的变量有效，对于 null 、 '' 这些都是不起作用的。

    20200917

    文字两端对齐

    1. span {
    2.   text-align: 'justify'; // 对最后一行不生效
    3. text-align-last: 'justify'; // 针对最后一行
    4. }

    20200521

    WeakSet 与 Set 的区别

  • Set 可以存储任何值，而WeakSet只能存储对象，因为WeakSet存储的是弱引用，其对对象的引用在垃圾清理时是不被考虑在内的。

  • WeakSet 是不可遍历的，所以没有values, keys entries, forEach等方法

  • WeakSet 没有size的属性

    querySelectoAll 和 getElementsByClassName的区别

    querySelectorAll 返回的是静态节点，也就是说是一组元素的快照。之后DOM的改变不会动态反应的所取出来的数据中。
    而getElementsByClassName 返回的是动态引用，当DOM进行变化时，是会实时反应到我们的变量中的。
    举个例子，分别用两个方法查询同一个父元素下面的相同类型子元素，返回了两个变量 a1 和 a2，如果我们给父元素增加一个子元素，那么a1中是不包含这个元素的，但是a2却包含。

    Vue 3 Composition API RFC阅读笔记

  • composition api 与 options api 混用时，

    • setup 在 data 、 computed 、 methods 之前运行，所以在setup之前拿不到data里面的数据
    • setup中返回的属性会挂载到this上面，所以可以在methods 、computed 中取到这些值
  • ref 和 reactive 的区别

ref 用来把一个变量变成响应式的，其内部是把该变量转化成了一个对象，对象的 value 属性存放其值。所以其可作为响应式的数据来追踪。 reactive 用来把一个对象变成响应式的对象，其中的属性都会被追踪。但是有个局限性，这个对象不能被解构或者用 ... 展开符展开到另一个对象中，这样会丢失响应式。因为属性所属的顶层对象已经变了。Vue 提供了 toRefs api ，可以用来把 reactive 返回的对象属性都转成 ref ,这样就可以单独使用其属性了。

ios去掉 input 选中灰色背景

展开
input{
-webkit-tap-highlight-color:transparent;
}

20200516

  • 自定义输入框的闪烁光标颜色

    1. input { caret-color: red; }

  • 自定义鼠标光标的图案和样式 参考 

    1. cursor: url(a.svg) 5 5, url(b.png), zoom-in;

  • vue router 配合 keep-alive 使用，缓存路由状态

    1. <keep-alive :include="[ 'navbar' ]" :exclude="'profile'" :max="5"></keep-alive>
    2. <keep-alive :include="a|b" :max="5"></keep-alive>
    3. <keep-alive :include="a|b" :max="5">
    4.   <router-view></router-view>
    5. </keep-alive>

  • functional 组件不能使用 vue 组件

20200510

meta标签

meta标签是用来描述metadata的，metadata就是用来描述数据的数据。
一般meta标签有如下几种内容：

  • name: 如果出现了name属性，其代表一个文档级别的metadata。
  • http-equiv: 如果出现了http-equiv属性，可以代表一个合法的HTTP header
  • charset: 定义文档的字符集

  • itemprop: 定义用户定义的metadata，每个元素都可以有一个itemprop属性，其内容为name和value

    20200305

    vue-styleguidist问题总结

    ignore使用

  • @ignore 现在已经支持 event 和props了 参考

  • vue-docgen-loader@1.4 目前支持给slot加ignore，但是vue-styleguidist 好像还不行，有待解决
  • 对于event的忽略，貌似多个相同的event，会强制保留一个

    TS类型的vue文件

    @displayName 不生效，文档中显示的名字就是组件的 name 属性

20180817

  1. Vue 父组件调用子组件的方法：
  1. this.$refs.child.method();

20181024

Powershell 因为在此系统上禁止运行脚本

在 powershell 中运行脚本，会出现：
无法加载文件 **.ps1，因为在此系统中禁止执行脚本。有关详细信息，请参阅 “get-help about_signing”。

powershell执行脚本有以下几种策略：

  • restricted: 默认值，不允许脚本执行；

  • remotesigned:

  • allsigned

可以使用以下命令：

  1. # 获取执行策略
  2. get-executionpolicy
  4. # 设置执行策略
  5. set-executionpolicy remotesigned