此文章深入浅出地讲解了Vue2的核心原理、组件系统、数据绑定与事件处理，以及模板语法等关键内容。从基础概念到高级实践，包括生命周期管理、状态管理与优化策略，涵盖了Vue2开发的多个层面。示例代码详细展示了如何通过Vue2构建动态、交互性强的用户界面，以及如何有效管理数据和组件间的交互。此外，文章还提供了Vue2面试题的解答范例，帮助开发者系统性地理解和准备面试中的常见问题。

示例代码

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
});

示例代码

// MyComponent.vue
export default {
  template: `
    <div>
      <h1>{{ message }}</h1>
      <button @click="greet">Greet</button>
    </div>
  `,
  data() {
    return {
      message: 'Hello!'
    };
  },
  methods: {
    greet() {
      this.message = 'Hello, from component!';
    }
  }
};

<!-- App.vue -->
<template>
  <div>
    <my-component></my-component>
  </div>
</template>

示例代码

<div id="app">
  <input v-model="user">
  <button @click="sendMessage">Send</button>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    user: '',
    message: ''
  },
  methods: {
    sendMessage() {
      alert(this.user);
    }
  }
});
</script>

示例代码

<!-- App.vue -->
<template>
  <div>
    <p>{{ greeting }}</p>
    <ul>
      <li v-for="item in items" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: 'Vue2 User',
      greeting: 'Hello',
      items: ['One', 'Two', 'Three']
    };
  }
};
</script>

示例代码

<!-- App.vue -->
<template>
  <div>
    {{ user }}
    <div v-if="isLoggedIn">Logged in</div>
    <div v-else>Not logged in</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: 'Vue2 User',
      isLoggedIn: true
    };
  }
};
</script>

示例代码

<!-- App.vue -->
<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['One', 'Two', 'Three']
    };
  }
};
</script>

示例代码

// MyComponent.vue
export default {
  created() {
    console.log('Created');
  },
  mounted() {
    console.log('Mounted');
  },
  updated() {
    console.log('Updated');
  },
  beforeDestroy() {
    console.log('Before Destroy');
  }
};

示例代码

// MyComponent.vue
export default {
  data() {
    return {
      message: 'Hello'
    };
  },
  watch: {
    message(newVal, oldVal) {
      console.log('Message changed from', oldVal, 'to', newVal);
    }
  }
};

示例代码

// MyComponent.vue
export default {
  beforeDestroy() {
    console.log('Destroying');
  }
};

示例代码

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment(context) {
      context.commit('increment');
    }
  },
  getters: {
    getCount(state) {
      return state.count;
    }
  }
});

<!-- App.vue -->
<script>
import store from './store';

export default {
  computed: {
    count() {
      return this.$store.getters.getCount;
    }
  },
  methods: {
    increment() {
      this.$store.dispatch('increment');
    }
  }
};
</script>

示例代码

// MyComponent.vue
export default {
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
};

示例代码

// store.js
export default new Vuex.Store({
  modules: {
    users: {
      state: {
        users: []
      },
      mutations: {
        addUser(state, user) {
          state.users.push(user);
        }
      },
      actions: {
        addUser(context, user) {
          context.commit('addUser', user);
        }
      }
    }
  }
});

示例代码

// MyComponent.vue
export default {
  data() {
    return {
      message: 'Hello Vue2!'
    };
  },
  created() {
    console.log('Component created');
  },
  mounted() {
    console.log('Component mounted');
  },
  methods: {
    updateMessage() {
      this.message = 'Updated';
    }
  }
};

示例代码

<!-- App.vue -->
<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="updateMessage">Update Message</button>
    <user-list :users="users" @user-added="addUser"></user-list>
  </div>
</template>

<script>
// UserList.vue
export default {
  props: {
    users: Array,
    addUser: Function
  },
  methods: {
    addUser(user) {
      this.addUser(user);
    }
  }
};
</script>

示例代码

// MyComponent.vue
export default {
  data() {
    return {
      message: 'Hello Vue2!'
    };
  },
  mounted() {
    // 模拟一个常见的错误：在mounted生命周期钩子中直接修改数据
    this.message = 'Error in mounted method';
    console.log(this.message);
  },
  methods: {
    // 正确的做法应该在methods中修改，确保组件的正确更新流程
    updateMessage() {
      this.message = 'Updated';
    }
  }
};