Vue.js实例：数据绑定与对象属性监听,-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_52731478/article/details/131010272

watch

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script> -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 挂载点（vue容器） -->
    <div class="app">
        <!-- {{}}差值表达式 mastch语法 -->
        <h2>价格：{{price}}</h2>
        <button @click="price++">价格+1</button>
    </div>

    <script>
        // 创建vue实例
        const vm = new Vue({
            el:'.app',
            data:{
                pname:'小米',
                price:6999,
                obj:{
                	area:'上海',
                	material:[{
                		name:'玻璃',
                		cradle:'澳大利亚'
                	},{
                		name:'外壳',
                		cradle:'伊朗'
                	}]
                }
            },
            watch: {
                //price(newValue,oldValue){					//方法名与对应监视的变量名，只有变化时才触发
				//	console.log(newValue,oldValue)
				//},

				obj:{								//属性名与对应监视的变量名，
					handler(newValue,oldValue){
						console.log(newValue,oldValue)
					},
					immediate: true,				//vm实例加载完成立即执行监视，打印结果，oldValue为undefined
					deep:true					//深度监听，多级引用数据类型的数据变化也可以触发监听，但性能消耗大
				}

				"obj.area":{					//只监听obj的area属性
					handler(newValue,oldValue){
						console.log(newValue,oldValue)
					},
					immediate: true
				}
            },
        })

    </script>

</body>
</html>

vue2 监视属性

watch