ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

vue2 的关键点梳理

2026/9/3 15:22:33 拓冰建站 浏览量
vue2 的关键点梳理 Vue2.01.vue2响应式原理 Object.definePropertyObject.defineProperty()劫持对象属性的 get/set结合发布‑订阅模式Dep、Watcher实现数据驱动视图get页面读取数据时收集依赖watcherset数据修改时触发dep通知watcher更新视图缺陷对象新增 / 删除属性不会触发响应。$set解决数组下标直接赋值、修改 length 不响应使用数组方法重写2.vue2.0生命周期创建beforeCreate → created可访问data/methods,Dom未创建挂载beforeMount → mountedDOM渲染完成可操作DOM发送请求更新beforeUpdate → updated数据更新DOM重绘销毁beforeDestroy → destroyed 销毁定时器、解绑事件3.computed vs watchcomputed计算属性有缓存依赖不变不执行必须return适合数据推导,模板优先使用watch监听无缓存数据改变立即执行适合异步操作、复杂逻辑immediate立即执行deep深度监听4.v-if vs v-showv-if直接销毁/重建DOM频繁切换性能差支持templatev-showdisplay:none控制DOM始终存在频繁切换推荐5.Vue组件通信1.父子props/$emit2.父访问子refs、children3.子访问父$parent、provide/inject(跨层级4.兄弟/跨组件EventBus、Vuex/Pinia6.Vuex五大核心state数据仓库getters计算属性mutations同步修改state唯一修改入口)action异步操作提交mutationsmodules模块化拆分仓库