Vue学习之计算属性、侦听器与过滤器详解

最新推荐文章于 2024-07-27 07:45:00 发布

独上归州

最新推荐文章于 2024-07-27 07:45:00 发布

阅读量425

点赞数

分类专栏： Vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/m0_62346839/article/details/125383383

版权

本文详细介绍了Vue.js中的计算属性、监听器和过滤器。计算属性提供缓存机制，避免重复计算。监听器用于响应数据变化，执行异步操作。过滤器主要用于文本格式化，可在插值表达式和v-bind中使用，Vue2支持，Vue3已废弃。文章通过对比计算属性和监听器的适用场景，强调了正确选择的重要性。

摘要由CSDN通过智能技术生成

计算属性

模板内可以直接使用表达式等等，但是设计它们的初衷是用于简单运算的。如果在模板中放入太多的逻辑会让模板过重且难以维护，因此引入计算属性。

<div id="app">{
   {
    message.split('').reverse().join('') }}</div>  <!-- 模版内的表达式复杂不利于维护-->

计算属性指的是通过一系列运算之后，最终得到一个属性值。这个动态计算出来的属性值可以被模板结构或methods方法使用。计算属性本质上就是一个function函数，它可以实时监听data中数据的变化，并return一个计算后的新值，供组件渲染DOM时使用。

<div id="app">
  <p>Original message: "{
   { message }}"</p>   <!-- 结果：Original message: "Hello" -->
  <p>Computed reversed message: "{
   { reversedMessage }}"</p>   <!-- 结果：Computed reversed message: "olleH"-->
</div>
const app = new Vue({
   
  el: '#app',
  data: {
   
    message: 'Hello'
  },
  computed: {
   
    // 计算属性的 getter 的简写方式
    reversedMessage: function () {
   
      // `this` 指向 app 实例
      return this.message.split('').reverse().join('')
    }
  }
})

注意：1、在调用计算属性中的方法时，不需要调用其方法（如上例中的reverseMessage())，只需使用其名字（reverseMessage）即可。因为它（reverseMessage）是个属性。
2、计算属性侧重于得到一个计算的结果，因此计算属性中必须要有return返回值!

计算属性 vs 方法

可能就会有小伙伴会有疑惑了：上述使用计算属性来解决的问题用methods也可以解决呀，为什么还要引入计算属性呢？
首先通过一段代码可以看看方法和计算属性之间的区别：

<div id="app">
	<input type="text" v-model.number="message">
	<!-- 使用计算属性 -->
	<p>{
   {
   message}}的平方是：{
   {
   pow}}</p>
	<p>{
   {
   message}}的平方是：{