vue-知识点总结

历史

1. 2015年 10月27 1.0.0 Evangelion 新福音战士
2. 2016年 10月1日 2.0.0 Ghost in the Shell 攻壳机动队
3. 2019年 2月 2.6
4. 2020年 9月18日 3.0.0 One Piece(海贼王)
5. 2021年 8月10日 3.2.0

.sync

where

父向子传递props, 需要双向绑定的时候(子组件想更新这个值)

how

  <one-component :title.sync="xx"></one-component>相当于<one-component v-bind:title="xx"v-on:update:title="xx = $event"></one-component>子组件: this.$emit('update:title', newTitle) 更新

what

指令修饰符,vue2.3 提出, vue3.x被v-model替代

lazy trim number stop capture prevent self once native left/right/middle passive camel

MVC MVVM

1. MVC(model 从数据库取数据 controller 逻辑代码 View 视图) c 把 m 展示 成 v
2. MVVM

指令

1. v-once: 只渲染一次
2. v-slot 缩写是#
3. v-pre 跳过编译
4. v-cloak

组件间通信

简单的层级: 父子 孙子

1. props/$emit
2. 获取实例: $parent $children($children vue3.0移除了) $refs(vue3用ref, 同时子组件需要defineExpose暴露数据)
3. $attrs和$listener 这两个属性有点类似,一个得到的是没在props定义的属性, 一个得到的是自定义方法, 可以直接传方法, 这样子组件调用父组件的方法, 可以父子组件传值  $listeners在vue3被移除了
4. provie inject

复杂的层级

5. Vuex/pinia
6. eventBus(vue3被移除了$on $emit $once,但可以借助第三方工具来完成。Vue 官方推荐使用 mitt 或 tiny-emitter) 事件总线.利用了vue实例的$emit $on
7. 使用浏览器本地缓存，例如localStorage, 他是没有响应式的.

绑定样式

动态class对象：<div :class="{ 'is-active': true, 'red': isRed }"></div>
动态class数组：<div :class="['is-active', isRed ? 'red' : '' ]"></div>
动态style对象：<div :style="{ color: textColor, fontSize: '18px' }"></div>
动态style数组：<div :style="[{ color: textColor, fontSize: '18px' }, { fontWeight: '300' }]"></div>

响应式

整体思路是数据劫持+观察者模式
对象内部通过 defineReactive 方法，使用 Object.defineProperty 将属性进行劫持（只会劫持已经存在的属性），数组则是通过重写数组方法来实现。当页面使用对应属性时，每个属性都拥有自己的dep属性，存放他所依赖的 watcher（依赖收集），当属性变化后会通知自己对应的 watcher 去更新(派发更新)。

怎么让数据不是响应式
// 方法一：将数据定义在data之外
data () {this.list1 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }return {}}// 方法二：Object.freeze()
data () {return {list1: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),}}

对象新属性无法更新视图：使用Vue.$set(obj, key, value)，组件中this.$set(obj, key, value)
删除属性无法更新视图：使用Vue.$delete(obj, key)，组件中this.$delete(obj, key)

参考

vue官方-sync修饰符
vue官方-迁移指南
「自我检验」熬夜总结50个Vue知识点，全都会你就是神！！！