历史
- 2015年 10月27 1.0.0 Evangelion 新福音战士
- 2016年 10月1日 2.0.0 Ghost in the Shell 攻壳机动队
- 2019年 2月 2.6
- 2020年 9月18日 3.0.0 One Piece(海贼王)
- 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
- MVC(model 从数据库取数据 controller 逻辑代码 View 视图) c 把 m 展示 成 v
- MVVM
指令
- v-once: 只渲染一次
- v-slot 缩写是#
- v-pre 跳过编译
- 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知识点，全都会你就是神！！！
