1
// Vue2 Options API
2
export default {
3
  data() {
4
    return { count: 0 };
5
  },
6
  methods: {
7
    increment() { this.count++; }
8
  },
9
  computed: {
10
    double() { return this.count * 2; }
11
  },
12
  mounted() {
13
    console.log('mounted');
14
  }
15
};
16

17
// Vue3 Composition API
18
import { ref, computed, onMounted } from 'vue';
19

20
export default {
21
  setup() {
22
    const count = ref(0);
23
    const double = computed(() => count.value * 2);
24

25
    function increment() {
26
      count.value++;
27
    }
28

29
    onMounted(() => {
30
      console.log('mounted');
31
    });
32

33
    return { count, double, increment };
34
  }
35
};
36

37
// Vue3 <script setup> 语法糖
38
<script setup>
39
import { ref, computed, onMounted } from 'vue';
40

41
const count = ref(0);
42
const double = computed(() => count.value * 2);
43
const increment = () => count.value++;
44

45
onMounted(() => console.log('mounted'));
46
</script>

1
// 简化实现
2
function defineReactive(obj, key, val) {
3
  const dep = new Dep(); // 依赖管理器
4

5
  Object.defineProperty(obj, key, {
6
    enumerable: true,
7
    configurable: true,
8
    get() {
9
      if (Dep.target) {
10
        dep.addSub(Dep.target); // 依赖收集
11
      }
12
      return val;
13
    },
14
    set(newVal) {
15
      if (newVal === val) return;
16
      val = newVal;
17
      dep.notify(); // 派发更新
18
    }
19
  });
20
}
21

22
function observe(obj) {
23
  if (typeof obj !== 'object') return;
24

25
  Object.keys(obj).forEach(key => {
26
    defineReactive(obj, key, obj[key]);
27
    observe(obj[key]); // 递归监听
28
  });
29
}

1
初始化 -> observe(data) -> defineReactive
2
                                |
3
    渲染 -> Watcher -> 读取数据 -> get 触发 -> 依赖收集
4
                                |
5
    修改数据 -> set 触发 -> dep.notify() -> Watcher.update() -> 重新渲染

1
const obj = { a: 1 };
2
observe(obj);
3

4
// 1. 无法检测对象属性的添加/删除
5
obj.b = 2;           // 不是响应式
6
delete obj.a;        // 不是响应式
7

8
// 解决：Vue.set / Vue.delete
9
Vue.set(obj, 'b', 2);
10
Vue.delete(obj, 'a');
11

12
// 2. 无法检测数组索引修改和长度变化
13
arr[0] = 'new';      // 不是响应式
14
arr.length = 0;      // 不是响应式
15

16
// 解决：变异方法
17
arr.splice(0, 1, 'new');

1
// 简化实现
2
function reactive(target) {
3
  return new Proxy(target, {
4
    get(target, key, receiver) {
5
      const result = Reflect.get(target, key, receiver);
6
      track(target, key); // 依赖收集
7

8
      // 惰性代理嵌套对象
9
      if (typeof result === 'object' && result !== null) {
10
        return reactive(result);
11
      }
12
      return result;
13
    },
14
    set(target, key, value, receiver) {
15
      const oldValue = target[key];
16
      const result = Reflect.set(target, key, value, receiver);
17

18
      if (oldValue !== value) {
19
        trigger(target, key); // 触发更新
20
      }
21
      return result;
22
    },
23
    deleteProperty(target, key) {
24
      const result = Reflect.deleteProperty(target, key);
25
      trigger(target, key);
26
      return result;
27
    }
28
  });
29
}
30

31
// ref 实现（基本类型）
32
function ref(value) {
33
  const wrapper = {
34
    get value() {
35
      track(wrapper, 'value');
36
      return value;
37
    },
38
    set value(newVal) {
39
      if (newVal !== value) {
40
        value = newVal;
41
        trigger(wrapper, 'value');
42
      }
43
    }
44
  };
45

46
  Object.defineProperty(wrapper, '__v_isRef', { value: true });
47
  return wrapper;
48
}

1
import { ref, reactive } from 'vue';
2

3
// ref
4
const count = ref(0);
5
count.value++; // 需要 .value
6
console.log(count.value); // 0
7

8
// reactive
9
const state = reactive({ count: 0 });
10
state.count++; // 直接访问
11
console.log(state.count); // 1
12

13
// 模板中使用（ref 自动解包）
14
// <div>{{ count }}</div>  不需要 .value
15

16
// reactive 的陷阱
17
const state = reactive({ list: [] });
18
state.list = [1, 2, 3];     // ✅ 可以
19
const { list } = state;      // ❌ 解构后失去响应式
20

21
// 解决：toRefs
22
import { toRefs } from 'vue';
23
const { list } = toRefs(state); // ✅ 保持响应式

1
// 真实 DOM
2
<div id="app" class="container">
3
  <h1>Hello</h1>
4
  <p>World</p>
5
</div>
6

7
// 虚拟 DOM
8
const vnode = {
9
  tag: 'div',
10
  props: { id: 'app', class: 'container' },
11
  children: [
12
    { tag: 'h1', props: null, children: 'Hello' },
13
    { tag: 'p', props: null, children: 'World' }
14
  ]
15
};

1
旧头 <---> 新头
2
旧尾 <---> 新尾
3
旧头 <---> 新尾
4
旧尾 <---> 新头

1
// 简化流程
2
function patch(oldVnode, newVnode) {
3
  // 1. 同层比较，不同层直接替换
4
  if (oldVnode.tag !== newVnode.tag) {
5
    replaceNode(oldVnode, newVnode);
6
    return;
7
  }
8

9
  // 2. 文本节点直接更新
10
  if (!newVnode.tag) {
11
    if (oldVnode.text !== newVnode.text) {
12
      oldVnode.elm.textContent = newVnode.text;
13
    }
14
    return;
15
  }
16

17
  // 3. 子节点 Diff
18
  diffChildren(oldVnode.children, newVnode.children);
19
}
20

21
function diffChildren(oldCh, newCh) {
22
  let oldStartIdx = 0, oldEndIdx = oldCh.length - 1;
23
  let newStartIdx = 0, newEndIdx = newCh.length - 1;
24

25
  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
26
    // 四种比较方式
27
    if (sameVnode(oldCh[oldStartIdx], newCh[newStartIdx])) {
28
      patch(oldCh[oldStartIdx++], newCh[newStartIdx++]);
29
    } else if (sameVnode(oldCh[oldEndIdx], newCh[newEndIdx])) {
30
      patch(oldCh[oldEndIdx--], newCh[newEndIdx--]);
31
    } else if (sameVnode(oldCh[oldStartIdx], newCh[newEndIdx])) {
32
      patch(oldCh[oldStartIdx++], newCh[newEndIdx--]);
33
    } else if (sameVnode(oldCh[oldEndIdx], newCh[newStartIdx])) {
34
      patch(oldCh[oldEndIdx--], newCh[newStartIdx++]);
35
    } else {
36
      // 使用 key 查找
37
      const idxInOld = findIdxInOld(oldCh, newCh[newStartIdx]);
38
      if (idxInOld === -1) {
39
        // 新节点，插入
40
        insertBefore(oldCh[oldStartIdx].elm, newCh[newStartIdx]);
41
      } else {
42
        // 移动节点
43
        moveNode(oldCh[idxInOld], newCh[newStartIdx]);
44
      }
45
      newStartIdx++;
46
    }
47
  }
48
}

1
<!-- ❌ 不使用 key，可能导致就地复用 -->
2
<li v-for="item in list">{{ item.name }}</li>
3

4
<!-- ✅ 使用唯一 key，提高 Diff 效率 -->
5
<li v-for="item in list" :key="item.id">{{ item.name }}</li>
6

7
<!-- ❌ 使用 index 作为 key（列表会变化时） -->
8
<li v-for="(item, index) in list" :key="index">{{ item.name }}</li>

1
beforeCreate -> created -> beforeMount -> mounted
2
      |            |            |            |
3
   实例初始化    数据观测完成   模板编译完成   DOM 挂载完成
4
      |
5
      v
6
beforeUpdate -> updated -> beforeDestroy -> destroyed
7
      |            |            |              |
8
   数据更新前    数据更新后    组件销毁前     组件销毁后

1
import { onMounted, onUpdated, onUnmounted } from 'vue';
2

3
export default {
4
  setup() {
5
    // 相当于 beforeCreate / created
6

7
    onMounted(() => {
8
      console.log('DOM 已挂载');
9
    });
10

11
    onUpdated(() => {
12
      console.log('组件已更新');
13
    });
14

15
    onUnmounted(() => {
16
      console.log('组件已卸载');
17
      // 清理定时器、事件监听等
18
    });
19
  }
20
};

1
// 加载渲染过程
2
父 beforeCreate -> 父 created -> 父 beforeMount
3
  -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted
4
-> 父 mounted
5

6
// 更新过程
7
父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
8

9
// 销毁过程
10
父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

1
// 1. props / emit（父子）
2
// 父组件
3
<Child :data="parentData" @update="handleUpdate" />
4
// 子组件
5
props: ['data'],
6
emits: ['update'],
7
this.$emit('update', newValue);
8

9
// 2. v-model
10
// 父组件
11
<Child v-model="value" />
12
// 子组件（Vue3）
13
props: ['modelValue'],
14
emits: ['update:modelValue'],
15
this.$emit('update:modelValue', newValue);
16

17
// 3. provide / inject（跨层级）
18
// 祖先组件
19
provide: {
20
  theme: 'dark'
21
}
22
// 后代组件
23
inject: ['theme']
24

25
// 4. EventBus（Vue2）
26
// bus.js
27
export const bus = new Vue();
28
// 发送
29
bus.$emit('event-name', data);
30
// 接收
31
bus.$on('event-name', callback);
32

33
// 5. mitt（Vue3）
34
import mitt from 'mitt';
35
const emitter = mitt();
36
emitter.emit('event', data);
37
emitter.on('event', callback);

1
// Vuex
2
const store = createStore({
3
  state: { count: 0 },
4
  mutations: {
5
    increment(state) { state.count++; }
6
  },
7
  actions: {
8
    asyncIncrement({ commit }) {
9
      setTimeout(() => commit('increment'), 100);
10
    }
11
  },
12
  getters: {
13
    double: state => state.count * 2
14
  }
15
});
16

17
// Pinia
18
import { defineStore } from 'pinia';
19

20
export const useCounterStore = defineStore('counter', {
21
  state: () => ({ count: 0 }),
22
  getters: {
23
    double: state => state.count * 2
24
  },
25
  actions: {
26
    increment() { this.count++; },
27
    asyncIncrement() {
28
      setTimeout(() => this.increment(), 100);
29
    }
30
  }
31
});
32

33
// 使用
34
const counter = useCounterStore();
35
counter.increment();
36
console.log(counter.double);

1
// 1. v-if vs v-show
2
// v-if：真正销毁/创建，适合不频繁切换
3
// v-show：display: none，适合频繁切换
4
<div v-if="condition">很少切换</div>
5
<div v-show="condition">频繁切换</div>
6

7
// 2. v-for 和 v-if 不要同时使用
8
// ❌
9
<li v-for="item in list" v-if="item.active" :key="item.id">
10

11
// ✅ 使用 computed 过滤
12
computed: {
13
  activeList() {
14
    return this.list.filter(item => item.active);
15
  }
16
}
17
<li v-for="item in activeList" :key="item.id">
18

19
// 3. 列表使用 key
20
<li v-for="item in list" :key="item.id">{{ item.name }}</li>
21

22
// 4. 路由懒加载
23
const routes = [
24
  {
25
    path: '/user',
26
    component: () => import('./views/User.vue')
27
  }
28
];
29

30
// 5. 异步组件
31
const AsyncComponent = defineAsyncComponent(() =>
32
  import('./components/Heavy.vue')
33
);
34

35
// 6. Keep-alive 缓存
36
<keep-alive :include="['UserList', 'ArticleList']">
37
  <router-view />
38
</keep-alive>
39

40
// 7. 事件销毁
41
mounted() {
42
  window.addEventListener('resize', this.handleResize);
43
},
44
beforeUnmount() {
45
  window.removeEventListener('resize', this.handleResize);
46
}
47

48
// 8. 图片懒加载
49
<img v-lazy="imageUrl" />
50

51
// 9. 虚拟滚动（长列表）
52
<RecycleScroller
53
  :items="items"
54
  :item-size="50"
55
>
56
  <template #default="{ item }">
57
    <div>{{ item.name }}</div>
58
  </template>
59
</RecycleScroller>
60

61
// 10. 防抖节流
62
// 搜索框防抖
63
methods: {
64
  handleSearch: debounce(function(query) {
65
    this.fetchResults(query);
66
  }, 300)
67
}

1
// 全局守卫
2
router.beforeEach((to, from, next) => {
3
  // 每次路由跳转前执行
4
  if (to.meta.requiresAuth && !isAuthenticated()) {
5
    next('/login');
6
  } else {
7
    next();
8
  }
9
});
10

11
router.afterEach((to, from) => {
12
  // 跳转完成后执行（不能改变导航）
13
  document.title = to.meta.title;
14
});
15

16
// 路由独享守卫
17
const routes = [
18
  {
19
    path: '/admin',
20
    component: Admin,
21
    beforeEnter: (to, from, next) => {
22
      // 进入该路由前执行
23
      next();
24
    }
25
  }
26
];
27

28
// 组件内守卫
29
export default {
30
  beforeRouteEnter(to, from, next) {
31
    // 进入组件前，无法访问 this
32
    next(vm => {
33
      // 通过 vm 访问组件实例
34
    });
35
  },
36
  beforeRouteUpdate(to, from, next) {
37
    // 路由参数变化时（如 /user/1 -> /user/2）
38
    next();
39
  },
40
  beforeRouteLeave(to, from, next) {
41
    // 离开组件前
42
    if (this.hasUnsavedChanges) {
43
      if (!confirm('确定离开？')) {
44
        next(false);
45
        return;
46
      }
47
    }
48
    next();
49
  }
50
};