Vue特性

news2024/11/23 22:13:14

Vue概念

Soc原则：关注点分离原则

Vue 的核心库只关注视图层，方便与第三方库或既有项目整合
在这里插入图片描述
Model（模型）：表示应用程序的核心数据和业务逻辑。模型通常包含数据和与数据相关的操作。它独立于视图和视图模型，这意味着模型不关心界面如何显示数据或用户如何与之交互。
View（视图）：表示用户界面。它负责显示数据，并且是用户与应用程序交互的界面。视图通常是HTML和CSS的混合体，并且通过数据绑定与视图模型交互。
ViewModel（视图模型）：是视图和模型之间的桥梁。它暴露公共属性和命令，使视图能够与模型进行双向数据绑定。视图模型还处理用户输入和事件，并执行与业务逻辑相关的操作。它通知视图模型中的数据变化，并更新视图
在这里插入图片描述
虚拟DOM是一种编程概念，它允许开发者以编程方式描述用户界面，然后由框架负责将这个描述转换成实际的DOM操作。虚拟DOM的核心思想是，每次数据变化时，不是直接操作DOM，而是生成一个新的虚拟DOM树，并与上一次的虚拟DOM树进行比较，计算出实际需要更改的最小DOM操作，然后批量执行这些操作。这样做可以减少直接操作DOM的次数，提高性能

数据绑定：在MVVM模式中，视图模型中的属性与视图中的元素绑定。当视图模型中的属性值发生变化时，视图会自动更新。虚拟DOM可以与这种数据绑定机制很好地配合工作。

Vue七大对象

实际上是Vue组件的几个重要选项。这些选项定义了组件的功能和行为。以下是对这些选项的详细说明：

el属性：el 是 Vue 实例的一个配置项，它指定了一个已存在的 DOM 元素，Vue 将会挂载到这个元素上。它可以是 CSS 选择器，也可以是一个实际的 DOM 元素。Vue 会在初始化时把 el 指定的容器内的内容替换掉，只保留 data 和 template 中定义的模板内容。
data属性：data 是一个函数，它返回一个对象，用于存储组件的状态。每个组件都有自己的 data 对象，Vue 会监视 data 对象中的数据变化，并在数据变化时自动更新 DOM。
template属性：template 是一个字符串，定义了组件的HTML结构。当Vue实例被创建时，template中的HTML会被渲染到页面上。template可以包含HTML标签、插值表达式、指令等。
methods属性：methods 是一个对象，包含了组件的所有方法。这些方法可以在模板中使用，也可以在组件的其他地方调用。methods 中的方法可以接受参数，并且可以通过 this 访问组件的数据和其他方法。
render属性：render 是一个函数，它返回一个虚拟DOM（Virtual DOM）的描述。在Vue 2.0中，render函数通常与h函数一起使用，以创建更灵活的组件。render函数比template提供了更原始的渲染控制，通常用于创建高阶组件或库。
computed属性：computed 是一个对象，包含了一些计算属性。计算属性是基于它们的依赖进行缓存的，只有当依赖发生变化时才会重新计算。计算属性可以用来声明式的描述组件的状态，并且可以包含复杂的逻辑。
watch属性：watch 是一个对象，包含了一些观察者。当data中的数据发生变化时，对应的观察者会被调用。观察者可以同步执行，也可以是异步的。它们通常用于执行异步操作或复杂的逻辑，而不是直接修改数据。
这些选项共同构成了Vue组件的核心，使得开发者可以方便地创建可复用、可维护的组件。

总结：
el: 指定 Vue 实例挂载的 DOM 元素。
data: 存储组件的数据。
template: 定义组件的模板。
methods: 定义组件的方法。
render: 渲染函数，创建虚拟 DOM。
computed: 计算属性，基于其他数据计算得出，相当于内存缓存。
watch: 监听数据变化并执行相应操作

Vue组件

Vue组件是Vue.js框架中的一个核心概念，它允许开发者将UI分解为独立、可复用的小块，并与它们自己的数据和方法进行交互

组件的基本结构

Vue组件通常包含以下几个部分：

模板（Template）：定义了组件的HTML结构。Vue提供了基于HTML的模板语法，允许开发者声明式地将数据渲染进DOM。
脚本（Script）：包含组件的逻辑，如数据对象、方法、计算属性、侦听器等。
样式（Style）：定义了组件的CSS样式。样式可以是普通的CSS、SCSS、Less等预处理器语言，也可以是 <style> 标签内的CSS。

组件的注册

组件在使用之前需要在Vue实例中注册。Vue提供了全局注册和局部注册两种方式：

全局注册：一旦全局注册了一个组件，它就可以在任何新创建的Vue实例模板中使用。
局部注册：需要在父组件内部声明，只能在这个父组件内部使用。

组件的通信

组件之间需要相互通信，Vue提供了几种方式来实现：

props：父组件可以通过props向子组件传递数据。
自定义事件：子组件可以通过$emit触发事件，父组件可以在使用子组件的地方监听这些事件。
插槽（Slots）：允许父组件将内容插入到子组件的指定位置。
provide/inject：用于非父子组件之间的通信，如跨级组件。

组件的生命周期

Vue组件有一个明确的生命周期，从创建、初始化数据、编译模板、挂载DOM、更新、卸载等一系列过程。开发者可以在这些生命周期钩子中添加自己的逻辑。

示例

下面是一个简单的Vue组件示例：

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="changeTitle">Change Title</button>
  </div>
</template>
<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      title: 'Hello Vue!'
    };
  },
  methods: {
    changeTitle() {
      this.title = 'Title Changed!';
    }
  }
}
</script>
<style scoped>
button {
  margin-top: 20px;
}
</style>

在这个组件中，<template> 定义了组件的HTML结构，<script> 包含了组件的逻辑，<style> 定义了组件的样式。changeTitle 方法会在按钮点击时被调用，改变组件的 title 数据。
通过组件系统，Vue.js使得开发者可以构建出复杂的应用程序，同时保持代码的模块化和可维护性。