在Vue.js中，组件是构建用户界面的基本单元。一个典型的Vue组件由三个主要部分组成：模板（template）、脚本（script） 和 样式（style）。理解组件的内部结构和生命周期，是掌握Vue.js开发的关键。 今天，我们将深入探讨Vue组件的各个部分，以及它们是如何协同工作的。
模板（template）：定义组件的视图
标签用于定义组件的HTML结构。在这个部分，你可以使用普通的HTML元素，以及Vue.js提供的特殊语法，例如：
- 插值表达式 {{ }}： 用于显示组件的数据属性。
- 指令 v-bind 或简写 :： 用于动态绑定HTML属性，例如 v-bind:href="/path"或 :href="/path"。
- 事件监听 v-on 或简写 @： 用于监听DOM事件，例如 v-on:click="handleClick" 或 @click="handleClick"。
- 组件引用： 用于引入其他子组件。
下面是一个简单的模板示例：
{{ greetings }}
在这个示例中，我们使用 {{ greetings }} 来展示数据， @click="say('hi')" 来绑定点击事件，
脚本（script）：组件的逻辑中心
<script> 标签用于定义组件的JavaScript逻辑。 它可以包含以下几个部分：
- export default { ... }：
这是Vue组件的入口点，所有的组件选项都定义在这个对象中。 - data()：
用于声明组件的局部数据。当 data() 返回的对象中的属性值发生变化时，视图会自动更新。 - props：
用于接收父组件传递的数据。 props 定义了哪些数据可以从父组件传递到子组件。 - methods：
用于定义组件的方法，这些方法可以在模板中被调用。 - computed：
用于定义计算属性。 计算属性会根据依赖的数据进行缓存，只有当依赖数据发生变化时才会重新计算。 - watch：
用于监听数据变化。 我们可以定义当某些数据变化时执行的逻辑。 - 生命周期钩子函数
允许我们访问特定阶段的组件生命周期，并执行自定义逻辑。
下面是一个简单的脚本示例：
<script>
export default {
components: {
'AppHeader': { /* ... */ },
'AppContent': { /* ... */ },
'AppFooter': { /* ... */ }
},
props: ['customer', 'orders'],
data() {
return {
firstName: 'John',
lastName: 'Doe'
}
},
methods: {
say(message) {
alert(message);
}
},
computed: {
greetings() {
return `Hello, ${this.firstName} ${this.lastName}`;
}
},
watch: {
speed(newVal, oldVal) {
console.log(`Speed changed from ${oldVal} to ${newVal}`);
}
}
}
</script>
在这个示例中，我们定义了 components， props， data， methods， computed 和 watch。
样式（style）：控制组件的外观
在这个示例中，我们为 h1 标签定义了蓝色字体颜色，并且使用 scoped 关键字限定了这个样式只对当前组件生效。 Vue组件有完整的生命周期，从创建到销毁会经过不同的阶段。 每个阶段都会触发不同的钩子函数，开发者可以在这些钩子函数中执行自定义逻辑： 这些钩子函数允许我们在组件的不同阶段执行自定义逻辑，例如发送网络请求、操作DOM等等。 让我们结合一个简单的例子，展示这些部分是如何协同工作的。 在这个例子中，我们定义了一个简单的组件，包含一个 h1 标题和一个按钮。 点击按钮会调用 handleClick 方法来更新 message 数据，视图会自动更新。 当组件挂载完成时，会输出 Component mounted 日志信息。 Vue组件是构建Vue应用的基础，理解组件的结构和生命周期对于开发Vue应用至关重要。 本文详细介绍了模板、脚本、样式，以及组件的生命周期钩子函数。通过学习本文，相信你能够更加深入地理解Vue组件的工作原理。 你是否在实际开发中遇到过关于Vue组件的问题呢？欢迎在评论区分享你的经验和困惑。Vue 组件生命周期
组件实例初始化之前调用，此时数据观测和事件机制都未设置。
组件实例创建完成后立即调用，此时数据观测和事件机制已经设置，但是DOM还没有渲染。
组件挂载到DOM之前调用，此时模板已经编译完成，但是还没有将DOM渲染到页面中。
组件挂载到DOM后调用，此时组件的DOM元素已经渲染到页面中。
组件数据更新之前调用，此时DOM还未更新。
组件数据更新之后调用，此时DOM已经更新。
组件销毁之前调用，此时组件实例仍然可用。
组件销毁之后调用，此时组件实例不可用。实践案例
{{ message }}
总结