一、条件渲染
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 兄弟组件之间的通信
通常在兄弟组件之间进行数据传递,利用 "状态提升" 机制完成数据传递。
所谓“状态提升”,指的是将两个兄弟组件之间需要传递的数据,提升到父组件中定义,则将兄弟组件之间的通信就转换为父子组件间的通信。