1. Vue.js 基础语法
Vue.js 的基础语法简单易懂,主要通过 Vue 实例将数据与视图进行绑定,实现响应式渲染。Vue 提供了声明式渲染、事件处理、计算属性等功能,简化了前端开发中的逻辑。
示例:
<div id="app">
<p>{{ message }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>
在这个简单的例子中,Vue 实例绑定在 #app
DOM 元素上,并通过 {{ message }}
将数据动态渲染到页面上。
2. Vue 实例与组件
Vue 实例
Vue 实例是 Vue 应用的核心部分,它提供了数据、方法、生命周期钩子等。每个 Vue 应用至少需要一个 Vue 实例。
示例:
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
greet() {
alert(this.message);
}
}
});
Vue 组件
Vue 组件是应用的可复用部分。组件可以是单独的视图模块,也可以嵌套到其他组件中,形成复杂的界面。
示例:
<div id="app">
<greeting></greeting>
</div>
<script>
Vue.component('greeting', {
template: '<p>Hello from a component!</p>'
});
new Vue({
el: '#app'
});
</script>
实现原理
Vue 实例通过 new Vue()
创建,组件则通过 Vue.component()
全局注册。Vue 的响应式系统会将数据与 DOM 绑定,通过观察者模式检测数据变化,实时更新视图。
3. 模板语法与指令
模板语法
Vue 使用简单的模板语法,通过双大括号 {{ }}
来插入变量,动态绑定数据到 HTML 结构。
指令
指令是以 v-
开头的特殊属性,用于在 DOM 上应用特定的行为。常见的指令有:
v-bind
:动态绑定属性v-if
:条件渲染v-for
:列表渲染v-model
:双向数据绑定
示例:
<div id="app">
<input v-bind:placeholder="message">
<p v-if="seen">This is visible</p>
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Enter something',
seen: true,
items: ['Apple', 'Banana', 'Orange']
}
});
</script>
原理解释
Vue 的模板语法和指令都是通过编译器解析的。当模板编译时,Vue 会生成虚拟 DOM,确保数据的变化能够高效地反映在视图中。
4. 事件处理与双向数据绑定
事件处理
Vue 允许在模板中通过 v-on
指令(或 @
简写)来绑定事件监听器,执行特定的 JavaScript 函数。
示例:
<div id="app">
<button v-on:click="greet">Greet</button>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
greet() {
alert(this.message);
}
}
});
</script>
双向数据绑定
v-model
是 Vue 提供的双向数据绑定指令,通常用于表单控件。它实现了视图与数据的双向同步。
示例:
<div id="app">
<input v-model="message">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Type something'
}
});
</script>
实现原理
事件处理通过 v-on
指令将 DOM 事件绑定到 Vue 实例的方法中。v-model
双向数据绑定依赖于 input
、change
事件监听器和数据更新同步,实现数据与视图的双向绑定。
5. 计算属性与侦听器
计算属性
计算属性是基于依赖缓存的属性,只在依赖的值发生变化时重新计算。相比于在模板中使用方法,计算属性更加高效。
示例:
<div id="app">
<p>{{ reversedMessage }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello'
},
computed: {
reversedMessage() {
return this.message.split('').reverse().join('');
}
}
});
</script>
侦听器(Watchers)
侦听器用于观察数据的变化,并在变化时执行回调函数。适合处理异步或复杂的逻辑。
示例:
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello'
},
watch: {
message(newValue) {
console.log('Message changed to:', newValue);
}
}
});
</script>
实现原理
计算属性依赖于 Vue 的响应式系统,只有在依赖的值发生变化时才会重新计算。侦听器则通过观察者模式,在特定数据变化时执行指定的回调函数。
Vue.js 的底层原理
Vue.js 的核心在于其响应式系统与虚拟 DOM。响应式系统通过 Object.defineProperty
(Vue 2)或 Proxy
(Vue 3)实现对数据的劫持,检测数据变化,通知视图更新。虚拟 DOM 则通过对比新旧 DOM 树的差异(diff 算法),仅更新必要的部分,大幅提高渲染性能。
响应式原理(Vue 2)
Vue 2 使用 Object.defineProperty()
来劫持数据对象的属性,动态添加 getter 和 setter,检测到数据变化时触发视图更新。
响应式原理(Vue 3)
Vue 3 使用 Proxy 来拦截对对象的操作,具备更强的能力,支持对象和数组的新增属性检测,并且性能更好。
虚拟 DOM 原理
虚拟 DOM 是 Vue 内部表示 UI 结构的抽象,数据变化时,Vue 通过 diff 算法比较新旧虚拟 DOM,生成最小的变化操作,直接应用到真实 DOM 上。