Vue2.x里data里的值改变filter不断调用的问题

问题如题,vue2.x里data里的属性导致其它data属性的filter不断调用的问题(下面的代码控制台会不断打出---filter)。这是bug,还是有其它配置可以设置? 引用 https://segmentfault.com/q/1010000007361021?_ea=1323594提问

<!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>Document</title>
</head>
<body>
  <div id="app">
    {{str}} = {{str | myUppercase}}<br>
    {{index}} = {{myIndex}}
  </div>
  <script src="//cdn.bootcss.com/vue/2.0.3/vue.js"></script>
  <!--<script src="//cdn.bootcss.com/vue/1.0.28/vue.js"></script>-->
  <script>
    var vm=new Vue({
      el:"#app",
      data:{
        index:0,
        myIndex:0,
        str:'hello'
      },
      mounted:function(){
        var vm=this;
        setInterval(function(){
          vm.index++;
        },200);
      },
      /*created:function(){
        var vm=this;
        setInterval(function(){
          vm.index++;
        },200);
      },*/
      filters:{
        myUppercase:function(value){
          console.log('---filter');
          if(!value) return '';
          value=value.toString();
          return value.toUpperCase();
        }
      },
    })
  </script>
</body>
</html>
阅读 3.7k
2 个回答

在vue中,只有 计算属性 可以帮助我们做缓存,方法和过滤器都不会。

所以:在vue中,多使用 计算属性;不要在模版中 泛滥多使用 过滤器和方法执行

如果在代码中加入 updatedbeforeUpdate 这两个生命周期钩子函数,可以看到在 myIndex 变化时,这两个钩子函数会被调用。原因是:当 data 被修改时会导致虚拟 DOM 重新渲染和打补丁,因此应用会更新。大多数情况下都是使用 计算属性 computed 来代替。
关于 updatedbeforeUpdate 的解释,可以参照下官方文档:https://cn.vuejs.org/v2/api/#...

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题