当前位置：首页 > 全部内容 > 正文

Vue 基础语法：计算属性、侦听器与过滤器详解

作者：松果

时间：2026-10-26

浏览：197

本文详细讲解Vue.js中的三大核心选项：计算属性、侦听器与过滤器。通过示例演示computed的缓存机制与getter/setter用法，watch的深度监听配置，以及全局与局部过滤器的定义、串联及传参技巧，帮助开发者掌握Vue基础语法。

文章目录

1、Vue 实例配置项

构建 Vue 实例时，需向构造函数传入配置对象，示例如下：

new Vue({
	//选项
})

通过 new 关键字初始化 Vue 实例时，可传入包含多种类型数据的配置对象，详情如下：

  • 数据相关：data、props、propsData、computed、methods、watch
  • DOM 相关：el、template、render、renderError
  • 生命周期钩子：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed、activated、deactivated、errorCaptured
  • 资源注册：directives、filters、components
  • 组合式 API：parent、mixins、extends、provide、inject
  • 其他配置：name、delimiters、functional、model、inheritAttrs、comments

建议查阅 Vue 官方 API 文档以获取完整选项列表。本章仅深入讲解计算属性、过滤器及侦听器这三个核心配置项。

2、计算属性（computed）

2.1、computed 基础用法

计算属性对应 Vue 配置中的 computed 字段，其值为对象，属性值为函数。该函数不支持直接接收参数，若需传参，可采用闭包方式实现。

注意：计算属性定义时严禁使用箭头函数。因箭头函数的 this 指向上下文而非 Vue 实例，导致无法访问实例对象。

计算属性具备以下特性：

  • 将复杂逻辑置于模板会导致模板臃肿且难以维护，使用计算属性可使模板结构更简洁。
  • 计算属性基于响应式依赖进行缓存，仅在依赖变化时重新求值。
  • computed 适用于处理多个变量或对象并返回单一结果。当依赖的多个变量中任一发生变化，监控值即随之更新。

代码示例：

<div id="app">
	<p>{{ total }}</p>
</div>
<script type="text/javascript">
	new Vue({
		el: '#app',
		data: {
			a: 1
		},
		computed: {
			total(n) {
				return this.a + 5
			}
		}
	})
</script>

浏览器运行结果如下：

1、Vue 实例配置项

2.2、computed 传参用法

虽然 computed 属性值通常为函数，但其使用方式类似 data。若需将 computed 作为函数调用，可返回一个闭包函数。示例如下：

<div id="app">
	<p>{{ total(6) }}</p>
</div>
<script type="text/javascript">
	new Vue({
		el: '#app',
		data: {
			a: 1
		},
		computed: {
			total() {
				return (n) => {
					return this.a + n
				}
			}
		}
	})
</script>

浏览器运行效果如下：

1、Vue 实例配置项

2.3、计算属性与函数的区别

尽管 computed 与 methods 声明方式相似，但功能存在显著差异。核心区别在于计算属性具备基于响应式数据的缓存机制。即：若计算属性依赖 data 中的响应式数据，仅当该数据变化时，计算函数才会重新执行；否则直接返回缓存结果。此举旨在提升性能，避免冗余计算。

代码示例如下：

<div id="app">
     <!--  
        当多次调用 reverseString  的时候 
        只要里面的 num 值不改变 他会把第一次计算的结果直接返回
    直到data 中的num值改变 计算属性才会重新发生计算
     -->
    <div>{{reverseString}}</div>
    <div>{{reverseString}}</div>
     <!-- 调用methods中的方法的时候  他每次会重新调用 -->
    <div>{{reverseMessage()}}</div>
    <div>{{reverseMessage()}}</div>
  </div>
  <script type="text/javascript">
    /*
      计算属性与方法的区别:计算属性是基于依赖进行缓存的，而方法不缓存
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'Nihao',
        num: 100
      },
      methods: {
        reverseMessage: function(){
          console.log('methods')
          return this.msg.split('').reverse().join('');
        }
      },
      //computed属性的声明和data属性、methods属性是平级关系 
      computed: {
        //reverseString属性名称是自定义的 
        reverseString: function(){
          console.log('computed')
          var total = 0;
          // 当data中num 属性的值发生改变时，reverseString 函数会自动进行计算  
          for(var i=0;i<=this.num;i++){
            total += i;
          }
         // 在reverseString函数中必须要有return，否则在页面中无法获取到计算后的值    
          return total;
        }
      }
    });
  </script>

2.4、计算属性的 getter 与 setter

计算属性虽可像 data 属性一样读取，但若需赋值，必须定义 setter 方法。示例如下：

<div id="app">
     <!--  
        当多次调用 reverseString  的时候 
        只要里面的 num 值不改变 他会把第一次计算的结果直接返回
    直到data 中的num值改变 计算属性才会重新发生计算
     -->
    <div>{{reverseString}}</div>
    <div>{{reverseString}}</div>
     <!-- 调用methods中的方法的时候  他每次会重新调用 -->
    <div>{{reverseMessage()}}</div>
    <div>{{reverseMessage()}}</div>
  </div>
  <script type="text/javascript">
    /*
      计算属性与方法的区别:计算属性是基于依赖进行缓存的，而方法不缓存
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'Nihao',
        num: 100
      },
      methods: {
        reverseMessage: function(){
          console.log('methods')
          return this.msg.split('').reverse().join('');
        }
      },
      //computed属性的声明和data属性、methods属性是平级关系 
      computed: {
        //reverseString属性名称是自定义的 
        reverseString: function(){
          console.log('computed')
          var total = 0;
          // 当data中num 属性的值发生改变时，reverseString 函数会自动进行计算  
          for(var i=0;i<=this.num;i++){
            total += i;
          }
         // 在reverseString函数中必须要有return，否则在页面中无法获取到计算后的值    
          return total;
        }
      }
    });
  </script>

点击“重新计算”按钮前：

1、Vue 实例配置项

点击“重新计算”按钮后：

1、Vue 实例配置项

在 reset() 函数中对计算属性 total 赋值，该操作会被计算属性内部的 set() 方法捕获，随后将值传递至 data 中的 a 变量。此时获取的计算属性值为更新后的 a 变量加 5 的结果。

3、侦听器（watch）

3.1、watch 基础用法

watch 为监听器，其值为对象，属性值可为函数、对象或数组。当需观察 data 中某属性内部值的变化时，可通过 watch 监听该属性的变化。

watch 监听器的基本用法如下：

  • 利用 watch 响应数据变化
  • 通常用于处理异步操作或开销较大的任务
  • watch 中定义的属性必须对应 data 中已存在的数据
  • 若需监听对象内部属性的变化，普通 watch 方法无效，仅能监听 data 中的顶层数据。此时需启用 deep 属性对对象进行深度监听。

代码示例：

<!-- 验证用户名 -->
<div id="app">
  <div>
    姓：<input type="text" v-model='lastName'>
  </div>
  <div>
    名：<input type="text" v-model='firstName'>
  </div>
  <div>
  	全名：{{fullName}}
  </div>
</div>

<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
      firstName: '张',
      lastName: '三'
    },
    // 计算属性
    watch: {
      firstName(val) {
        this.fullName = val + ' ' + this.lastName;
      },
      lastName(val) {
        this.fullName = this.firstName + ' ' + val;
      }
    }
  });
</script>

watch 对象中的 firstName 对应 data 中的 firstName，当 firstName 值改变时，自动触发 watch 中对应的 firstName() 函数。同理，watch 中的 lastName 对应 data 中的 lastName。

watch 对象中函数的参数包含两个：参数一为 data 中对应变量修改后的新值，参数二为修改前的旧值。

3.2、侦听器的配置项

若监听的 data 属性为对象或数组，且嵌套层级较深，需开启 watch 的深度监听。示例如下：

new Vue({
	el: '#app',
	data: {
		num: {
			a: 1,
			b: 2,
			c: {
				d: 3
			}
		}
	},
	watch: {
		num: {
			deep: true, // 开启深度监听
			handler(val, oldVal) {
				//...
			}
		}
	}
})

4、过滤器（filter）

4.1、过滤器的作用

  • Vue.js 支持自定义过滤器，可用于常见文本格式化。
  • 过滤器可用于两处：双花括号插值及 v-bind 表达式。
  • 过滤器应添加在 JavaScript 表达式尾部，由“管道”符号（|）指示。

4.2、全局过滤器

Vue 全局 API 提供了注册全局过滤器的函数 Vue.filter()。注册完成后，所有组件均可使用。

全局过滤器代码示例：

<div id="app">
    <input type="text" v-model='msg'>
      <!-- upper 被定义为接收单个参数的过滤器函数，表达式  msg  的值将作为参数传入到函数中 -->
    <div>{{msg | upper}}</div>
    <!--  
      支持级联操作
      upper  被定义为接收单个参数的过滤器函数，表达式msg 的值将作为参数传入到函数中。
	  然后继续调用同样被定义为接收单个参数的过滤器 lower ，将upper 的结果传递到lower中
 	-->
    <div>{{msg | upper | lower}}</div>
    <div :abc='msg | upper'>测试数据</div>
  </div>

<script type="text/javascript">
  //  lower  为全局过滤器     
  Vue.filter('lower', function(val) {
    return val.charAt(0).toLowerCase() + val.slice(1);
  });

  new Vue({
  	el: '#app'
  })
</script>

4.3、局部过滤器

局部过滤器声明在 Vue 实例配置对象的 filters 字段中。需注意：全局注册时使用 filter（无 s），而局部过滤器使用 filters（有 s）。

局部过滤器注册后仅能在注册组件内使用，示例如下：

var vm = new Vue({
  el: '#app',
  data: {
    msg: ''
  },
  filters: { 
    upper: function(val) {
      return val.charAt(0).toUpperCase() + val.slice(1);
    }
  }
});

filters 属性与 data、methods 平级，用于定义局部过滤器。示例中 upper 为自定义过滤器名称，定义为接收单个参数的过滤器函数，表达式 msg 的值将作为参数传入。过滤器必须包含返回值，以便外部获取结果。

4.4、过滤器串联

过滤器支持串联使用，此处将 filter1 的输出值作为 filter2 的输入参数。

{{  data | filter1 | filter2  }}

4.5、过滤器传参

代码示例如下：

<div id="box">
  {{ message | filterA('arg1', 'arg2') }}
</div>
<script>
	  Vue.filter('filterA',function(n,a,b){
		 if(n<10){
		   return n+a;
		 }else{
		   return n+b;
		 }
	});

	new Vue({
	  el:"#box",
	  data:{
	    message: "哈哈哈"
	  }
	})
</script>

上述代码中，filterA 定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。

在过滤器中，第一个参数对应管道符左侧的数据 n（即 message），第二个参数 a 对应实参 'arg1' 字符串，第三个参数 b 对应实参 arg2 字符串。

至此，关于 Vue 基础语法之计算属性(computed)、侦听器(watch)、过滤器(filters)详解的文章介绍完毕。更多相关 vue 计算属性侦听器内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印，自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式，预览压缩前后的大小。

使用 ›
作者最新文章

Vue前端日历插件VCalendar集成与使用指南

uniapp scroll-view 组件实战：Vue3 改造与滚动逻辑详解

ElementUI el-calendar 周月视图切换与自定义实现

Vue Element UI 结合 sortable.js 实现嵌套表格行内拖拽排序

el-input 限制输入只允许输入浮点型的解决思路

相关文章
热门文章
更多
CSS text-transform与JS修改首字母大写的适用场景区别
JS中constructor属性判断数组存在哪些风险
JS正则替换中$1捕获组引用与字符串重组技巧
全栈开发中JavaScript与Java怎么协作？前后端技术栈配合解析
Node.js后端生成高强度随机字符串的方法
怎么在本地运行JavaScript脚本：Node.js下载安装与环境配置教程
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
JS 解压出现乱码或报错怎么解决？
JavaScript常见SyntaxError语法错误排查与修复方法
JS动态构建复杂嵌套JSON对象的方法