【Vue3 从入门到实战进阶式掌握完整知识体系】034-Composition API：computed方法生成计算属性_const app = createapp({ setup() { const source = r-CSDN博客

本文链接：https://blog.csdn.net/qq_29689343/article/details/118371224

本文通过四个示例详细介绍了Vue.js中计算属性(computed)的使用，包括基本用法、get和set方法、设置参数以及结合对象的使用。展示了如何在模板中绑定计算属性，并演示了在数值变化时如何触发更新。此外，还通过定时器展示了如何改变计算属性的值及其影响。

摘要由CSDN通过智能技术生成

文章目录

- 5、computed方法生成计算属性

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>