vue 计算属性 vs 方法，过滤器

最新推荐文章于 2023-03-14 11:19:09 发布

palmer_kyle

最新推荐文章于 2023-03-14 11:19:09 发布

阅读量1k

点赞数

分类专栏： Vue 文章标签： vue vue计算属性

本文链接：https://blog.csdn.net/palmer_kai/article/details/82912296

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

vue 计算属性 vs 方法，过滤器

最近换项目了，终于重新开始使用 vue 了，继续学习中

computed

计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

变量处理的任何复杂逻辑，你都应当使用计算属性

非常重要： 仅依赖变化才会更新数据

computed 属性是不能通过 this.property 来修改的，赋值的化（无setter）会报错，修改的话不生效

Vue 过滤器

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

组件的 update 都会导致过滤器的执行, 就像下面的 method中的方法一样

Vue 计算属性 vs 方法

官方：我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是 计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。 这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

如果你不希望有缓存，请用方法来替代。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>reactive</title>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <!-- <script src="../babel.min.js"></script> -->
</head>
<body>
  <div id="app">
    <input type="text" v-model="initialValue">
    <br>
    <span v-cloak>{{ value }}</span>
    <br>
    <span v-cloak>{{formatValue()}}</span>
    <br>
    <span v-cloak>{{ init }}</span>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script type="text/babel">
    // 计算属性 vs 方法
    const app = new Vue({
      el: '#app',
      data: {
        initialValue: '好吃',
        init: 'value changed'
      },
      methods: {
        formatValue() {
          console.log('方法执行了');
          return this.initialValue.split('').reverse().join('');
          // return Date.now();
        }
      },
      beforeUpdate(){
        console.log('beforeUpdated');
      },
      updated(){
        console.log('updated');
      },
      computed: {
        value() {
          return this.initialValue.split('').reverse().join('');
          // return Date.now();
        }
      }
    });
  </script>
</body>
</html>

我们可以通过 input（view）影响 model 或者通过 model 去影响 view 来验证，且看控制台打印

在浏览器中，输入文字的时候(组建 update)，在控制台中可以看见 methods 方法一直在执行
在控制台中通过 app.init = 123 赋值（组件 update）的时候， methods 中对应方法也会执行

总结如下：当 viewModel 检测数据或视图变化并进行更新操作的时候， methods 中对应的方法就会执行

两个方法可以达到同样的目的，就是开销问题

palmer_kyle

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
vue 计算属性 vs 方法，过滤器

vue 计算属性 vs 方法，过滤器最近换项目了，终于重新开始使用 vue 了，继续学习中computed计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。变量处理的任何复杂逻辑，你都应当使用计算属性非常重要：仅依赖变化才会更新数据computed 属性是不能通过 this.property 来修改...
复制链接

扫一扫