Vue的计算属性习题

最新推荐文章于 2022-11-04 15:03:06 发布

九九七七

最新推荐文章于 2022-11-04 15:03:06 发布

阅读量287

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_54455551/article/details/125344023

版权

计算属性实现setTimeout,达到监视属性的效果

这段代码里面的计算属性,相当于监视了属性fullName依赖的firstName和lastName,当firstName或者是lastName改变就会引起fullName属性的改变,加工生成了一个值为undefined的属性fullName,计算属性用a接收.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        姓:<input type="text" v-model="firstName">
        名:<input type="text" v-model="lastName">
        全名:<h2>{{fullName}} {{a}}</h2>
    </div>
    <script src="./libs/vue.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                firstName: "张",
                lastName: "三",
                a: 5//计算属性实现异步效果使用到的变量
            },
            methods: {

            },
            computed: {
                // 简写
                // get方法当读取就调用(默认) set方法修改就调用(默认没有)Object.defindProperty
                // fullName(){
                //     return this.firstName.trim() + "-" + this.lastName.trim() 返回值就是fullName的值,不能使用this.fullName赋值
                // }
                fullName: {//调用fullName就执行get函数,fullName依赖于firstName以及lastName(依赖于同步代码里面的参数)
                    get() {
                        // 要在外面调用一次firstName和lastName才行,这个里面的数据(同步操作里面)不变化就不会调用get函数,异步操作里面相应数据变化并不会调用get
                        var b = this.firstName
                        var c = this.lastName 
                        // this.fullName = "江-月奥"// 这里调用set,修改lastName以及firstName====>get=====>set=====>get.........死循环了
                        setTimeout(() => {
                            this.a = b + "-" + c//不能使用this.fullName赋值,赋值不会报错undefined,但是在这个里面属性的值只能使用return给,这是规则
                            // this.fullName = "余-海顺"//这里修改了fullName,调用set语法,firstName以及lastName变化了====>get调用
                            console.log(this.fullName)//undefined*2 this.fullName属性只能是return传递出来,修改不了,只要调用get就是undefined
                        }, 2000);
                        // return this.firstName + "-" + this.lastName
                    },
                    set(val) {
                        console.log(989999)
                        var arr = val.split("-")
                        this.firstName = arr[0]
                        this.lastName = arr[1]
                    }
                }
            }
        })
    </script>
</body>

</html>

watch监视属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        姓:<input type="text" v-model="firstName">
        名:<input type="text" v-model="lastName">
        全名:<h2>{{fullName}}</h2>
    </div>
    <script src="./libs/vue.js"></script>
    <script>
        
        const vm = new Vue({
            el: "#app",
            data: {
                firstName: "张",
                lastName: "三",
                fullName: ""
            },
            methods: {

            },
            watch: { //不能监视watch上面的属性,初始化调用的yuhaishun不能监视
                // 简写
                // fullName: {
                //     immediate: true, // 初始化就调用
                //     // deep:true, // 是否深度监视
                //     handler: function () {
                //         this.fullName = this.firstName + "-" + this.lastName
                //         console.log("11223")//执行两次 为什么执行两次,第一次是初始化调用执行,这时fullName属性数据改变,第二次数据改变调用函数handler,将数据传进去比较新旧值不同就执行.
                //     }
                // },
                // yuhaishun: {
                //     immediate: true, // 初始化就调用
                //     handler: function () {
                //         this.yuhaishun = true
                //         // console.log(123)
                //     }
                // },
                firstName(newValue) { //属性发生变化就调用,支持异步
                    setTimeout(() => {
                        console.log(this.fullName)
                        this.fullName = newValue + "-" + this.lastName
                    }, 2000)
                    // this.fullName = newValue + "-" + this.lastName
                },
                lastName(newValue) {
                    this.fullName = this.firstName + "-" + newValue
                }
            },
        })
        // vm.$watch('ddt', {
        //     immediate: true,
        //     handler: function () {
        //         console.log(123)
        //     }
        // })
    </script>
</body>

</html>

计算属性与监视属性的区别:

1.computed计算属性能完成的功能,watch监视属性都能完成

2.watch能完成的操作,computed不一定能够完成,setTiomoutwatch能异步操作.