Vue 计算属性和监视属性

news2024/11/25 18:26:46

Vue 计算属性和监视属性

computed

computed 计算属性

规则：

用已有的属性计算不存在的属性
默认调用一次get()
只有值不发生改变的时候才可以使用简写（函数）；值发生改变使用对象式写法，才可以配置set()方法
底层原理使用 object.definProperty(目标对象，键名，{})

<div id="app">
        <input type="text" v-model="fullName">
        <input type="text" v-model="Names">
    </div>

Vue.config.productionTip = false;
    var vm = new Vue({
        el: "#app",
        data() {
            return {}
        },
        computed: {
        //标准写法 对象式
            Names: {
                get() {
                    console.log("get被调用了");
                    return 99;
                },
                set(value) {
                    console.log(value);
                    console.log("set被调用了");

                }
            },
            //简写写法 函数式  没有set值
            fullName() {
                console.log("简写的计算方法触发");
                return 99;
            }
        }
    })

watch

watch 监视属性

规则：

监视已存在的属性
mmediate:true 默认调用一次,false不会
只有handler方法可以简写;写法:监视的属性(新值,就值){}
监视对象中的值需要深度监视.使用deep:true

<div id="app">
        <h1>今天的天气{{weather}}</h1>
        <h2>{{user}}</h2>
       	<h2>{{obj.id}}</h2>
        <button @click="func()">切换天气</button>
    </div>

 Vue.config.productionTip = false;
    var vm = new Vue({
        el: "#app",
        data() {
            return {
                bool: true,
                user: "",
                obj: {
                    id: 99
                }
            }
        },
        methods: {
            func() {
                this.bool = !this.bool;
            }
        },
        computed: {
            weather() {
                return this.bool ? "炎热" : "凉爽";
            }
        },
        watch: {
            bool: {
                immediate: true,
                deep:true,
                handler(newValue, oldValue) {
                    console.log('-------bool--------');
                    console.log(newValue);
                    console.log(oldValue);
                    if (newValue== true) {
                        this.user = "张三";
                    } else {
                        this.user = '李四'
                    }
                }
            },
            obj: {
                immediate: true,
                deep: true, //开启深度监视
                handler(newValue, oldValue) {
                	console.log('-------obj--------');
                    console.log(newValue);
                    console.log(oldValue);
                }

            }
            //简写
            // weather(newValue, oldValue) {
            //     console.log(newValue);
            //     console.log(oldValue);
            //     console.log(this);
            // }
        },

    })

在这里插入图片描述

这是watch的另一种写法 ,写在实例化之外

vm.$watch("user", {
        immediate: false,
        deep: false,
        handler(newValue, oldValue) {
            console.log(newValue);
            console.log(oldValue);
            console.log(this);
        }
    })