5. Computed methods generate computed attributes

Simple to use

<! DOCTYPEhtml>
<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>Understand the cycle</title>
  <! Vue library -->
  <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 ++;
      }
      // Calculate attributes
      const computedNum = computed(() = > {
        return num.value + 5;
      });
      return {
        num, handleClick,computedNum
      }
    },
    template: ` 
       
 
        {{num}} -- {{computedNum}} 
       
`
  });
  
  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results

Use the GET and set methods inside the calculation properties

<! DOCTYPEhtml>
<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>Understand the cycle</title>
  <! Vue library -->
  <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 ++;
      }
      // Calculate attributes
      let computedNum = computed({
        get: () = > {
          return num.value + 5;
        },
        set: () = > {
          // Note that we changed num here
          num.value = 100; }});// Timer: Modifies the value of computedNum after three seconds
      setTimeout(() = > {
        computedNum.value = 1;
      }, 3000);
      return {
        num, handleClick,computedNum
      }
    },
    template: ` 
       
 
        {{num}} -- {{computedNum}} 
       
`
  });
  
  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results

Causes the set to receive parameters

<! DOCTYPEhtml>
<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>Understand the cycle</title>
  <! Vue library -->
  <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 ++;
      }
      // Calculate attributes
      let computedNum = computed({
        get: () = > {
          return num.value + 5;
        },
        set: parameter= > {
          // Note that we changed num here
          num.value = parameter - 5; }});// Timer: Modifies the value of computedNum after three seconds
      setTimeout(() = > {
        computedNum.value = 1000;
      }, 3000);
      return {
        num, handleClick,computedNum
      }
    },
    template: ` 
       
 
        {{num}} -- {{computedNum}} 
       
`
  });
  
  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results

Using the object

<! DOCTYPEhtml>
<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>Understand the cycle</title>
  <! Vue library -->
  <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 ++;
      }
      // Calculate attributes
      let computedNum = computed({
        get: () = > {
          return numObj.num + 5;
        },
        set: parameter= > {
          // Note that we changed num here
          numObj.num = parameter - 5; }});// Timer: Modifies the value of computedNum after three seconds
      setTimeout(() = > {
        computedNum.value = 1000;
      }, 3000);
      return {
        numObj, handleClick,computedNum
      }
    },
    template: ` 
       
 
        {{numObj.num}} -- {{computedNum}} 
       
`
  });
  
  const vm = app.mount('#root');
</script>

</html>
Copy the code

The results