Vue详细入门（语法【三】）

  在前面Vue详细入门（语法【一】——【二】）当中我们学习了Vue有哪些指令，它的核心语法有哪些？今天我们学习Vue组件是什么？组件的特性和优势，Vue3计算属性，Vue3监听属性 (^-^)

Vue组件是什么？

  首先我们要了解Vue组件是什么？是用来干什么的？

  Vue组件是Vue.js框架中的基础构建块，它们允许开发者将UI分割成可复用的部分，每个部分都包含自己的逻辑、模板和样式。组件使得大型应用的开发变得更加模块化和易于管理。

Vue组件的用途

1. 代码复用：通过创建组件，你可以将UI的某个部分抽象出来，然后在不同的地方重复使用它，而不需要每次都重写相同的代码。
2. 模块化：组件使得应用的结构更加清晰，每个组件都负责自己的功能，这有助于开发者理解和维护代码。
3. 可维护性：由于组件是独立的，因此可以单独测试、调试和更新，而不会影响到其他部分。
4. 可扩展性：组件可以通过插槽（slots）、事件（events）和属性（props）等方式进行扩展和自定义，以适应不同的使用场景。

Vue组件的基本结构
一个Vue组件通常由以下部分组成：

1. 模板（template）：定义了组件的HTML结构。
2. 脚本（script）：包含了组件的逻辑，如数据、方法、计算属性等。
   样式（style）：定义了组件的CSS样式，可以使用scoped属性来确保样式只作用于当前组件

Vue组件的示例代码
下面是一个简单的Vue组件示例，全局组件实例：

展示了如何创建一个Vue应用，定义一个全局组件，并将该组件挂载到DOM中的一个元素上

接下来我们再注册一个 button-counter 组件:

在每次点击后，计数器会加 1：

这段代码展示了Vue 3中如何创建应用、定义组件、使用响应式数据、定义模板以及将应用挂载到DOM元素上的基本概念

组件的特性和优势

  那我们了解Vue组件什么了，那它的特性或者是它的优势在于哪里嘞？

Vue组件的特性

1. 可复用性：

• 组件允许你将UI的某个部分抽象出来，并在不同的地方重复使用。
• 这减少了代码的冗余，提高了开发效率。

2. 模块化：

• 组件将应用拆分成多个小的、独立的模块。
• 每个模块都有自己的逻辑、模板和样式，使得应用的结构更加清晰。

3. 封装性：

• 组件封装了内部的状态和行为，外部只能通过属性（props）和事件（events）与组件进行交互。
• 这有助于保护组件的内部实现，防止外部直接修改组件的状态。

4. 响应式数据绑定：

• Vue组件支持响应式数据绑定，当数据发生变化时，视图会自动更新。
• 这减少了手动更新DOM的需要，提高了应用的性能和可靠性。

5. 自定义元素：

• 组件可以像HTML元素一样被使用，这使得它们非常易于集成到现有的Web应用中。

Vue组件的优势

1. 提高开发效率：

• 通过复用组件，减少了重复代码，加快了开发速度。

2. 易于维护：

• 组件化的结构使得代码更加清晰，易于理解和维护。

3. 增强可扩展性：

• 组件可以通过插槽、属性和事件等方式进行扩展和自定义。

4. 促进团队协作：

• 组件化的开发方式使得不同的开发者可以并行工作，互不干扰。

Vue代码示例
以下是一个简单的Vue组件示例，它展示了如何创建一个可复用的按钮组件，并演示了上述特性中的一些。

<!-- Button.vue -->  
<template>  <button @click="handleClick" :class="buttonClass">{{ label }}</button>  
</template>  <script>  
export default {  name: 'Button',  props: {  label: {  type: String,  required: true  },  buttonClass: {  type: String,  default: ''  },  onClick: {  type: Function,  default: null  }  },  methods: {  handleClick() {  if (this.onClick) {  this.onClick();  }  }  }  
};  
</script>  <style scoped>  
/* 这里的样式只会应用于Button组件 */  
button {  padding: 10px 20px;  font-size: 16px;  cursor: pointer;  
}  
</style>

在另一个Vue文件中使用这个组件：

<!-- App.vue -->  
<template>  <div id="app">  <Button label="点击我" buttonClass="primary-button" :onClick="handleButtonClick" />  </div>  
</template>  <script>  
import Button from './Button.vue';  export default {  name: 'App',  components: {  Button  },  methods: {  handleButtonClick() {  alert('按钮被点击了！');  }  }  
};  
</script>  <style>  
/* 全局样式 */  
.primary-button {  background-color: blue;  color: white;  border: none;  border-radius: 5px;  
}  
</style>

在这个例子中，Button组件接受三个属性：label（按钮上的文本）、buttonClass（按钮的CSS类名）和onClick（点击按钮时触发的回调函数）。组件内部使用了一个方法handleClick来处理点击事件，并调用传入的onClick回调函数（如果存在的话）。

通过这种方式，Button组件变得非常灵活和可复用，可以在不同的地方使用，并传递不同的属性和回调函数来满足不同的需求。同时，由于组件的封装性，它的内部实现被保护起来，外部只能通过属性进行交互，这有助于保持组件的独立性和稳定性。

Vue3计算属性

  Vue.js中的计算属性（computed properties）是基于它们的依赖进行缓存的响应式属性。只有当相关依赖发生改变时，它们才会重新求值。这使得计算属性非常适合用于执行复杂逻辑，同时保持高效和响应式。

  这段代码展示了如何使用Vue.js框架来创建一个简单的应用，该应用会将其数据（在这个例子中是message字符串）进行反转处理，并在页面上显示出来。这是Vue.js数据绑定和插值表达式功能的一个简单示例。

{{ message.split('').reverse().join('') }}：这是Vue的插值表达式。它的作用是显示message数据属性的内容，但是在显示之前，会对这个内容进行处理。
message.split('')：将message字符串分割成字符数组。
.reverse()：将字符数组的元素顺序反转。
.join('')：将反转后的字符数组重新连接成一个字符串。

const app = {...}：这里定义了一个Vue应用的数据对象。data函数返回一个对象，这个对象包含了应用的数据。在这个例子中，数据对象有一个属性message，其初始值为’RUNOOB!!‘。
Vue.createApp(app).mount('#app')：这行代码创建了一个Vue应用实例，并将之前定义的app对象作为配置对象传入。然后，通过mount(’#app’)方法，将这个Vue应用挂载到页面上ID为app的div元素上

Vue3监听属性

Vue实例部分
定义了一个Vue应用程序实例app。
在data函数中，返回了一个对象，包含两个属性：kilometers和meters，初始值都为0。
使用watch选项来监听kilometers和meters属性的变化。

当kilometers变化时，如果当前活动的字段是kilometers，则将meters设置为kilometers乘以1000。

当meters变化时，如果当前活动的字段是meters，则将kilometers设置为meters除以1000。

使用Vue.createApp(app).mount(‘#app’)来创建并挂载Vue应用程序到id为app的div元素上

额外的$watch监听器
在Vue实例挂载后，使用vm.$watch方法额外监听kilometers属性的变化。
当kilometers的值变化时，这个监听器会更新id为info的p元素的innerHTML，显示修改前后的值