使用 Vue 的一些技巧

👋尽可能地保证父子组件的单向数据流

例如在子组件中直接修改传入的 props 数据，有可能对父组件或是其他数据源造成意外破坏；

👋在 for 模版循环中使用 key

vue在渲染的时候,会 先把 新DOM 与 旧DOM 进行对比， 如果dom结构一致，则vue会复用旧的dom

👋实例中的数据并不都是响应式的

双向绑定流程

1. 创建 vue 实例，对数据对象进行 get/set 劫持；当 set 发生时通知 template 中的订阅者 Watcher 并进行视图更新（响应式原理）；
2. 解析 template 并使得每一个模版变量实现对应的 Watcher 向对应的数据对象进行订阅；
3. 对一些 v-model 指令设置回调函数或是直接触发广播（双向数据绑定）；

通过 key 改变数组/对象时、不会发生数据响应

Vue2 有性能考量所以没有实现、Vue3 实现了；

👋使用 Object.defineProperty 定义访问器

Object.defineProperty(target, key, {.get, set })
ES6: class { get property(){} }

👋将 data 设置为函数并返回数据

每复用一次组件，就会返回一分新的data，让各个组件实例维护各自的数据

👋把数据操作放在 created 生命周期后

在 beforeCreated 中无法访问到实例中的数据

👋把DOM操作放在 mounted 生命周期中

非要在 created 中操作DOM的话，请使用 $nextTick