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

幸运丫
263 阅读5分钟

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

$event

  • $event 可以用来在传参中占位

image.png

  • $event 的位置是很灵活的，只要在 template 的方法传参中，传入了 $event，那么在 methods 中就能在对应位置取到 MouseEvent 事件

image.png

事件修饰符

  • Vue 中的事件修饰符
    1. prevent：阻止默认事件（常用）【e.preventDefault】
    2. stop：阻止事件冒泡（常用）【e.stopPropagation】
    3. once：事件只触发一次（常用）
    4. capture：使用事件的捕获模式
    5. self：只有 event.target 是当前操作的元素时才触发事件
    6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕

键盘事件

  1. Vue 中常用的按键别名
    1. 回车 => enter
    2. 删除 => delete（捕获“删除”和“退格”键）
    3. 退出 => esc
    4. 空格 => space
    5. 换行 => tab（结合 keydown 使用）
    6. 上 => up
    7. 下 => down
    8. 左 => left
    9. 右 => right
  2. Vue 未提供别名的按键，可以使用按键原始的 key 值去绑定，但注意要转为 kebab-case(短横线命名)，@keyup.caps-lock="showInfo"
  3. 系统修饰键（用法特殊）：ctrl、alt、shift、meta(win键)
    1. 配合 keyup 使用：按下修饰键的同时，再按下其他键，随后释放其它键，事件才被触发
    2. 配合 keydown 使用：正常触发事件
  4. 也可以使用 keyCode 去指定具体的按键（不推荐，因为不同键盘的按键略有不同，而且 keyCode 后续浏览器不再支持）
  5. Vue.config.keyCodes.自定义键名 = 键码，可以定制按键别名（不推荐）

计算属性

  1. 定义：要用的属性不存在，要通过已有属性计算得来
  2. 原理：底层借助了 Object.defineProperty 方法提供的 getter 和 setter
  3. get 函数什么时候执行？
    (1) 初次读取时会执行一次
    (2) 当依赖的数据发生改变时会被再次调用
  4. 优势：与 methods 实现相比，内部有缓存机制（复用），效率更高，调试方便
  5. 备注：
    (1) 计算属性最终会出现在 vm 上，直接读取使用即可
    (2) 如果计算属性要被修改，那必须写 set 函数去响应修改，且 set 中药引起计算时依赖的数据发生改变

计算属性内部有缓存机制，提高效率，避免反复计算

image.png

计算属性简写形式

image.png

模板中点击事件 alert

  • 模板中出现了 alert(1) 方法调用，浏览器会先去 vm 身上找 alert 方法，发现没有，会向 vm 的原型对象上寻找，即 Vue 对象，发现还是没有，就会报错。

image.png

image.png

监视属性 watch

监视的两种写法

  1. new Vue 时传入 watch 配置
  2. 通过 vm.$watch 监视

image.png

监视多级结构中某个属性的变化

image.png

  • 直接监视 number，里面的 a 或者 b 发生变化，并不会触发 watch 中 number 的 handler 方法，这是因为，number 中存的其实是 {a:1,b:1} 的地址，改变 a 或者 b 的值，并没有改变这个对象的地址，所以监视不会触发

image.png

深度监视

  1. Vue 中的 watch 默认不监测对象内部值的改变（一层）
  2. 配置 deep:true 可以检测对象内部值改变（多层）

备注：

  1. Vue 自身可以监测对象内部值的改变，但 Vue 提供的 watch 默认不可以
  2. 使用 watch 时根据数据的具体结构，决定是否采用深度监视

监视的简便写法

  • watch 简便写法

image.png

  • vm.$watch 简便写法

image.png

computed 和 watch 之间的区别

  • 区别
    1. computed 能完成的功能，watch 都可以完成
    2. watch 能完成的功能，computed 不一定能完成，例如：watch 可以进行异步操作
  • 两个重要的小原则
    1. 所被 Vue 管理的函数，最好写成普通函数，这样 this 的指向才是 vm 或 组件实例对象
    2. 所有不被 Vue 所管理的函数（定时器的回调函数、ajax 的回调函数、Promise 的回调函数等），最好写成箭头函数，这样 this 的指向才是 vm 或 组件实例对象

绑定 class 样式

  • 字符串写法，适用于：样式的类名不确定，需要动态指定
<div class="basic" :class="mood" @click="changMood">{{name}}</div>

data: {
    mode: 'normal'
}
  • 数组写法，适用于：要绑定的样式个数不确定、名字也不确定
<div class="basic" :class="classArr" @click="changMood">{{name}}</div>

data: {
    classArr: ['a','b','c']
}
  • 对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用
<div class="basic" :class="classObj" @click="changMood">{{name}}</div>

data: {
    classObj: {
        a: false,
        b: false
    }
}

列表渲染

  • 可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

  • 遍历数组 image.png

  • 遍历对象 image.png

  • 遍历字符串 image.png

  • 遍历指定次数 image.png

key 作用与原理

vue 中的 key 有什么作用？

  1. 虚拟 DOM 中 key 的作用：
    key 是虚拟 DOM 对象的标识，当数据发生变化时，Vue 会根据【新数据】生成【新的虚拟 DOM】，随后 Vue 进行【新虚拟 DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
  2. 对比规则：
    1. 旧虚拟 DOM 中找到了与新虚拟 DOM 相同的 key：
      a. 若虚拟 DOM 中内容没变，直接使用之前的真实 DOM；
      b. 若虚拟 DOM 中内容变了，则生成新的真实 DOM，随后替换掉页面中之前的真实 DOM。
    2. 旧虚拟 DOM 中未找到与新虚拟 DOM 相同的 key:
      创建新的真实 DOM，随后渲染到页面
  3. 用 index 作为 key 可能会引发的问题：
    1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作：
      会产生没有必要的真实 DOM 更新 ==> 界面效果没问题，但效率低
    2. 如果结构中还包含输入类 DOM：
      会产生错误 DOM 更新 ==> 界面有问题
  4. 开发中如何选择 key？
    1. 最好使用每条数据的唯一标识作为 key，比如 id、手机号、身份证号、学号等卫衣值；
    2. 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用 index 作为 key 是没有问题的。

image.png

image.png

sort

  • 前 - 后 = 升序
  • 后 - 前 = 降序
let arr = [1, 3, 2, 6, 4, 5]
arr.sort((a,b)=>{
    return a-b // 前 - 后 = 升序
})
// arr: [1,2,3,4,5,6]


let arr = [1, 3, 2, 6, 4, 5]
arr.sort((a,b)=>{
    return b-a // 后 - 前 = 降序
})
// arr: [6,5,4,3,2,1]
avatar
文章
阅读
粉丝