<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- <input type="text" v-model.number="a"/>
<input type="text" v-model.number="b"/>
<p>之和:{{c}}</p> -->
<input type="text" v-model="obj.name"/>
<input type="text" v-model="obj.age"/>
<input type="text" v-model="obj.sex">
<hr>
<button @click="handlepush()">增加</button>
</div>
</body>
</html>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
a:"",
b:"",
c:"",
obj:{
name:"zhangsan",
age:19
},
arr:[10,20,30,40]
},
computed:{},
beforeMount(){
// this.obj.sex="女"
this.$set(this.obj,"sex","女")
},
methods:{
handlepush(){
// this.arr.length = 0;
// console.log(this.arr);
// this.arr[0] = 100;
// console.log(this.arr);
this.$set(this.arr,0,100);
}
},
watch:{
// "obj.name"(newVal,oldVal){
// console.log(newVal,oldVal)
// },
// "obj.age"(newVal,oldVal){
// console.log(newVal,oldVal)
// }
// obj:{
// handler(newVal){
// console.log(newVal)
// },
// deep:true,
// //当页面第一次加载的时候也会做监听
// immediate:true
// }
arr(newVal){
console.log(newVal)
}
}
})
/*
属性监听
watch:监听属性的变化
原理：
监听依赖的属性，当依赖的属性发生改变的时候，当前函数就会被调用
注意：
1、watch对象中存放的都是函数，函数的名称是data中的key值
2、当data的属性发生改变的时候，那么watch中的函数就会执行。watch中的函数不需要调用
3、watch中的函数会接收到2个值 一个是新值一个是旧值
4、watch(watch如果监听对象的情况下只会监听对象的地址有没有发生改变)如果想要监听对象的情况下，必须进行深度监听
5、如果需要进行深度监听的时候必须使用handler函数以及设置deep为true
6、在特殊的情况下watch是无法监听数组的变化,我们可以通过this.$set进行数据的修改
7、watch默认情况下第一次页面加载的时候是不会进行数据的监听的，如果设置immediate就可以在第一次加载页面的时候进行数据的监听
核心:
当一个属性影响多个属性影响的时候就需要用到watch (搜索框 城市选择 vip级别选择....)
能用computed解决的不要用watch
面试题：
在watch中如何监听数组的变化？
通过set进行数组的更改
*/
</script>