Vue中的监视属性

最新推荐文章于 2023-09-22 16:27:00 发布

好的v

最新推荐文章于 2023-09-22 16:27:00 发布

阅读量114

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2301_79126937/article/details/132172155

版权

监视属性

深度监视:

深度监视简写

监视属性

1.当被监视的属性变化时,回调函数自动调用,进行相关操作

2.监视的属性必须存在才能进行监视!!

3.监视的两种写法

(1).new Vue时传入watch配置

watch:{

info:{

immediate:true, //初始化时让handler调用一下

handler(newValue,oldValue){

console.log('info被修该了',newValue,oldValue);

} }

}

(2).通过vm.$watch监视

vm.$watch('isHost',{

immediate:true, //初始化时让handler调用一下

handler什么时候调用？当isHot改变时

handler(newValue,oldValue){

console.log('info被修该了',newValue,oldValue);

}

深度监视:

(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的值是:{{numbers.a}}</h3>
        <button @click='numbers.a++'>点我让a++</button>
        <h3>b的值是:{{numbers.b}}</h3>
        <button @click='numbers.b++'>点我让a++</button>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false//阻止vue在启动时生成生产错误
    const vm = new Vue({
        el: '#root',
        data: {
            isHot: true,
            numbers: {
                a: 1,
                b: 1
            }
        },
        computed: {
            info() {
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        methods: {

            changeWeather() {
                this.isHot = !this.isHot
                //this.x++
            }
        },
        watch: {    
            numbers: {
                //监视多级结构中所有属性的变化
                deep: true,
                handler() {
                    console.log('number改变了');
                }
            }
        }
    })
</script>