vue每日一问(5)

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第5天，点击查看活动详情

一。Vue.observable你有了解过吗

可以理解成Vue的观察者，Vue.observable，让一个对象变成响应式数据，Vue 内部会用它来处理 data 函数返回的对象。

在 Vue 2.x 中，被传入的对象会直接被 Vue.observable 变更，它和被返回的对象是同一个对象

在 Vue 3.x 中，则会返回一个可响应的代理，而对源对象直接进行变更仍然是不可响应的

二。你知道vue中key的原理吗

在列表渲染时，通常都要加key，那是因为Vue在渲染页面时，会先将数据转为虚拟DOM，再将虚拟DOM转为真实DOM。

每一个虚拟DOM都对应一个唯一的key值，当前数据变化后，会重新生成一份新的虚拟DOM，跟之前生成的虚拟DOM进行比对，只会向页面中更新key值 或 value值 不一样的那些虚拟DOM。

所以，列表渲染是加key，是为了提供列表的渲染效率，而这个效率主要体现在数据更新后。

key值最好不要是索引，一般都是采用对象的唯一属性值，比如：学号、工号、身份证号、车牌号等等，

因为如果key值是索引，数据的顺序发生变化后，之前生成的虚拟DOM就全部失效了，比如：向数组的开头添加一份数据。

三。说说你对keep-alive的理解是什么

keep-alive内置组件，用于缓存组件，防止组件在切换过程中状态的丢失。

属性：include(指定缓存哪些组件)，exclude(指定排除缓存哪些组件)，max(指定缓存组件的最大数量)

组件缓存后，不会再重复触发 mounted 和 destroyed 等生命周期函数，可以通过 activated 和 deactivated 代替。

四。Vue常用的修饰符有哪些

在Vue中，修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理。

vue中修饰符分为以下五种：

• 表单修饰符 (lazy,trim,number,通常跟v-model指令配合使用)

  • lazy：鼠标离开文本框时触发更新，也就是在change事件之后再进行信息同步
  • trim：自动过滤用户输入的首尾空格字符，而中间的空格不会过滤
  • number：自动将用户的输入值转为数值类型

• 事件修饰符 (stop,prevent,self,once,capture,passive,native)

  • stop：阻止了事件冒泡，相当于调用了event.stopPropagation方法
  • prevent：阻止了事件的默认行为，相当于调用了event.preventDefault方法
  • self：只当在 event.target 是当前元素自身时触发处理函数
  • once：绑定了事件以后只能触发一次，第二次就不会触发
  • capture：使事件触发从包含这个元素的顶层开始往下触发
  • passive：在移动端，当我们在监听元素滚动事件的时候，会一直触发onscroll事件会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll事件整了一个.lazy修饰符
  • native：让组件变成像html内置标签那样监听根元素的原生事件，否则组件上使用 v-on 只会监听自定义事件

• 鼠标按键修饰符 (left,right,middle)

  • left 左键点击
  • right 右键点击
  • middle 中键点击

• 键值修饰符

  • 普通键（enter、tab、delete、space、esc、up...）
  • 系统修饰键（ctrl、alt、meta、shift...）

• v-bind修饰符 (async,prop,camel)

  • async：能对props进行一个双向绑定
  • prop：设置自定义标签属性，避免暴露数据，防止污染HTML结构
  • camel：将命名变为驼峰命名法，如将view-Box属性名转换为 viewBox