本文深入探讨了Vue2的基础知识和核心概念,包括数据绑定、指令、计算属性、组件化开发等,并提供了详细的代码示例。此外,文章还介绍了Vue2的面试高频问题,帮助读者准备Vue2大厂面试真题。
Vue.js 是一个渐进式的JavaScript框架,它允许开发者逐步增强现有项目或从零开始构建单页应用。Vue2版本是Vue.js的经典版本,它在许多方面为开发者提供了便利。
Vue2通过数据绑定和指令提供了丰富的功能。数据绑定是指将DOM元素的属性与Vue实例上的数据属性动态绑定,指令则是Vue提供的一系列特殊前缀属性,用于操作DOM。
<div id="app"> {{ message }} </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }); </script>
<div id="app"> <img v-bind:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="imageSrc"> </div> <script> var app = new Vue({ el: '#app', data: { imageSrc: 'https://example.com/image.png' } }); </script>
<div id="app"> <button v-on:click="handleClick">Click Me</button> </div> <script> var app = new Vue({ el: '#app', methods: { handleClick: function() { alert('Button clicked!'); } } }); </script>
计算属性允许你基于Vue实例的数据动态生成属性。侦听器则用于监听数据的变化并做出相应反应。
<div id="app"> {{ fullName }} </div> <script> var app = new Vue({ el: '#app', data: { firstName: 'John', lastName: 'Doe' }, computed: { fullName: function() { return this.firstName + ' ' + this.lastName; } } }); </script>
<div id="app"> {{ doubleCount }} </div> <script> var app = new Vue({ el: '#app', data: { count: 1 }, watch: { count: function(newVal, oldVal) { console.log(`Count changed from ${oldVal} to ${newVal}`); } } }); </script>
Vue2支持组件化开发,允许将应用分解为独立、可复用的组件。每个组件都有自己的视图、数据模型和逻辑。
<template> <div> <h1>{{ title }}</h1> <p>{{ message }}</p> </div> </template> <script> export default { props: ['message'], data() { return { title: 'Hello Component' } } } </script> <template> <div id="app"> <app-component message="Hello from App"></app-component> </div> </template> <script> import AppComponent from './components/AppComponent.vue' var app = new Vue({ el: '#app', components: { 'app-component': AppComponent } }); </script>
<template> <div> <input v-model="searchText" placeholder="Search..."> </div> </template> <script> export default { data() { return { searchText: '' } } } </script>
Vue2的数据绑定机制是其核心特性之一,通过双向绑定和事件处理,开发者可以轻松地构建响应式的界面。
<div id="app"> <button v-on:click="increment">Increment</button> <p>{{ count }}</p> </div> <script> var app = new Vue({ el: '#app', data: { count: 0 }, methods: { increment: function() { this.count++; } } }); </script>
<div id="app"> <input v-model="message"> <p>{{ message }}</p> </div> <script> var app = new Vue({ el: '#app', data: { message: '' } }); </script>
Vue2的响应式系统基于数据劫持和依赖收集。数据劫持通过Object.defineProperty
实现,依赖收集则是通过Watcher
对象实现。
var data = { text: 'Hello' }; function observe(data) { if (!data || typeof data !== 'object') { return; } Object.keys(data).forEach(key => { defineReactive(data, key, data[key]); }); } function defineReactive(obj, key, val) { observe(val); Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function() { return val; }, set: function(newVal) { if (val === newVal) { return; } val = newVal; // 触发依赖更新 const dep = new Dep(); dep.notify(); } }); } function Dep() { this.subs = []; } Dep.prototype = { addSub(sub) { this.subs.push(sub); }, notify() { this.subs.forEach(sub => { sub.update(); }); } }; function Watcher(vm, key, callback) { this.vm = vm; this.key = key; this.callback = callback; this.value = this.get(); } Watcher.prototype.get = function() { this.vm.$options.computed[this.key]; return this.vm.$options.computed[this.key].call(this.vm); }; Watcher.prototype.update = function() { this.value = this.get(); this.callback(this.value); }; Vue.prototype.$options.computed = {}; Vue.prototype.$options.computed = function() { const result = this.$options.computed[this.key].call(this); this.callback(result); };
function Watcher(vm, key, callback) { this.vm = vm; this.key = key; this.callback = callback; this.value = this.get(); } Watcher.prototype.get = function() { Dep.target = this; this.vm.$options.computed[this.key]; Dep.target = null; return this.vm.$options.computed[this.key].call(this.vm); }; Watcher.prototype.update = function() { this.value = this.get(); this.callback(this.value); }; var data = new Vue({ data: { message: 'Hello' }, computed: { uppercaseMessage: function() { return this.message.toUpperCase(); } } }); data.$watch('message', function(newVal, oldVal) { console.log(`Message changed from ${oldVal} to ${newVal}`); }); data.message = 'World';
Vue2的响应式系统通过数据劫持和依赖收集实现。当数据发生变化时,框架会自动更新视图,确保应用始终保持同步。
Object.defineProperty
拦截数据属性的读取和设置。Watcher
对象添加到Dep
依赖管理器中。Watcher
对象,重新渲染视图。var data = new Vue({ data: { message: 'Hello' }, computed: { uppercaseMessage: function() { return this.message.toUpperCase(); } } }); data.$watch('message', function(newVal, oldVal) { console.log(`Message changed from ${oldVal} to ${newVal}`); }); data.message = 'World';
Vue2中常用的路由管理工具是Vue Router,而Vuex用于管理应用的状态,提供了一种集中式的状态管理模式。
import Vue from 'vue'; import Router from 'vue-router'; import Home from './components/Home.vue'; import About from './components/About.vue'; Vue.use(Router); export default new Router({ routes: [ { path: '/', component: Home }, { path: '/about', component: About } ] });
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({ commit }) { commit('increment'); } } });
从零开始搭建一个Vue2项目需要安装Vue CLI、配置好项目结构、编写基本组件、设置路由、状态管理等。
npm install -g @vue/cli vue create my-vue-app cd my-vue-app npm run serve
import Vue from 'vue'; import Router from 'vue-router'; import Home from './components/Home.vue'; import About from './components/About.vue'; Vue.use(Router); export default new Router({ routes: [ { path: '/', component: Home }, { path: '/about', component: About } ] });
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({ commit }) { commit('increment'); } } });
Home.vue
组件<template> <div> <h1>Home Page</h1> <p>This is the home page content</p> </div> </template> <script> export default { name: 'Home' } </script>
About.vue
组件<template> <div> <h1>About Page</h1> <p>This is the about page content</p> </div> </template> <script> export default { name: 'About' } </script>
<template> <div> <form @submit.prevent="onSubmit"> <input v-model="username" placeholder="Username"> <input v-model="password" type="password" placeholder="Password"> <button type="submit">Login</button> </form> </div> </template> <script> export default { data() { return { username: '', password: '' } }, methods: { onSubmit() { console.log(`Username: ${this.username}, Password: ${this.password}`); // 提交表单逻辑 } } } </script>
<template> <div> <input v-model="searchText" placeholder="Search..."> <ul> <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li> </ul> </div> </template> <script> export default { data() { return { searchText: '', items: [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' } ] } }, computed: { filteredItems: function() { return this.items.filter(item => item.name.includes(this.searchText)); } } } </script>
import Vue from 'vue'; import Router from 'vue-router'; import Login from './components/Login.vue'; import Search from './components/Search.vue'; Vue.use(Router); export default new Router({ routes: [ { path: '/login', component: Login }, { path: '/search', component: Search } ] });
准备Vue2面试时,重点应放在核心概念、路由与状态管理、组件化开发、数据劫持与依赖收集等方面。熟悉这些问题可以帮助你在面试中表现得更出色。
答案:Vue2的响应式系统基于数据劫持和依赖收集。数据劫持通过Object.defineProperty
实现,依赖收集则是通过Watcher
对象实现。
v-model
如何工作?答案:v-model
实际上是一个语法糖,它在Vue实例中创建了一个data
属性,并绑定相应的input
事件处理器和更新事件处理器。
答案:使用Vue Router,通过定义路由对象和组件来实现路由跳转。例如:
import Vue from 'vue'; import Router from 'vue-router'; import Home from './components/Home.vue'; import About from './components/About.vue'; Vue.use(Router); export default new Router({ routes: [ { path: '/', component: Home }, { path: '/about', component: About } ] });
Vue2、React和Angular都是流行的前端框架,它们各自有优势和劣势。了解这些框架之间的差异有助于你根据项目需求做出更好的选择。
Vue2的官方文档是最权威的学习资源,涵盖了从基础概念到高级特性的所有内容。除了官方文档,还有许多在线教程和课程可以参考。
https://v2.vuejs.org/v2/guide/
虽然没有特别推荐书籍,但有很多优质的线上课程和文章可以帮助你深入学习Vue2。
通过这些资源,你可以系统地学习Vue2,提高你的开发技能。