vue常用功能实现
数据绑定与响应式更新
Vue 通过 v-model 实现表单元素与数据的双向绑定，修改数据会自动更新视图。响应式系统基于 Object.defineProperty（Vue 2）或 Proxy（Vue 3），数据变化时触发视图渲染。
<input v-model="message">
<p>{{ message }}</p>data() {
return { message: 'Hello Vue!' }
}条件渲染与列表渲染
v-if 和 v-for 分别控制条件渲染和列表渲染。v-if 会动态添加/移除 DOM 元素，v-show 仅切换 CSS 的 display 属性。
<div v-if="isVisible">显示内容</div>
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>事件处理
通过 v-on（或 @ 简写）绑定事件，支持内联语句或方法调用。事件修饰符（如 .prevent）可简化常见操作。
<button @click="handleClick">点击</button>
<button @click.stop="preventBubble">阻止冒泡</button>methods: {
handleClick() {
console.log('Clicked');
}
}计算属性与侦听器
计算属性（computed）基于依赖缓存，适合复杂逻辑；侦听器（watch）适用于数据变化时执行异步操作。
computed: {
fullName() {
return this.firstName + ' ' + this.lastName;
}
},
watch: {
firstName(newVal) {
console.log('FirstName changed:', newVal);
}
}组件通信
- Props 向下传递：父组件通过
v-bind传递数据给子组件。<child-component :title="parentTitle"></child-component> - 事件向上传递：子组件通过
$emit触发父组件事件。this.$emit('update', newValue); - Vuex/Pinia：状态管理库解决跨组件共享数据问题。
生命周期钩子
常用钩子包括 created（数据初始化）、mounted（DOM 挂载完成）、updated（数据更新后）。Vue 3 组合式 API 使用 setup 替代。
export default {
mounted() {
console.log('组件已挂载');
}
}路由管理（Vue Router）
配置路由表并绑定到组件，通过 <router-view> 显示匹配的组件。
const routes = [
{ path: '/home', component: Home },
{ path: '/about', component: About }
];<router-link to="/home">首页</router-link>状态管理（Vuex/Pinia）
Vuex 的核心包括 state、mutations、actions 和 getters。Pinia 提供更简洁的 API。
// Vuex 示例
const store = new Vuex.Store({
state: { count: 0 },
mutations: {
increment(state) {
state.count++;
}
}
});自定义指令与插件
自定义指令（如 v-focus）封装 DOM 操作，插件可扩展 Vue 全局功能。
directives: {
focus: {
inserted(el) {
el.focus();
}
}
}
