Vue数据监测的原理

1.Vue会监视data中所有层次的数据。

2.如何监测对象中的数据?

3.如何监测数组中的数据？

4.在Vue修改数组中的某个元素时一定要使用如下方法：

<!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>数据监测</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>用户信息</h1>

        <button @click="student.age++">年龄加1岁</button>
        <button @click="addSex">添加性别属性，默认值为男</button>
        <button @click.once="addFriend">在列表首位添加一个朋友</button>
        <button @click="changeFirstFriendName">修改第一个朋友的名字为赵六</button>
        <button @click.once="addHobby">添加一个爱好</button>
        <button @click="changeFirstHobby">修改第一个爱好为练字</button>

        <h3>姓名：{{student.name}}</h3>
        <h3>年龄：{{student.age}}</h3>
        <h3 v-if="student.sex">性别：{{student.sex}}</h3>
        <h3>爱好：</h3>
        <ul>
            <li v-for="(h,index) in student.hobbies" :key="index">
                {{h}}
            </li>
        </ul>
        <h3>朋友们：</h3>
        <ul>
            <li v-for="(f,index) in student.friends" :key="index">
                {{f.name}}--{{f.age}}
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip =  false // 阻止 vue 在启动时生成生产提示

    new Vue({
        el:"#root",
        data:{
            name:"才疏学浅的小缘同学",
            student:{
                name:'张三',
                age:18,
                hobbies:['打游戏','敲代码','打篮球'],
                friends:[
                    {name:'李四',age:19},
                    {name:'王五',age:20}
                ]
            }
        },
        methods:{
            addSex(){
                Vue.set(this.student,'sex','男')
                //this.$set(this.student,'sex','男')
            },
            addFriend(){
                this.student.friends.unshift({name:'杨文杰',age:21})
            },
            changeFirstFriendName(){
                this.student.friends[0].name = '赵六'
            },
            addHobby(){
                this.student.hobbies.push('听歌')
            },
            changeFirstHobby(){
                // this.student.hobbies.splice(0,1,'练字')
                Vue.set(this.student.hobby,0,'练字s')
            }
        }
    })
</script>
</html>