Vue学习笔记2024/8/21

一、条件渲染

1.1 v-if VS v-show:

v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被**销毁与重建**。

v-if 也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。

相比之下，v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换。

总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。

1.2 v-if 与 v-for

问: v-if 与 v-for 是否能在同一个元素上同时出现?

能。同一个元素节点上是可以同时使用 `v-if` 与 `v-for` 指令的，但实际开发中不推荐。

为什么不推荐?

有优先级的问题（到底是该先判断条件，满足条件后执行循环，还是先循环，对每个遍历到的元素再判断条件）。

> 在 Vue@3.x 中，`v-if` 会首先被执行。

> 在 Vue@2.x 中，`v-for` 会首选被执行。

二、 列表渲染

2.1 数据侦测

侦测到数组的变化，需要重新渲染 UI

2.1.1 变更（变异）方法

Vue 能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。

- push() / pop()

- unshift() / shift()

- splice()

- sort() / reverse()

这七个方法调用后，原数组本身会受影响。

2.1.2 替换数组

当调用如 `filter()`、`concat()`、`slice()` 之类方法时，这些方法不会导致原数组本身受影响，而是返回新数组，可以使用新数组替换原来的旧数组，达到 UI 重新渲染的目的。

三、 侦听器(侦听属性)

当需要在状态变化时执行一些“副作用”时，可考虑使用 `watch` 侦听器。

在选项式 API 中，使用 `watch` 字段来设置侦听器，通常侦听器会侦听某状态数据的改变，在侦听到状态数据改变时，执行一个回调函数。

注意，不要滥用 watch，因为 watch 侦听状态数据变化时执行的回调函数是被自动调用到的，对于代码阅读不利。

四、 组件基础

组件系统允许将一个应用划分为功能独立的、可重用的多个组件模块，然后将各独立的组件经过组合形成完整应用。在构成完整应用时，组件与组件之间构成组件树结构（与DOM树类似），会存在组件之间的数据传递（组件通信）。

4.1 定义组件

一个 Vue 组件以一个包含 Vue 特定选项的 JavaScript 对象来定义:

在定义了组件选项对象后，需要注册组件:

（1）全局注册

全局注册的组件是以后可以在其它任意组件中都使用到的

全局注册组件是调用 app 实例的 component() 方法进行注册:

app.component('ComponentName', options)

（2） 局部注册

const father = {

  template: ``,

  components: {

    Son: {

      template: ``,

    },

  },

}

局部注册的组件仅在注册该组件的父组件中能够使用到，即是在父组件中注册子组件的使用。

局部注册组件是在父组件的选项对象中使用 `components` 字段进行注册:

4.2 渲染组件

渲染组件，是以组件名作为自定义标签名称的方式进行使用。

注意:

- 如果组件名称是驼峰帕斯卡命名规范，则在书写为标签名称时，需要转换为小写的短横线命名规范，如: `MyComponent` 组件需要转换为 `<my-component>` 标签名称

- 标签必须显式书写结束标签，不能使用自关闭标签，如: `<my-component></my-component>` 不能书写为 `<my-component />`

五、 组件通信

组件通信指的是组件与组件之间存在数据的传递方式。

组件间的通信通常分为:

- 父子组件之间的通信

- 跨组件、跨层级的通信

5.1 父子间组件通信

5.1.1  父传子

指的是父组件中的状态数据传递到子组件中进行使用。

通常使用 `props` 属性的方式进行传递。

在父组件中渲染子组件标签时，传递属性数据:

<son v-bind:title="message"></son>

在子组件的选项中，使用 `props` 字段声明接收的属性:

  props: ['title'],

可以在子组件的模板中直接使用到接收的属性值，也可以在方法中使用 `this.` 调用到属性值:

```js

```

5.1.2 子传父

指的是将子组件中的数据传递到父组件中进行使用。

使用事件机制完成传递。

在父组件中渲染子组件标签时，绑定一个自定义事件，事件函数的参数表示的就是子组件传递到父组件中的数据:

{

  template: `

    <div>这是父组件，接收到子组件传递的数据: {{ message }}</div>



    <!-- 父组件中渲染子组件标签时，绑定一个自定义事件 -->

    <son @receive="handleReceive"></son>

  `,

  data() {

    return {

      message: '',

    }

  },

  methods: {

    // 事件函数，处理接收到子组件传递的数据

    // 函数的参数 表示的是从子组件中接收到的数据

    handleReceive(data) {

      console.log('接收到:', data)

      this.message = data

    },

  },

}

子组件定义时，利用 `emits` 字段声明其可触发的事件，当需要向父组件传递数据时，显式调用 `this.$emit()` 触发对应事件传递数据即可:

{

  template: `

    <div>这是子组件</div>

    <input placeholder="请输入文本" v-model="inputValue" />

    <button @click="handleClick">将输入框中输入的文本传递到父组件中使用</button>

  `,

  data() {

    return {

      inputValue: '',

    }

  },

  // 在子组件中，使用 `emits` 字段 声明子组件可触发的事件

  // 属性值为数组时，表示声明可触发事件的名称

  emits: ['receive'],



  methods: {

    // 处理按钮点击事件，向父组件传递数据

    handleClick() {

      // 显式调用 this.$emit(事件名称, 需要传递的数据) 触发事件，向父组件传递数据

      this.$emit('receive', this.inputValue)

    },

  },

},

5.2 跨组件、跨层级组件通信

5.2.1 兄弟组件之间的通信

通常在兄弟组件之间进行数据传递，利用 "状态提升" 机制完成数据传递。

所谓“状态提升”，指的是将两个兄弟组件之间需要传递的数据，提升到父组件中定义，则将兄弟组件之间的通信就转换为父子组件间的通信。