Vue2(笔记07) - Vue核心 - 计算属性的watch实现

学无止境 lv.1

发布时间：2022-12-07 12:11:06 302

相关标签： # javascript# html# java# java# 数据

需求：两个文本框，输入内容后再合并显示在元素中；

之前用计算属性实现过全名合并的示例，这次用监视属性 watch 实现

计算属性实现

<div id="root">
    姓：<input type="text" v-model="firstName"><br>
    名：<input type="text" v-model="lastName"><br>
    全名：<span>{{fullName}}</span>
</div>

Vue.config.productionTip = false;
const vm = new Vue({
    el: '#root',
    data: {
        firstName: "张",
        lastName: "三",
    },
    computed: {
        fullName(){
            return this.firstName +"-"+this.lastName
        }
    }
})

看效果：

Vue2(笔记07) - Vue核心 - 计算属性的watch实现_Vue

全名联动，效果没问题

监视属性实现全名

<div id="root">
    姓：<input type="text" v-model="firstName"><br>
    名：<input type="text" v-model="lastName"><br>
    全名：<span>{{fullName}}</span>
</div>

提示：数据双向绑定，全名合并；

const vm = new Vue({
    el: '#root',
    data: {
        firstName: "steve",
        lastName: "jobs",
        fullName: "steve-jobs"
    },
    watch: {
        // 监视 firstName
        firstName(val) {
            this.fullName = val + "-" + this.lastName
        },
        // 监视 lastName
        lastName(val) {
            this.fullName = this.firstName + "-" + val
        }
    }
})

提示1：使用 watch 监视属性，就要监视两个属性的变化，分别根据两个属性的变化，重新设置 fullName 的值；

提示2：监视函数原来的两个参数（新旧值），只需用一个新值就可以了；

看下效果：

Vue2(笔记07) - Vue核心 - 计算属性的watch实现_Vue_02

计算属性 VS 侦听属性

上面两种实现方式，看似计算属性更简洁明了一些；

新需求：当姓和名改变的时候，全名延迟一秒后显示；

watch实现：

const vm = new Vue({
    el: '#root',
    data: {
        firstName: "steve",
        lastName: "jobs",
        fullName: "steve-jobs"
    },
    watch: {
        firstName(val) {
            setTimeout(()=>{ // 直接异步
                this.fullName = val + "-" + this.lastName
            },1000)
        },
        lastName(val) {
            this.fullName = this.firstName + "-" + val
        }
    }
})

提示：wacth 可以很轻意的开启异步任务，而计算属性是返回值形式(不能开启异步任务)；

注意：setTimeout 不是 Vue管理的，一定要使用箭头函数，不然 this 就指到 window 上去了；

看下效果：延迟1秒实现

Vue2(笔记07) - Vue核心 - 计算属性的watch实现_Vue_03

使用 $watch() 也是可以的；

vm.$watch("firstName", {
    handler(val) {
        setTimeout(() => {
            this.fullName = val + "-" + this.lastName
        }, 1000)
    }
})
vm.$watch("lastName", {
    handler(val) {
        setTimeout(() => {
            this.fullName = this.firstName + "-" + val
        }, 1000)
    }
})

Vue2(笔记07) - Vue核心 - 计算属性的watch实现_监视属性_04

【computed 和 watch 之间的区别】：

1）computed 能完成的功能， watch 都可以完成；

2）watch 能完成的功能， comptued 不一定能完成，例如：watch 能异步操作；

两个重要的小原则：

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

2）所有不被 Vue 管理的函数（定时器的回调函数、ajax的回调函数），最好写成箭头函数，这样 this 的指向才是 vm 或组件实例对象；

文章来源： https://blog.51cto.com/ahuiok/5900973

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。