Vue基础小知识（二）------计算属性与监视属性-CSDN博客

本文链接：https://blog.csdn.net/m0_73520343/article/details/127147103

1.计算属性：computed：{ get（）{} set（）{} }

1.要通过已有的属性计算得来

2.底层借助了Object.defineProperty的getter和setter方法

3.内部有缓存机制（可以复用）

4.计算属性会出现在vm上，因此修改需要vm.$set()

当只读取数据不修改时，可以简写，省略get（)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 计算属性computed -->
    <div id="root">
        姓:<input type="text" v-model="xing"><br /><br/>
        名:<input type="text" v-model="ming"><br /><br/>
        姓名:<span>{{fullName}}</span>
    </div>

    <script>
        const vm=new Vue({
            el:'#root',
            data:{
                xing:'张',
                ming:'三'
            },
            computed:{
                fullName:{
                    //get方法作用是什么？当读取fullName时调用getter，且返回值就是fullName的值
                    //get什么时候被调用？1.第一次读取fullName的时候 2.所依赖的数据发生改变时
                    get(){
                        return this.xing + '-' + this.ming
                    },
                    //set方法作用是什么？当修改fullName时调用setter
                    set(value){
                        console.log('set',value)
                        const arr=value.split('-')
                        this.xing = arr[0]
                        this.ming = arr[1]
                    }
                }
            }
        })
    </script>
</body>
</html>

2.监视属性：watch：{ }

watch中两个属性，不需要时可以简写，只有handler（newValue，oldValue）

deep：true //深度监视

immediate：true //初始化调用


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- <h2>今天天气好{{isHot ? '炎热' : '寒冷'}}</h2> -->
        <h2>今天天气好{{info}}</h2>
        <button @click="change">切换天气</button>
        <h3>a的值是:{{numbers.a}}</h3>
        <button @click="numbers.a++">点我让a+1</button>
        <h3>b的值是:{{numbers.b}}</h3>
        <button @click="numbers.b++">点我让b+1</button>
    </div>

    <script>
        const vm =new Vue({
            el :'#root',
            data() {
                return {
                    isHot:true,
                    numbers:{
                        a:1,
                        b:2,
            },
                }
            },
            
            computed:{
                info (){
                    return this.isHot ? '炎热' : '寒冷'
                }
            },
            methods: {
                change(){
                    this.isHot=!this.isHot
                }
            },
            watch:{
                info:{
                    //immediate:true,初始化
                    handler(newValue,oldValue){
                        console.log('天气改变了',newValue, oldValue)
                    }
                },
                // //监视多级中某个属性变化
                // 'numbers.a':{
                //     handler(){
                //         console.log('a改变了')
                //     }
                // }
                //监视多级中所有属性变化
                numbers:{
                    deep:true,   //深层监视
                    handler(){
                        console.log('numbers改变了')
                    }
                }
            } 
            
        })
        //也可以用vm.$watch监听
        // vm.$watch('isHot',{
        //         handler(newValue,oldValue){
        //             console.log('天气改变了',newValue, oldValue)
        //             }
        //         })
    </script>
</body>
</html>