南宁市企业网站建设,制作网页的方法,中民保险网,国内有哪些顶尖的设计公司Vue 核心概念
1. Vue 的生命周期钩子函数有哪些#xff1f;
Vue 组件生命周期主要分为 8 个阶段#xff1a; 创建阶段#xff1a; beforeCreate#xff1a;实例刚创建#xff0c;data 和 methods 还未初始化created#xff1a;实例创建完成#xff0c;data 和 methods…Vue 核心概念
1. Vue 的生命周期钩子函数有哪些
Vue 组件生命周期主要分为 8 个阶段 创建阶段 beforeCreate实例刚创建data 和 methods 还未初始化created实例创建完成data 和 methods 已初始化但 DOM 未挂载 挂载阶段 beforeMount模板编译完成但未挂载到页面mounted实例已挂载到 DOM可以访问 DOM 元素 更新阶段 beforeUpdate数据更新时触发DOM 未重新渲染updated数据更新完成DOM 已重新渲染 销毁阶段 beforeDestroy实例销毁前仍可访问实例destroyed实例已销毁所有绑定和监听被移除
2. Vue 的双向数据绑定原理是什么
Vue 使用 数据劫持 发布订阅模式 实现双向绑定核心是通过 Object.defineProperty()Vue 2.x或 ProxyVue 3.x来劫持各个属性的 setter 和 getter
Observer递归遍历 data 对象使用 Object.defineProperty 设置 getter/setterDep每个属性都有一个 Dep 实例用于收集依赖WatcherWatcher作为 Observer 和 Compile 的桥梁当数据变化时触发回调Compile解析模板指令初始化视图并订阅数据变化
Vue 3.x 改用 Proxy 实现优势在于
可以直接监听对象而非属性可以直接监听数组变化有更多拦截方法13种性能更好
3. computed 和 watch 的区别是什么
computed
是计算属性基于依赖的响应式数据进行缓存只有依赖的数据发生变化才会重新计算必须有 return 语句适合复杂逻辑计算
watch
是监听器监听特定数据的变化无缓存性每次变化都会执行可以执行异步操作适合数据变化时执行异步或开销较大的操作
4. Vue 组件通信方式有哪些 父子组件通信 props / $emit$parent / $children不推荐ref 获取组件实例 兄弟组件通信 通过共同的父组件中转事件总线Event BusVuex 跨级组件通信 provide / inject$attrs / $listenersVue 2.xVuex 全局通信 Vuex 状态管理Event Bus全局事件总线
Vue 进阶知识
5. Vue 的 nextTick 原理是什么
nextTick 是 Vue 提供的异步延迟执行方法其原理是
Vue 在更新 DOM 时是异步执行的数据变化后不会立即更新 DOM使用微任务microtask优先策略 优先使用 Promise.then降级使用 MutationObserver再降级使用 setImmediate最后使用 setTimeout
使用场景
在数据变化后操作依赖于新 DOM 结构的代码在 created 生命周期中操作 DOM
6. Vue 的虚拟 DOM 和 diff 算法
虚拟 DOM
是用 JavaScript 对象描述真实 DOM 的抽象通过比较新旧虚拟 DOM 的差异最小化 DOM 操作
diff 算法
同级比较不跨级比较比较标签名和 key 值双端比较策略Vue 2.x 新旧节点的首尾各有一个指针共4种比较方式如果都没匹配到则用新节点的 key 在旧节点中查找 最长递增子序列优化Vue 3.x
7. Vue 3 的新特性有哪些 Composition API setup() 函数ref 和 reactive 响应式API更好的逻辑复用 性能提升 使用 Proxy 代替 Object.defineProperty更高效的虚拟 DOM更好的 Tree-shaking 支持 新特性 Fragment多根节点组件Teleport传送门Suspense异步组件自定义渲染器 API TypeScript 支持 完全使用 TypeScript 重写更好的类型推断
8. Vuex 的核心概念是什么
Vuex 是 Vue 的状态管理库核心概念包括
State存储应用状态数据Getter从 state 派生的计算属性Mutation唯一修改 state 的方法同步操作Action提交 mutation可以包含异步操作Module将 store 分割成模块
工作流程 组件 → dispatch Action → commit Mutation → mutate State → 更新视图
Vue 实战问题
9. Vue 的性能优化手段有哪些 编码阶段 合理使用 v-if 和 v-show合理使用 computed 和 watchv-for 必须加 key避免与 v-if 一起使用组件懒加载防抖节流 打包优化 按需引入组件库使用 CDN 加载第三方资源开启 gzip 压缩使用 Tree-shaking 移除无用代码 运行时优化 使用 keep-alive 缓存组件使用 v-once 和 v-memoVue 3长列表虚拟滚动避免大数据响应式
10. Vue Router 的导航守卫有哪些 全局守卫 beforeEach路由进入前beforeResolve路由解析前afterEach路由进入后 路由独享守卫 beforeEnter特定路由进入前 组件内守卫 beforeRouteEnter进入组件前无法访问 thisbeforeRouteUpdate路由改变但组件复用时beforeRouteLeave离开组件前
执行顺序beforeRouteLeave → beforeEach → beforeEnter → beforeRouteEnter → beforeResolve → afterEach
11. 什么是 Vue 的 mixin有什么优缺点
mixin 是一种分发 Vue 组件可复用功能的灵活方式可以包含任意组件选项。
优点
代码复用逻辑解耦维护方便
缺点
命名冲突来源不明确多个 mixin 可能导致复杂度增加
Vue 3 推荐使用 Composition API 替代 mixin。
12. Vue 的响应式原理中数组的处理方式
Vue 2.x 中对数组的特殊处理
重写了数组的 7 个方法 push, pop, shift, unshift, splice, sort, reverse 这些方法被重写后除了执行原生操作外还会触发视图更新直接通过索引修改数组项或修改数组长度不会触发响应式this.items[0] newValue // 不会触发更新
this.items.length 0 // 不会触发更新需要使用 Vue.set 或数组的 splice 方法
Vue 3.x 使用 Proxy 后可以直接检测数组索引和长度的变化。
