Vue 中 filter 与 computed 的区别与用法解析

watch与computed、filter：

watch:监控已有属性，一旦属性发生了改变就去自动调用对应的方法

computed:监控已有的属性,一旦属性的依赖发生了改变，就去自动调用对应的方法

filter:js中为我们提供的一个方法，用来帮助我们对数据进行筛选

watch与computed的区别:

1.watch监控现有的属性,computed通过现有的属性计算出一个新的属性

2.watch不会缓存数据，每次打开页面都会重新加载一次，

但是computed如果之前进行过计算他会将计算的结果缓存，如果再次请求会从缓存中
得到数据（所以computed的性能比watch更好一些）

最近遇到一个很不错的候选人，经验丰富，有技术亮点，但在一些细枝末节问题上没有回答的很好，最终还是被刷了。面试过程中有一个问题我印象特别深刻： Vue 中filter与computed属性的区别 ，可惜候选人在现场没有回答上，这里总结一下：

filter 与 computed 的区别

1. 触发时机不同

computed 属性背后的处理逻辑比较复杂，依赖 Vue 的数据更新通知机制，在属性所依赖的其他数据项发生变化时才会重新触发计算。优点是计算频率相对较低；缺点是依赖于组件，难以抽取成独立逻辑，也就是复用性低。

filter 则显的简单很多，只在显式调用时触发，一般应用在模板渲染上。优点是容易在组件外抽象；缺点是每次模板渲染时都需要重新执行计算。可以通过示例 感受调用时机的区别：

2. 应用范围不同

computed 很广泛，可以应用在其他computed、methods、生命周期函数、模板；filter 一般只应用于模板渲染上，如果要在其他位置复用，需要使用 this._f 函数：

Vue.component('HelloWorld', {
 filters: {
 hello() {
 return 'hello';
 }
 },
 methods: {
 ping() {
 return `${this._f('hello')()} world`;
 }
 }
})

另外，在使用上filter支持链式调用，这为其增加了组合拼接的能力：

<span> {{ name | normalize | capitalize }} </span>

3. 定义方式

最后需要指出，computed 属性只能在组件内部或通过mixins对象定义；而 filter 有两种定义方式，一是在组件内部通过 filters 属性定义；一是在组件外部通过 Vue.filter 函数定义：

Vue.component('HelloWorld', {
 filters: {
 hello() {
 return 'hello';
 }
 }
});
Vue.filter('hello', ()=> 'hello');

应用规则

综上，filter 无法缓存，调用频率高，因此特别适用于格式化输出场景，比如日期格式化。filter 具有组合调用能力，因此可以在项目架构层面定义一堆基础的、简单的filter，按需在组件内组合适用。

computed 属性具有缓存能力，在组件内普适性更强，因此适用于复杂的数据转换、统计等场景。

总结

以上所述是小编给大家介绍的Vue 中 filter 与 computed 的区别与用法解析，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • Vue computed计算属性的使用方法

    computed computed:相当于method,返回function内return的值赋值在html的DOM上.但是多个{{}}使用了computed,computed内的function也只执行一次.仅当function内涉及到Vue实例绑定的data的值的改变,function才会从新执行,并修改DOM上的内容. computed和method的对比 <div id="example"> {{ message.split('').reverse().join('

  • vue.js的computed,filter,get,set的用法及区别详解

    1.vue.js的computed方法: 处理复杂逻辑,基于依赖缓存,当依赖发生改变时会重新取值.用methods也可以实现同样的效果,但methods在重新渲染的时候会重新调用执行,在性能上computed优于methods,当不需要缓存时可用methods. 实例1:computed和methods实现翻转字符串 <template> <div> <input v-model="message"> <p>原始字符串: {{ messa

  • Vue.js每天必学之计算属性computed与$watch

    在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需要多于一个表达式的逻辑,应当使用**计算属性**. 基础例子 <div id="example"> a={{ a }}, b={{ b }} </div> var vm = new Vue({ el: '#example', data: { a: 1 }, comp

  • Vue中计算属性computed的示例解读

    计算属性 表达式是非常便利的,但是它们实际上只用于简单的运算.在模板中放入太多的逻辑会让模板过重且难以维护,所以引入了计算属性computed,将复杂的逻辑放入计算中进行处理,同时computed有缓存功能,防止复杂计算逻辑多次调用引起的性能问题. computed原理 computed的属性reversedMessage在data中会有一个对我们不可见的cacheReversedMessage属性对应 cacheReversedMessage的值是根据其绑定的data中的message来决定的

  • vue 中filter的多种用法

    1.自定义的过滤器,当然这包括注册在全局和注册在实例化的内部 (1)注册在全局的fliter (1)全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面 (2) 过滤器函数始终以表达式的值作为第一个参数.带引号的参数视为字符串,而不带引号的参数按表达式计算 (3)可以设置两个过滤器参数,前提是这两个过滤器处理的不冲突 (4)用户从input输入的数据在回传到model之前也可以先处理 <!DOCTYPE html> <html> <head>

  • 详解Vue的computed(计算属性)使用实例之TodoList

    详解Vue的computed(计算属性)使用实例之TodoList

    最近倒腾了一会vue,有点迷惑其中methods与computed这两个属性的区别,所以试着写了TodoList这个demo,(好土掩面逃~); 1. methods methods类似react中组件的方法,不同的是vue采用的与html绑定事件. 给个例子 /*html*/ <input type="button" value="点击" v-on:click='handlClick' id="app"> /*js*/ var ap

  • Vue 中 filter 与 computed 的区别与用法解析

    Vue 中 filter 与 computed 的区别与用法解析

    watch与computed.filter: watch:监控已有属性,一旦属性发生了改变就去自动调用对应的方法 computed:监控已有的属性,一旦属性的依赖发生了改变,就去自动调用对应的方法 filter:js中为我们提供的一个方法,用来帮助我们对数据进行筛选 watch与computed的区别: 1.watch监控现有的属性,computed通过现有的属性计算出一个新的属性 2.watch不会缓存数据,每次打开页面都会重新加载一次, 但是computed如果之前进行过计算他会将计算的结果

  • 浅析Vue中method与computed的区别

    在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码,但是什么时候用哪个属性,要好好区分一下才能做到正确的运用vue. computed称为计算属性,顾名思义,计算就要返回一个计算的结果,所以,当我们要处理大量的逻辑,但是最后要取得最后的结果的时候可以用computed: 为了说明method与computed的区别,在此我想先来看看computed属性在vue官网中的说法:模板内的表达式是非常便利的,但是它们实际上只用于简单的运算.在模板中放入太多的逻辑会让模

  • vue中watch和computed的区别与使用方法

    computed 计算属性说明: computed 是基于响应性依赖来进行缓存的.只有依赖数据发生改变,才会重新进行计算(当触发重新渲染,若依赖数据没有改变,则 computed 不会重新计算).若没改变,计算属性会立即返回之前缓存的计算结果. 不支持异步,当 computed 内有异步操作时无效,无法监听数据的变化的值. computed 中的成员可以只定义一个函数作为只读属性, 也可以定义成 get/set 变成可读写属性 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对

  • vue中LocalStorage与SessionStorage的区别与用法

    vue中LocalStorage与SessionStorage的区别与用法

    目录 什么是LocalStorage 什么是SessionStorage LocalStorage与SessionStorage的区别 LocalStorage与SessionStorage的特点 LocalStorage与SessionStorage的用法 LocalStorage与SessionStorage应用实例 前面把后台的验证机制梳理了一下,主要是Cookie.Session和Token的使用,Django:Cookie设置及跨域问题处理.Django实:Cookie搭配Sessio

  • Vue中watch、computed、updated三者的区别及用法

    1.watch 理解: 监听器,监听某个数据的变化从而来执行一些操作,当data里面的数据发生变化的时候来执行一下开销较大或异步的操作 1.监听值类型(简单类型)数据 //在一个vue实例中 new Vue({ el:"#myApp", data:{ num1:1, num2:2 }, methods:{}, watch:{ //这里两个属性,第一个值是变化后最新的值,第二个是变化前 num1(after,before){ this.num2 = after +1 } immediat

  • 深入浅析Vue中mixin和extend的区别和使用场景

    Vue中有两个较为高级的静态方法mixin和extend,接下来我们来讨论下关于他们各自的原理和使用场景. Mixin: 原理: 先来看看官网的介绍: 参数:{Object} mixin 用法: 混入也可以进行全局注册.使用时格外小心!一旦使用全局混入,它将影响每一个之后创建的 Vue 实例.使用恰当时,这可以用来为自定义选项注入处理逻辑. // 为自定义的选项 'myOption' 注入一个处理器. Vue.mixin({ created: function () { var myOption

  • Vue中$router与 $route的区别详解

    Vue中$router与 $route的区别详解

    目录 前言 路由跳转分为编程式和声明式 前言 点击视频讲解更加详细 this.$route:当前激活的路由的信息对象.每个对象都是局部的,可以获取当前路由的 path, name, params, query 等属性. this.$router:全局的 router 实例.通过 vue 根实例中注入 router 实例,然后再注入到每个子组件,从而让整个应用都有路由功能.其中包含了很多属性和对象(比如 history 对象),任何页面也都可以调用其 push(), replace(), go()

  • vue中watch和computed为什么能监听到数据的改变以及不同之处

    vue中watch和computed为什么能监听到数据的改变以及不同之处

    先来个流程图,水平有限,凑活看吧-_-|| 首先在创建一个Vue应用时: var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) Vue构造函数源码: //创建Vue构造函数 function Vue (options) { if (!(this instanceof Vue) ) { warn('Vue is a constructor and should be called with the `new` keyw

  • vue中defineProperty和Proxy的区别详解

    vue中defineProperty和Proxy的区别详解

    Proxy的出现,给vue响应式带来了极大的便利,比如可以直接劫持数组.对象的改变,可以直接添加对象属性,但是兼容性可能会有些问题 Proxy可以劫持的数组的改变,defineProperty 需要变异 defineProperty 中劫持数组变化的变异的方法 可以理解为在数组实例和原型之间,插入了一个新的原型的对象,这个原型方法实现了变异的方法,也就真正地拦截了数组原型上的方法 我们来看下vue2.x的源码 // vue 2.5.0 var arrayProto = Array.prototy

随机推荐