不负芳华，Vue 1.x的珍贵记忆与未来展望

2024-01-26 21:15:39

手写 Vue 1.x 是一个充满挑战和收获的经历，其中也遇到了不少坑，这些坑有的来自框架本身，有的则来自个人的认知不足。然而，这些坑也成为了我们宝贵的财富，让我们在未来更谨慎、更深入地学习和使用框架。

1. 路由坑

在 Vue 1.x 中，路由是一个比较复杂的概念，它需要手动配置和维护。如果配置不当，很容易导致路由跳转失败或者出现其他问题。

// 路由配置
const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/contact', component: Contact },
  ]
})

// 在 Vue 实例中使用路由
new Vue({
  router,
  el: '#app',
  template: `<div id="app"><router-view></router-view></div>`,
})

在上面这个简单的路由配置中，需要注意以下几点：

路由路径需要以斜杠开头，否则会报错。
组件名称必须与组件定义的名称一致，否则会报错。
路由视图<router-view>必须放在Vue实例的根元素中，否则路由跳转不会生效。

2. 组件坑

在 Vue 1.x 中，组件也是一个比较复杂的概念，它需要手动定义和注册。如果定义不当，很容易导致组件无法使用或者出现其他问题。

// 组件定义
const MyComponent = {
  template: '<div>这是一个组件</div>',
}

// 组件注册
Vue.component('my-component', MyComponent)

// 在 Vue 实例中使用组件
new Vue({
  el: '#app',
  template: '<div id="app"><my-component></my-component></div>',
})

在上面这个简单的组件定义和注册中，需要注意以下几点：

组件名称必须以连字符分隔，否则会报错。
组件模板必须是一个字符串，否则会报错。
组件必须在 Vue 实例中注册，否则无法使用。

3. 数据绑定坑

在 Vue 1.x 中，数据绑定是一个非常重要的概念，它允许组件与数据模型进行交互。如果数据绑定不当，很容易导致数据更新失败或者出现其他问题。

// 数据模型
const data = {
  message: 'Hello World',
}

// Vue 实例
new Vue({
  data,
  el: '#app',
  template: '<div id="app">{{ message }}</div>',
})

在上面这个简单的數據綁定中，需要注意以下几点：

数据模型必须是一个对象，否则会报错。
数据模型中的属性名称必须与组件模板中的表达式一致，否则不会生效。
数据模型中的属性必须是可响应的，否则组件无法监听数据的变化。

4. 事件处理坑

在 Vue 1.x 中，事件处理也是一个非常重要的概念，它允许组件对用户的操作做出响应。如果事件处理不当，很容易导致事件无法触发或者出现其他问题。

// Vue 实例
new Vue({
  el: '#app',
  template: '<div id="app"><button @click="handleClick">点击我</button></div>',
  methods: {
    handleClick() {
      console.log('按钮被点击了')
    },
  },
})

在上面这个简单的事件處理中，需要注意以下几点：

事件监听器必须使用@符号，否则不会生效。
事件处理函数必须是一个方法，否则会报错。
事件处理函数中的this指向组件实例，因此可以使用组件实例中的数据和方法。

5. 生命周期钩子坑

在 Vue 1.x 中，生命周期钩子是一个非常重要的概念，它允许组件在不同的生命周期阶段执行特定的操作。如果生命周期钩子不当，很容易导致组件无法正常工作或者出现其他问题。

// Vue 实例
new Vue({
  el: '#app',
  template: '<div id="app">{{ message }}</div>',
  data() {
    return {
      message: 'Hello World',
    }
  },
  created() {
    console.log('组件已创建')
  },
  mounted() {
    console.log('组件已挂载')
  },
  updated() {
    console.log('组件已更新')
  },
  beforeDestroy() {
    console.log('组件即将销毁')
  },
  destroyed() {
    console.log('组件已销毁')
  },
})