vue基础实践-computed真实项目中最正规的用法
真实项目中,计算属性computed最正规的写法,追求高质量代码
<!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>
<!-- 真实项目中,我们一般用一个计算属性和某些响应式数据进行关联,响应式数据发生改变计算属性的getter函数会重新执行,否则使用的是上一次计算出来的缓存结果
-->
<div id="app">
<p>正常结果:{{text}}</p>
<p>计算属性conmputed反转结果:{{ reverseComputed}}</p>
<input type="text" v-model='reverseComputed'>
</div>
</body>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
//=>
text : 'MY NAME IS QIAN DUAN XUE XI',
},
computed: {
//=>GETTER函数
/* reverseComputed(){
console.log('computed');
return this.text.split('').reverse().join('');
}, */
//最正规的写法
reverseComputed:{
get(){
//=>GETTER只要获取这个属性值就会触发get函数
return this.text.split('').reverse().join('');
},
set(value){
//SETTER:给属性设置值的时候会触发set函数,value是给这个属性设置的值
console.log('ok',value);
}
},
},
});
let n= 0;
let timer = setInterval(() =>{
n++;
if (n>5){
clearInterval(timer);
return;
}
if (n === 3){
vm.text = 'WELCOME IS ZHANGAJJ'
return;
}
//=>强制更新视图的重新渲染
vm.$forceUpdate();
},1000)
</script>
</html>
运行结果如下: