问题如题,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>
在vue中,只有 计算属性 可以帮助我们做缓存,方法和过滤器都不会。
所以:在vue中,多使用 计算属性;不要在模版中 泛滥多使用 过滤器和方法执行