vue原生实现
以下是 Vue 原生实现常见功能的几种方法，不使用第三方库：
双向数据绑定
使用 v-model 指令实现表单输入与应用状态的双向绑定：
<input v-model="message">
<p>{{ message }}</p>条件渲染
通过 v-if 和 v-show 控制元素显示：
<div v-if="isVisible">条件渲染内容</div>
<div v-show="isActive">显示控制内容</div>列表渲染
使用 v-for 指令渲染数组或对象：
<li v-for="(item, index) in items" :key="item.id">
{{ index }} - {{ item.text }}
</li>事件处理
通过 v-on 或 @ 简写绑定事件：
<button @click="handleClick">点击事件</button>计算属性
使用 computed 处理复杂逻辑：
computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
}侦听器
通过 watch 监听数据变化：
watch: {
message(newVal, oldVal) {
console.log('值变化:', oldVal, '->', newVal)
}
}组件通信
父子组件通过 props 和 $emit 通信：
// 父组件
<child-component :propData="parentData" @custom-event="handleEvent"/>
// 子组件
props: ['propData'],
methods: {
triggerEvent() {
this.$emit('custom-event', payload)
}
}生命周期钩子
常用生命周期示例：
created() {
// 实例创建后调用
},
mounted() {
// DOM挂载后调用
}动态组件
通过 <component> 实现组件动态切换：
<component :is="currentComponent"></component>插槽
使用插槽进行内容分发：
<!-- 父组件 -->
<child-component>
<template v-slot:default>默认插槽内容</template>
</child-component>
<!-- 子组件 -->
<slot name="default"></slot>自定义指令
创建自定义指令：
directives: {
focus: {
inserted(el) {
el.focus()
}
}
}过滤器
实现文本格式化（Vue 3 已移除，可用方法替代）：
filters: {
capitalize(value) {
return value.charAt(0).toUpperCase() + value.slice(1)
}
}混入
使用 mixin 复用逻辑：
const myMixin = {
created() {
this.hello()
},
methods: {
hello() {
console.log('mixin方法')
}
}
}这些方法涵盖了 Vue 核心功能的原生实现方式，适用于大多数基础到中级的开发场景。
