vue基础实践3-computed真实项目中最正规的用法

最新推荐文章于 2024-05-28 01:19:38 发布

公子清

最新推荐文章于 2024-05-28 01:19:38 发布

阅读量297

点赞数 1

分类专栏：实践系列 Vue系列实践真题系列文章标签： vue computed计算属性

本文链接：https://blog.csdn.net/Josiah_Yuan/article/details/106527330

版权

Vue系列同时被 3 个专栏收录

40 篇文章 0 订阅

订阅专栏

实践系列

33 篇文章 0 订阅

订阅专栏

实践真题系列

25 篇文章 0 订阅

订阅专栏

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>

运行结果如下：
在这里插入图片描述

公子清

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基础实践3-computed真实项目中最正规的用法

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-equ
复制链接

扫一扫