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>

3.实现的效果如下：

四、双向数据绑定的原理

当数据模型中的属性值发生变化时，Vue会通过getter和setter来获取和更新数据。
当模板中的绑定表达式发生变化时，Vue会通过指令或插值表达式将变化的值传递给对应的数据模型。
Vue内部会通过使用Object.defineProperty()方法对数据模型的属性进行劫持，实现数据的响应式。
当数据模型的属性值发生变化时，Vue会通过观察者模式通知订阅了该属性的指令和组件更新视图。
更新视图时，Vue会使用Virtual DOM（虚拟DOM）对比新旧DOM树的差异，然后只更新差异部分的真实DOM，提高渲染效率。
当用户在视图中进行交互操作时，例如输入框输入文字，Vue会监听到事件并通过事件处理函数更新对应的数据模型。

五、生命周期钩子函数

1.beforeCreate:

创建前无法通过 vm 实例访问 data中的数据以及 methods中的方法.

2.created:

创建后可以通过 vm 实例访问 data中的数据以及 methods中的方法

3.beforeMount:

挂载前页面呈现的是未经Vue编译的DOM结构；所有对DOM的操作，最终都不奏效

4.mouted:

vue 完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用, 此时页面呈现的都是经过Vue编译的DOM。对DOM的操作均有效。

至此初始化过程结束，一般再次进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件等初始化操作。

5.beforUpdate:

更新前数据是新的页面是旧的页面与数据不同步

6.Updated:

更新后数据是新的页面也是新的页面与数据同步

7.beforeDestroy:

销毁前 Vue中的 data 及 methods 及指令目前都处于可用状态一般再此阶段取消定时器，取消订阅的消息，解绑自定义的事件等收尾工作.

8.destroyed:

销毁后,此时组件已经被完全销毁，实例中的所有数据，方法，属性，过滤器等都不可以再次使用了。

9.activaed:

组件激活时，和上面的beforDestroy和destroyed用法差不多，但是如果我们需要一个实例，在销毁后再次出现的话，用beforeDestroy和destroyed的话，就太浪费性能了。实例被激活时使用，用于重复激活一个实例的时候。

10.deactivated：

组件未激活时。

11.errorCapture：

错误调用,当捕获一个来自后代组件错误时被调用。

六、结束语

在结束这篇博文之际，我想借此机会再次感谢每一位耐心阅读至此的你。无论是文字间的共鸣，还是观点上的碰撞，都是对我莫大的鼓励与支持。我们共同探索了知识的海洋，分享了思考的火花，或许在某个不经意的瞬间，这些交流已经悄然在你我心中种下了新的灵感与启迪。

在这个信息爆炸的时代，能够静下心来，深入某一领域或话题，本身就是一种难能可贵的品质。希望这篇博文不仅为你提供了一些有价值的信息和见解，更能激发你对世界的好奇心与探索欲。记住，学习是一场没有终点的旅行，让我们携手并进，在未知的旅途中不断发现、学习、成长。

未来，我将继续带着这份热爱与责任，笔耕不辍，努力为大家带来更多有深度、有温度的内容。期待在下一篇文章中，再次与你相遇，共同开启新的知识探索之旅。

最后，如果你喜欢这篇文章，不妨点个赞、分享给你的朋友，或者留下你的宝贵评论，你的反馈是我前进的动力。再次感谢，愿你的每一天都充满阳光与希望，待下一次与各位宝子再次进行交流，我们下篇文章见！

辛-夷

关注

21
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Vue的学习(三)

在Vue 2中，过滤器（Filters）是一种非常有用的功能，它允许开发者对模板中的文本进行格式化处理。这些过滤器可以被视为一种特殊的函数，它们接收一个或多个参数（通常是模板中的文本值），并返回处理后的文本。局部过滤器：这些过滤器定义在Vue实例的filters选项中。它们只在该Vue实例的模板中可用。全局过滤器：通过方法定义的过滤器可以在任何Vue实例的模板中使用。这种过滤器在应用范围内是全局可访问的。
复制链接

扫一扫

专栏目录