【Vue3 从入门到实战进阶式掌握完整知识体系】034-Composition API：computed方法生成计算属性

訾博ZiBo

发布于 2025-01-06 14:19:12

10800

代码可运行

文章被收录于专栏：全栈开发工程师全栈开发工程师

运行总次数：0

代码可运行

5、computed方法生成计算属性

简单使用

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>了解循环</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  const app = Vue.createApp({
    setup(){
      const { ref, computed } = Vue;
      const num = ref(0);
      function handleClick(){
        num.value ++;
      }
      // 计算属性
      const computedNum = computed(() => {
        return num.value + 5;
      });
      return {
        num, handleClick,computedNum
      }
    },
    template: `
    <div>
      <span @click="handleClick">{{num}} -- {{computedNum}}</span>
    </div>`
  });
  
  const vm = app.mount('#root');
</script>

</html>

运行结果

计算属性内使用get和set方法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>了解循环</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  const app = Vue.createApp({
    setup(){
      const { ref, computed } = Vue;
      const num = ref(0);
      function handleClick(){
        num.value ++;
      }
      // 计算属性
      let computedNum = computed({
        get: () => {
          return num.value + 5;
        },
        set: () => {
          // 注意这里我们改的是 num
          num.value = 100;
        }
      });
      // 定时器：三秒后修改 computedNum 的值
      setTimeout(() => {
        computedNum.value = 1;
      }, 3000);
      return {
        num, handleClick,computedNum
      }
    },
    template: `
    <div>
      <span @click="handleClick">{{num}} -- {{computedNum}}</span>
    </div>`
  });
  
  const vm = app.mount('#root');
</script>

</html>

运行结果

使set接收参数

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>了解循环</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  const app = Vue.createApp({
    setup(){
      const { ref, computed } = Vue;
      const num = ref(0);
      function handleClick(){
        num.value ++;
      }
      // 计算属性
      let computedNum = computed({
        get: () => {
          return num.value + 5;
        },
        set: parameter => {
          // 注意这里我们改的是 num
          num.value = parameter - 5;
        }
      });
      // 定时器：三秒后修改 computedNum 的值
      setTimeout(() => {
        computedNum.value = 1000;
      }, 3000);
      return {
        num, handleClick,computedNum
      }
    },
    template: `
    <div>
      <span @click="handleClick">{{num}} -- {{computedNum}}</span>
    </div>`
  });
  
  const vm = app.mount('#root');
</script>

</html>

运行结果

使用对象

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>了解循环</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  const app = Vue.createApp({
    setup(){
      const { reactive, computed } = Vue;
      const numObj = reactive({num: 0});
      function handleClick(){
        numObj.num ++;
      }
      // 计算属性
      let computedNum = computed({
        get: () => {
          return numObj.num + 5;
        },
        set: parameter => {
          // 注意这里我们改的是 num
          numObj.num = parameter - 5;
        }
      });
      // 定时器：三秒后修改 computedNum 的值
      setTimeout(() => {
        computedNum.value = 1000;
      }, 3000);
      return {
        numObj, handleClick,computedNum
      }
    },
    template: `
    <div>
      <span @click="handleClick">{{numObj.num}} -- {{computedNum}}</span>
    </div>`
  });
  
  const vm = app.mount('#root');
</script>

</html>