-
Vue.js 基础概念:
- Vue.js 是什么:Vue.js 是一款用于构建用户界面的渐进式 JavaScript 框架,采用 MVVM(Model-View-ViewModel)模式,简单灵活,便于开发单页应用。
- MVVM 理解:MVVM 是 Model-View-ViewModel 的缩写,ViewModel 是 View 和 Model 层的桥梁,数据会绑定到 ViewModel 层并自动将数据渲染到页面中。
-
Vue 生命周期:
- Vue 实例从创建到销毁的生命周期包括以下几个阶段:beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。
-
常见指令:
v-bind
:动态绑定属性或样式。v-model
:双向数据绑定,常用于表单元素。v-for
:循环渲染列表。v-if
、v-else-if
、v-else
:条件渲染。v-show
:根据条件展示或隐藏元素。v-on
:事件绑定。v-slot
:具名插槽。
-
Vue 核心特性:
- 响应式数据绑定:通过观察者模式实现数据与视图的双向绑定。
- 组件化:提供可复用的组件结构,便于管理和维护代码。
- 指令:如 v-bind, v-if, v-for 等用于操作 DOM。
- 单文件组件:支持 .vue 格式的文件,将模板、脚本和样式分离。
-
Vue3 与 Vue2 的区别:
- 响应式系统:Vue3 使用 Proxy 替代 Vue2 的 Object.defineProperty,支持数组操作,克服了 Object.defineProperty 的局限性。
- 生命周期变化:Vue3 中生命周期钩子函数有所变化。
- 编译优化:Vue3 在编译和打包体积上进行了优化。
-
Vue 数据双向绑定原理:
- v-model:通过 value 和 input 事件实现双向数据绑定,适用于表单元素。
- 计算属性(computed)和侦听器(watch)的区别及运用场景:computed 适用于依赖其他数据时进行计算,具有缓存特性;watch 更适合执行异步或开销较大的操作,无缓存。