当前位置：首页 > article >正文

Vue的学习(三)

article 2024/11/15 18:40:02

一、for循环中key的作用

1‌.提高性能‌：

‌2.优化用户体验‌：

‌3.辅助Vue进行列表渲染‌：

4‌.方便可复用组件的使用‌：

二、methods及computed及wacth的区别

三、过滤器

1.Vue 2 过滤器简介

定义过滤器

使用过滤器

过滤器的串联

注意事项

2.代码示例

3.实现的效果如下：

四、双向数据绑定的原理

五、生命周期钩子函数

1.beforeCreate:

2.created:

3.beforeMount:

4.mouted:

5.beforUpdate:

6.Updated:

7.beforeDestroy:

8.destroyed:

9.activaed:

10.deactivated：

11.errorCapture：

六、结束语

一、for循环中key的作用

在Vue中，使用v-for指令进行列表渲染时，为每个循环的元素添加一个唯一的key属性是非常重要的。这个key的作用主要包括以下几个方面：

1‌.提高性能‌：

Vue通过key属性对每个循环生成的元素进行标识。当数据发生变化时，Vue可以更加高效地识别出新旧元素的对应关系，从而尽可能地复用已经存在的元素，减少重新渲染的开销，提高页面的性能表现‌1。

‌2.优化用户体验‌：

添加key属性可以确保列表中的元素保持稳定的身份，当数据发生变化时，Vue会尽可能地保持之前元素的状态，而不是重新创建或销毁元素，从而避免页面的闪烁或抖动现象，提供更加流畅的用户体验‌1。

‌3.辅助Vue进行列表渲染‌：

在使用v-for指令进行循环渲染时，Vue需要借助key属性来辅助判断列表中的元素是否发生了变化，以决定是否需要重新渲染列表。如果没有提供key属性，Vue会默认使用每个元素在数组中的索引作为key值，但这样会导致问题‌。

4‌.方便可复用组件的使用‌：

添加key属性可以方便地重置组件的内部状态，使组件可以被多次复用，并且每次复用时都能保持独立的状态，而不会被之前的状态所影响‌。

需要注意的是，key属性的值应该是唯一的，并且稳定不变的。最好使用每个元素在数据源中的唯一标识作为key值，避免使用索引（index）来作为key值，以免出现错误的渲染结果‌。

总之，key属性在Vue的循环渲染中起到了重要的作用，可以优化性能、提升用户体验、方便组件复用，是开发Vue应用时不可忽视的重要属性‌。

二、methods及computed及wacth的区别

介绍：vue.js当中computed和watch都是响应式的一部分，负责根据数据的变化来处理相关的逻辑，但是他们有着非常不同的使用场景和工作机制。而methods是Vue实例中的一个选项，用于定义在Vue实例中可以调用的方法。这些方法可以在模板中通过调用来执行。

methods: methods定义的方法是需要手动调用的，通过调用方法来执行相应的逻辑。用于定义组件的行为或函数，其内的代码在每次调用时都会重新执行。没有缓存机制，无论何时调用都会重新计算和执行。适用于处理事件或触发特定的逻辑场景。
computed: computed是计算属性，用于基于已有相应式数据进行计算，返回一个新的值。具有缓存机制，只有当相关依赖的数据发生变化时才会重新计算。适用于需要依赖多个响应式数据进行复杂计算的场景。
watch: watch是用于侦听属性变化的。你可以对某个响应式数据做实际操作或执行代码，比如发起异步请求或手动更新数据，适合需要进行一些副作用操作场景。watch适用于需要在数据变化时执行某些业务逻辑的场合。

三、过滤器

1.Vue 2 过滤器简介

在Vue 2中，过滤器（Filters）是一种非常有用的功能，它允许开发者对模板中的文本进行格式化处理。这些过滤器可以被视为一种特殊的函数，它们接收一个或多个参数（通常是模板中的文本值），并返回处理后的文本。

定义过滤器

局部过滤器：这些过滤器定义在Vue实例的filters选项中。它们只在该Vue实例的模板中可用。
全局过滤器：通过Vue.filter()方法定义的过滤器可以在任何Vue实例的模板中使用。这种过滤器在应用范围内是全局可访问的。

使用过滤器

在Vue模板中，你可以通过管道符（|）来应用过滤器。将过滤器应用于模板中的表达式时，表达式的值会作为参数传递给过滤器函数，并显示过滤器函数的返回值。

例如，如果你有一个显示日期的数据，并希望将其格式化为更易读的格式，你可以定义一个日期格式化过滤器，并在模板中通过管道符将其应用于日期数据。

过滤器的串联

Vue 2的过滤器支持串联使用，即一个过滤器的输出可以作为下一个过滤器的输入。这使得你能够轻松地将多个过滤器组合起来，实现复杂的文本处理逻辑。

注意事项

过滤器主要用于文本格式化，不应该用于处理复杂的逻辑或改变数据的状态。
在Vue 3中，官方移除了对过滤器的支持，转而推荐使用计算属性（Computed Properties）或方法（Methods）来实现类似的功能。这是因为过滤器虽然简单，但在大型项目中容易被滥用，导致逻辑难以追踪和维护。

2.代码示例

这里我们使用了一个过滤器，来将input框中的小写字符通过过滤器变成大写字母，在div中展示。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./../day_01/js/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model="msg">
        <div>{{msg | toUpper}}</div>
    </div>
    <script>
        //全局过滤器
        //Vue.filter("过滤器名称",回调函数)
        //注意：全局过滤器必须写在new Vue() 之前
        Vue.filter("toUpper", function (val) {
            console.log("val", val);
            return val.toUpperCase();
        })
        const vm = new Vue({
            el: "#app",
            data: {
                msg: ''
            }
        })
    </script>
</body>

</html>