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

╰半夏微凉° 2023-10-03 09:48 10阅读 0赞

### 文章目录 ###

*   *  5、computed方法生成计算属性
     *   *  简单使用
         *  运行结果
         *  计算属性内使用get和set方法
         *  运行结果
         *  使set接收参数
         *  运行结果
         *  使用对象
         *  运行结果

## 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>
      
      <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>

### 运行结果 ###

![image-20210615231658704][]

### 计算属性内使用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>
      
      <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>

### 运行结果 ###

![image-20210615232328240][]

### 使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>
      
      <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>

### 运行结果 ###

![image-20210615232654292][]

### 使用对象 ###

<!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>
      
      <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>

### 运行结果 ###

![image-20210615233231579][]

[image-20210615231658704]: https://img-blog.csdnimg.cn/img_convert/a336f97f645e65bf9d57d56be110d6d5.png
[image-20210615232328240]: https://img-blog.csdnimg.cn/img_convert/87fc62e9ba1ab58aae42311c341fda80.png
[image-20210615232654292]: https://img-blog.csdnimg.cn/img_convert/7bee73541c86b4a6854251419cc84562.png
[image-20210615233231579]: https://img-blog.csdnimg.cn/img_convert/6546030f0e2c6f85dae3e739b7a6e0e6.png