监视属性笔记 computed/watch1、通过methods和computed实现属性变化；2、watch方法；3

1、通过methods和computed实现属性变化

@XXX='XXX'中可以写一些简单的语句

<body>
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="isHot = !isHot">切换天气</button>
        <button @click="changeWeather">切换天气</button>
    </div>
</body>
 
<script type="text/javascript">
Vue.config.productionTip = false;
 
const vm = new Vue({
    el: '#root',
    data: {
        isHot: true
    },
    computed: {
        info: {
            get() {
                return this.isHot ? '炎热' : '凉爽';
            },
            set(value) {
            }
        }
    },
    methods: {
        changeWeather() {
            this.isHot  = !this.isHot;
        }
    }
})
</script>

2、watch方法

1）isHot发生变化时，会调用handler方法

2）immediate，在初始化时让handler调用

<body>
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="isHot = !isHot">切换天气</button>
        <button @click="changeWeather">切换天气</button>
    </div>
</body>
 
<script type="text/javascript">
Vue.config.productionTip = false;
 
const vm = new Vue({
    el: '#root',
    data: {
        isHot: true
    },
    computed: {
        info: {
            get() {
                return this.isHot ? '炎热' : '凉爽';
            },
            set(value) {
            }
        }
    },
    methods: {
        changeWeather() {
            this.isHot  = !this.isHot;
        }
    },
    watch: {
        isHot: {
            immediate: true,
            handler(newValue, oldValue) {
                console.log("isHot被改动", newValue, oldValue);
            }
        },
        info: {
            immediate: true,
            handler(newValue, oldValue) {
                console.log("info被改动", newValue, oldValue);
            }
        }
    }
})

3） watch的第二种写法，使用$watch

const vm = new Vue({
    el: '#root',
    data: {
        isHot: true
    },
    computed: {
        info: {
            get() {
                return this.isHot ? '炎热' : '凉爽';
            },
            set(value) {
            }
        }
    },
    methods: {
        changeWeather() {
            this.isHot  = !this.isHot;
        }
    }
})
 
vm.$watch('info', {
    immediate: true,
    handler(newValue, oldValue) {
        console.log("info被改动", newValue, oldValue);
    }
})

3、深度监视

1）Vue是可以监测对象内部值的改变的，但watch默认不监测对象内部值的改变（一层），这是为了提高效率

2）配置deep:true可以监测象内部值的改变（多层）

<body>
    <div id="root">
        <h3>a的值是：{{numbers.a}}</h3>
        <button @click="numbers.a++">点击让a+1</button>
    </div>
</body>
 
<script type="text/javascript">
Vue.config.productionTip = false;
 
const vm = new Vue({
    el: '#root',
    data: {
        numbers: {
            a: 1,
            b: 1
        }
    },
    watch: {
        // 如果只监视a，可以这么写
        'numbers.a': {
            immediate: true,
            handler(newValue, oldValue) {
                console.log("a被改动", newValue, oldValue);
            }
        },
        // 如果要监视number中任意属性的变化，就要开启深度监视
        numbers: {
            deep: true,
            handler(newValue, oldValue) {
                console.log("number被改动", newValue.a, oldValue);
            }
        }
    }
})
</script>

4、computed和watch的区别

computed能完成的功能，watch都能完成 watch能完成的功能，computed不一定能完成，例如watch可以进行异步操作两个要注意的原则

所有被Vue管理的函数，都不要写箭头函数，这样this指向才是vm 所有不被Vue管理的函数，如定时器的回调函数、ajax的回调函数等，都要写箭头函数，这样this指向才是vm

<body>
    <div id="root">
        姓：<input type="text" v-model="firstName"><br><br>
        名：<input type="text" v-model="secondName"><br><br>
        全名：<span>{{fullName}}</span><br><br>
    </div>
</body>
 
<script type="text/javascript">
Vue.config.productionTip = false;
 
const vm = new Vue({
    el: '#root',
    data: {
        firstName: '张',
        secondName: '三',
        fullName: '张-三'
    },
    watch: {
        firstName(val) {
            this.fullName = val + "_" + this.secondName;
        },
        secondName(val) {
            this.fullName = this.firstName + "_" + val;
        }
    }
})

————————————————

转自CSDN博主「colspanprince」的原创文章，原文链接：blog.csdn.net/colspanprin…