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


<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+1button>
        <hr>
        <h3>a的值是{{number.b}}h3>
        <button @click="number.b++">b+1button>
 
    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>

相关阅读:
SQL6 查找学校是北大的学生信息
java计算机毕业设计中医保健网站源码+系统+lw+数据库+调试运行
Spring 02: 基于xml的Spring接管下的三层项目架构
IDEA 使用技巧(快速生成list)
MyBatis核心配置文件之typeAliases
2024年csdn最新最全pytest系列——pytest-rerunfailures插件之测试用例失败重跑
操作系统MIT6.S081：P7-＞Interrupts
SICP：赋值和局部状态（Python实现）
编程大师-Netty
bootstrap 主题

原文地址：https://blog.csdn.net/weixin_46637351/article/details/126071935