5.Vue中的计算属性（compute）监视属性（watch），二者优点和对比

最新推荐文章于 2023-08-30 11:19:19 发布

爱打羽毛球的程序员

最新推荐文章于 2023-08-30 11:19:19 发布

阅读量4.3k

点赞数 24

分类专栏： Web前端知识文章标签： java 开发语言

本文链接：https://blog.csdn.net/weixin_46637351/article/details/126071935

版权

Web前端知识专栏收录该内容

5 篇文章 0 订阅

订阅专栏

data中的数据就是属性

计算属性（compute）

1.定义:通过自己已有的属性计算得来

2.原理:底层结束Object.defineproperty方法提供的getter和setter

3.get函数什么时候执行

1.初次读取fullName的时候

2.所依赖的数据发生变化的时候

4.优势:与methods实现相比,内存有缓存机制(复用),效率更高,调试方便

5.备注:

1.计算属性最终会出现再vm上,直接读取即可

2.如果计算属性要被修改,那必须写set函数去相应修改

结合程序来看

<body>
    <div id="root">
        姓: <input type="text" v-model="fisrtName">
        <br>
        名: <input type="text" v-model="lastName">
        <br>
        姓名: <span>{{fullName}}</span>
    </div>
    <script>
        Vue.config.productionTip = false
        new Vue({
            el: '#root',
            data() {
                return {
                    fisrtName: 'fan',
                    lastName: 'xiyuan'
                }
            },
            // computed: {
            //     //完整写法
            //     fullName: {
            //         //get有什么作用,当人读取fullName时,get就会被调用
            //         // 且返回值作为fullName的值
            //         //set什么时候使用:当需要直接修改fullName的时候
            //         set(value){

            //         },
            //         get() {
            //             return this.fisrtName + this.lastName
            //         }
            //     }
            // }

            //简易写法:
            computed: {
                fullName() {
                    return this.fisrtName + this.lastName
                }
            }
        })
    </script>
</body>

运行结果

监视属性（watch）

深度监视:

(1):Vue中的watch默认不监测对象内部的值的改变(一层)

(2):配置deep:true可以监测对象内部值改变(多层)

备注:

(1)Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以

(2)使用watch时根据数据的具体结构,决定是否采用深度监视

代码

<body>
    <div id="root">
        <h2>今天天气{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
        <hr>
        <h3>a的值是{{number.a}}</h3>
        <button @click="number.a++">a+1</button>
        <hr>
        <h3>a的值是{{number.b}}</h3>
        <button @click="number.b++">b+1</button>

    </div>
    <script>
        Vue.config.productionTip = false

        new Vue({
            el: '#root',
            data() {
                return {
                    isHot: true,
                    number: {
                        a: 1,
                        b: 2
                    }
                }
            },
            computed: {
                info() {
                    return this.isHot ? '炎热' : '凉爽'
                }
            },
            methods: {
                changeWeather() {
                    this.isHot = !this.isHot
                }
            },
            watch: {
                number: {
                    deep: true,
                    handler() {
                        console.log("number改变了")
                    }
                },
                isHot: {
                    //immediate:ture,//初始化时让handler调用一下
                    handler(newValue, oldValue) {
                        console.log("isHot被修改了", newValue, oldValue)
                    }
                },
            }
        })
    </script>
</body>

运行结果

监视的简写

<body>
    <div id="root">
        <h2>今天天气{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
    </div>
    <script>
        Vue.config.productionTip = false

        const vm = new Vue({
            el: '#root',
            data() {
                return {
                    isHot: true
                }
            },
            computed: {
                info() {
                    return this.isHot ? '炎热' : '凉爽'
                }
            },
            methods: {
                changeWeather() {
                    this.isHot = !this.isHot
                }
            },
            watch: {
                //正常写法
                // isHot: {
                //     //immediate:ture,//初始化时让handler调用一下
                //     handler(newValue, oldValue) {
                //         console.log("isHot被修改了", newValue, oldValue)
                //     }
                // }

                //简易写法
                //简写不能配置immediate和deep

                // isHot(newValue, oldValue) {
                //     console.log('isHot被修改', newValue, oldValue)
                // }
            }
        })
        vm.$watch('isHot', {
            handler(newValue, oldValue) {
                console.log("SB", newValue, oldValue)
            }
        })
    </script>
</body>

compute和watch的区别

computed和wantch之间的区别:

1.computed能完成的任务,watch都能完成

2.watch能完成的任务,computed不一定能完成,例如:watch可以进行异步操作(eg:setTimeout)

⭐两个重要的原则:

1.所被Vue管理的函数,最好写成普通函数,这样this指向的才是vm和组件实例对象

2.所有不被Vue所管理的函数(定时器的回调函数,ajax的回调函数等),最好写成箭头函数

这样this的指向才是vm 或者组件实例对象

<div id="root">
        姓:<input type="text" v-model="firstName">
        <br>
        名:<input type="text" v-model="lastName">
        <br>
        姓名:<span>{{name}}</span>
    </div>
    <script>
        Vue.config.productionTip = false
        const vm = new Vue({
            el: '#root',
            data() {
                return {
                    firstName: 'fan',
                    lastName: 'xiyuan',
                    name: 'fanxiyuan'
                }

            },
            watch: {
                firstName(newValue) {
                    setTimeout(() => {
                        this.name = newValue + this.lastName
                    }, 1000)

                },
                lastName(newValue) {
                    this.name = this.firstName + newValue
                }
            }
        })
    </script>
</body>

爱打羽毛球的程序员

关注

24
点赞
踩
24

收藏

觉得还不错? 一键收藏
打赏
15
评论
5.Vue中的计算属性（compute）监视属性（watch），二者优点和对比

2.watch能完成的任务,computed不一定能完成,例如watch可以进行异步操作(egsetTimeout)2.所有不被Vue所管理的函数(定时器的回调函数,ajax的回调函数等),最好写成箭头函数。1.所被Vue管理的函数,最好写成普通函数,这样this指向的才是vm和组件实例对象。(1)Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以。(1)Vue中的watch默认不监测对象内部的值的改变(一层)(2)配置deeptrue可以监测对象内部值改变(多层)...
复制链接

扫一扫