TOC

computed属性

    在Vue实例中,还有一个computed属性,该属性为Vue框架提供的计算属性功能,所谓计算属性,就是某些属性需要通过计算才能得到最后的值,这样的数据Vue官方推荐使用计算属性来实现,官方对计算属性也没有给出太多详细对解释,而是说,对于任何包含响应式数据对复杂逻辑,都应该使用计算属性,所谓响应式数据,就说data函数返回的对象;
    在Vue模版中可以直接通过插值语法显示data函数返回对象的数据,但在某些情况下,我们可能需要对这个数据做进一步对处理,以往都是在插值语法内进行,但是Vue框架设计插值语法的初衷是用于简单运算的,对于复杂的运算逻辑写在模板中会让模板过重且难以维护;
    当然,这个时候我们可能会想到使用methods处理函数来将这些需要处理的数据进行处理,然后将处理后的结果返回,然后在插值语法里面传递一个函数,这样也是可行的,但是这有一个问题,就是一旦我们在当前模版或者实例中多次引用到这个methods方法时,在Vue渲染模版的那一刻会多次执行这个方法,从而导致方法函数多次执行,如果这个处理的过程很复杂,且耗时较长,那么就带来了极大的性能浪费;
    那么对于这种场景,computed计算属性其实更加合适,computed计算属性有一个特性就是它自带缓存功能,一旦遇到这种场景,只要响应式数据没有发生变化,就不会重新执行,执行一次之后,会将这个计算的值缓存起来,下一次直接从缓存中获取这个值,极大的提升了渲染性能;
    此外,computed计算属性和methods还有一个不同之处,就是在模版中,想要使用computed计算属性方法,无需使用调用函数的方式,直接插值语法的方式即可,将计算属性内的方法标识符写在"{{}}"内;
    那么对于this来讲,computed计算属性内的方法函数中使用this,和methods处理函数中使用this是一致的,他们都代表data函数返回的对象;
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
<div id="box">
    <p>method:{{ methodFullName() }}</p>
    <p>method:{{ methodFullName() }}</p>
    <p>computed:{{ computedFullName }}</p>
    <p>computed:{{ computedFullName }}</p>
    <button @click="chengge">修改属性</button>
</div>
<script>
    Vue.createApp({
        data() {
            return {
                firstName: "Cai",
                lastName: "ChangEn"
            }
        },
        methods: {
            methodFullName() {
                console.log('method')
                return this.firstName + this.lastName
            },
            chengge() {
                this.lastName = "nidaye"
            }
        },
        computed: {
            computedFullName() {
                console.log('computed')
                return this.firstName + this.lastName
            }
        }
    }).mount("#box")
</script>

    如上结果,如果在模版引擎中两次引用,使用methods处理函数实现的,会调用两次对应的methods方法,而使用computed计算属性实现的,只需要调用一次computed方法,后面一次会直接从缓存中取数据;

计算属性本质

    其实计算属性本质就是一个数据描述符,上述的写法只是一个语法糖,其实它本质就是一个对象,对象内部存在set和get方法,通过这两个方法来捕获这个计算属性的变化,同时,这两个方法都是函数,set方法监听计算属性的变化,它默认接收一个参数,即传入的新值,如下;
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
<div id="box">
    <p>computed:{{ computedFullName }}</p>
    <p>computed:{{ computedFullName }}</p>
    <button @click="chengge">修改属性</button>
</div>
<script>
    Vue.createApp({
        data() {
            return {
                firstName: "Cai",
                lastName: "ChangEn"
            }
        },
        methods: {
            chengge() {
                this.computedFullName = "Cai DaYe"
            }
        },
        computed: {
            computedFullName: {
                set: function (newValue) {
                    console.log("setattr")
                    const [firstName, lastName] = newValue.split(' ') // 解构赋值
                    this.firstName = firstName
                    this.lastName = lastName
                },
                get: function () {
                    console.log("getattr")
                    return this.firstName + this.lastName
                }
            }
        }
    }).mount("#box")
</script>

watch属性

    在Vue实例中,有一个watch的属性,一般都称它之为侦听器,在开发的过程中,data函数返回的对象,可以使用插值语法来绑定在模版中,当数据发生变化时,template会自动将最新的数据渲染到页面上,但是在某些情况下,我们系统在代码逻辑监听某个数据的变化,这个时候就可以用到watch侦听器来完成;
    它是一个对象,它和methods及computed是一样的,内部都是一些函数方法,但是watch却有点不一样,它的函数名称,是响应式数据的标识符,即data函数返回的对象内数据的标识符,此外,当数据发生变化时,默认会接收到两个参数,第一个参数为属性改变后的值,第二个参数为改变前的值,如下;
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
<div id="box">
    <p>{{name}}</p>
    <button @click="chengge">修改属性</button>
</div>
<script>
    Vue.createApp({
        data() {
            return { // 响应式数据
                name: "cce"
            }
        },
        methods: {
            chengge() {
                this.name = 'caichangen'
            }
        },
        watch: {
            name(newValue, oldValue) { // 函数的标识符需要和响应式数据属性名一致
                console.log(`改变后的值为${newValue},改变前的值为${oldValue}`)
            }
        }
    }).mount("#box")
</script>

深度监听

    利用函数的方式来编写我们的侦听起方法,无法达到深度监听的效果,就比如,如果需要修改的数据是一个对象,但是并不是直接修改整个对象,而是修改对象内的属性,在这种场景下,使用函数的方式是无法监听到的,如下;
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
<div id="box">
    <p>My name is {{userInfo.name}} and age is {{userInfo.age}}</p>
    <button @click="chengge">修改年龄</button>
</div>
<script>
    Vue.createApp({
        data() {
            return {
                userInfo: {name: "cce", age: 18}
            }
        },
        methods: {
            chengge() {
                this.userInfo.age = 26
            }
        },
        watch: {
            userInfo(newValue, oldValue) {
                console.log(`改变后的值为${newValue},改变前的值为${oldValue}`)
            }
        }
    }).mount("#box")
</script>

    如上结果,我们直接修改对象内的属性值,而不是直接修改对象本身,这样使用函数的方式是无法监听到的,那么这个时候,就需要对其进行深度监听,那么对于深度监听来讲,就需要使用对象的方式来定义我们的侦听器函数;
    使用对象的形式来定义侦听器时,对象名称,需要和响应式数据的标识符一致(data函数返回对象的属性名),需要在这个对象内部加入一个handler方法,该handler就时上述的侦听器函数的形式,接收两个参数,第一个为修改前的数据,第二个为修改后的数据,当侦听到这个侦听器侦听的数据被修改时,会触发这个函数的执行;
    此外,还可以在这个对象内部,加入一个deep的属性,设置该属性为true时,表示启用深度监听,如下示例;
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
<div id="box">
    <p>My name is {{userInfo.name}} and age is {{userInfo.age}}</p>
    <button @click="chengge">修改年龄</button>
</div>
<script>
    Vue.createApp({
        data() {
            return {
                userInfo: {name: "cce", age: 18}
            }
        },
        methods: {
            chengge() {
                this.userInfo.age = 26
            }
        },
        watch: {
            userInfo: {
                handler(newValue, oldValue) {
                    console.log(newValue, oldValue)
                },
                deep: true
            }
        }
    }).mount("#box")
</script>

    可以看到上述的结果,虽然确实监听到了对象内属性的变化了,但是拿到的oldValue参数却是修改后的值,这肯定是有问题的,这是因为数据的内存地址,并未发生改变,newValue 和 oldValue 由于是同一个引用,所以属性值是一样的;
    那么想要解决这个问题,可以精确到对象的属性名进行深度侦听来解决此问题,如下;
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
<div id="box">
    <p>My name is {{userInfo.name}} and age is {{userInfo.age}}</p>
    <button @click="chengge">修改年龄</button>
</div>
<script>
    Vue.createApp({
        data() {
            return {
                userInfo: {name: "cce", age: 18}
            }
        },
        methods: {
            chengge() {
                this.userInfo.age = 26
            }
        },
        watch: {
            'userInfo.age': {
                handler(newValue, oldValue) {
                    console.log(newValue, oldValue)
                },
                deep: true
            }
        }
    }).mount("#box")
</script>

    此外,如果我们希望在页面打开的那一刻,执行一次侦听器函数,可以加入一个immediate属性,当该属性为true时,页面打开那一刻,就会立即执行一次侦听器函数,即handler函数;
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
<div id="box">
    <p>My name is {{userInfo.name}} and age is {{userInfo.age}}</p>
</div>
<script>
    Vue.createApp({
        data() {
            return {
                userInfo: {name: "cce", age: 18}
            }
        },
        watch: {
            userInfo: {
                handler(newValue, oldValue) {
                    console.log(newValue, oldValue)
                },
                deep: true,
                immediate: true
            }
        }
    }).mount("#box")
</script>

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注