Vue的基础的属性操作之计算属性和监视属性使用实例

躺平的乐子人

已于 2022-11-07 01:05:43 修改

阅读量140

点赞数

分类专栏： Vue2 文章标签： vue.js

于 2022-11-06 16:49:27 首次发布

本文链接：https://blog.csdn.net/weixin_73368873/article/details/127717376

版权

Vue2 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

简述

监视属性和操作属性是两种不同的操作，监视属性是对既有属性变化的操作，操作属性是主动计算而产生新的值的操作。相较于操作属性，监视属性更为全能，但两种并非可以互相替代的东西，因为两者的侧重点各不相同。

计算属性

定义

需要的属性不存在时候，通过已有的属性计算得到

原理

Object.defineproperty方法提供的getter和setter功能

优势

利用缓存的机制，效率更高，调试方便

<!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>Document</title>
</head>
<body>
    <script src="../js/vue.js"></script>
    <div id="root">
      firstName：<input type="text" v-model="firstName"></input><br>
      lastName：<input type="text" v-model="lastName"></input><br>
      Getvalue: <input type="text" v-model="a"></input><br>
      Getvalue: <input type="text" v-model="b"></input><br>
        <!---
        计算属性:
            --->
        姓名:<span>{{fullName}}</span>
        值:<spam>{{sumValue}}</spam>
    </div>
    <script>
        
        new Vue({
            el:'#root',
           //属性
            data:{
              firstName:'张',
              lastName:'三',
              a:11,
              b:12  
            },
            //计算属性 当有人读取fullName，get会被调用
           computed:{
              fullName:{
                get(){
                  //使用this
                   return this.firstName+this.lastName
                },
                set(value){
                   const arr = value.split('-')
                   this.firstName=arr[0]
                   this.lastName=arr[1]
                }
              },
              //简写属性,只能读，不能修改
              sumValue(){
                return this.a+this.b
              }
           }
        })

    </script>
    
</body>
</html>

在这里插入图片描述

监视属性

定义

监视属性操作当属性发生变化的时候，回调函数自动调用，进行相关操作

特点

1.发生变化时候自动调用函数
2.监视的属性必须存在

<!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>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
    <div id="root">
        <h1>天气是{{info}}的</h1>
        <button @click="ishot=!ishot">切换天气</button>
    </div>
    <script>
    const vm =   new Vue({
        el:"#root",
        data:{
            ishot:true

        },
        methods: {
           /* change(){
                this.ishot=!this.ishot
            }*/
           
            
        },
        computed:{
            info(){
                return this.ishot?'炎热':'凉爽'
            }
        },
       /* watch:{
            ishot:{
                //设置为true时候，初始化时候，会让handler调用一次
                immediate:false,
                //当ishot发生改变时候会进行调用
                //可以获取监视属性的前后的值
                handler(newValue,oldValue){
                    console.log("ishot发生了修改")

                }
            }
        }*/
      })
      //可以灵活实现函数
      vm.$watch('ishot',{
        
                //设置为true时候，初始化时候，会让handler调用一次
                immediate:false,
                //当ishot发生改变时候会进行调用
                //可以获取监视属性的前后的值
                handler(newValue,oldValue){
                    console.log("监视属性，监视到属性变化为",newValue?'炎热':'凉爽')

                }

      })

    </script>
    
</body>
</html>

在这里插入图片描述