核心概念

本节目标：理解“核心概念”的核心思路，并能把它用于实际开发或面试表达。 Vue.js 是一个渐进式 JavaScript 框架，主要用于构建用户界面。它的设计思想是尽量简单，易于集成和扩展。以下是 Vue.js 的核心概念：

1. 声明式渲染

Vue.js 使用声明式语法来描述 DOM，这使得代码更加简洁和直观。 <div id="app">{{ message }}</div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> 在上面的例子中，{{ message }} 是一个占位符，会被 Vue 实例中的 message 数据替换。

2. 组件系统

组件是 Vue.js 最强大的功能之一。组件允许开发者将 UI 分解成独立、可复用的片段。 Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) var app = new Vue({ el: '#app', data: { groceryList: [ { id: 0, text: 'Vegetables' }, { id: 1, text: 'Cheese' }, { id: 2, text: 'Whatever else humans are supposed to eat' } ] } }) 在上面的例子中，我们定义了一个 todo-item 组件，并在 Vue 实例中使用它。

3. 响应式数据绑定

Vue.js 的核心之一是响应式系统。当数据变化时，视图会自动更新。Vue 通过数据劫持和依赖追踪来实现这一点。 var app = new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }) app.message = 'I have changed the data!' // 视图会自动更新

4. 指令（Directives）

Vue.js 提供了多种指令，用于在模板中操作 DOM。这些指令包括 v-bind、v-model、v-if、v-for 等。 <input v-model="message"> <p v-if="seen">You can see me</p> 在上面的例子中，v-model 实现了双向数据绑定，而 v-if 则根据 seen 的值来决定是否渲染该元素。

5. 计算属性和侦听器

计算属性（computed properties）和侦听器（watchers）是 Vue.js 提供的两种处理数据变化的方式。计算属性基于它们的依赖进行缓存，只有相关依赖发生变化时才重新计算。而侦听器则更适合处理数据变化的异步或复杂逻辑。 var app = new Vue({ el: '#app', data: { message: 'Hello' }, computed: { reversedMessage: function() { return this.message.split('').reverse().join('') } } })

6. 生命周期钩子

Vue 实例在创建时会经过一系列的初始化过程，这个过程中的每个阶段都会触发相应的钩子函数。常用的生命周期钩子包括 created、mounted、updated 和 destroyed。 var app = new Vue({ el: '#app', data: { message: 'Hello Vue.js!' }, created: function() { console.log('Vue instance is created') } })

7. 路由（Vue Router）

Vue Router 是 Vue.js 的官方路由管理器，允许开发者构建单页应用（SPA）。 import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ { path: '/home', component: Home }, { path: '/about', component: About } ] const router = new VueRouter({ routes }) new Vue({ router }).$mount('#app')

8. 状态管理（Vuex）

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } } }) new Vue({ store }).$mount('#app') 通过理解和掌握这些核心概念，可以帮助开发者更好地利用 Vue.js 进行高效开发，创建灵活且可维护的应用程序。