新玩家Vue笔记10

提示：该文章为笔者的个人笔记并不是权威，如有错误，谢谢指出。

---

数据监测

<div id="root">
    <h1>学生信心</h1>
    <button @click="student.age++">年龄+1</button> <br/>
    <button @click="addSex">添加性别属性，默认值：男</button> <br/>
    <button @click="addFriend">在列表首位添加一个朋友</button> <br/>
    <button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button> <br/>
    <button @click="addHobby">添加一个爱好</button> <br/>
    <button @click="updateHobby">修改第一个爱好为：开车</button> <br/>
    <button @click="removeSmoke">过滤掉爱好中的抽烟</button> <br/>
    <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.hobby" :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>
<script>
    const vm = new Vue({
        el: "#root",
        data: {
            student: {
                name: "tom",
                age: 18,
                hobby: ['抽烟','喝酒','烫头']，
                fridends: [
                    {name: 'jerry', age: 19},
                    {name: 'tony', age: 20}
                ]
            }
        },
        methods: {
            addSex() {
                Vue.set(this.student, 'sex', '男')
            },
            addFriend() {
                this.student.frient.unshift({name: 'jack', age: 79})
            },
            updateFirstFriendName() {
                this.student.frient[0].name = '张三'
            },
            addHobby() {
                this.student.hobby.push('学习')
            },
            updateHobby() {
                this.student.hobby.splice(0, 1, '开车')
            },
            removeSmoke() {
                this.studnts.hobby = this.student.hobby.filter((h) => {
                    return h !== '抽烟'
                })
            }
        }
    })
</script>

---

总结

1. Vue会监测data中的所有数据。
2.  通过setter实现数据监测，且要在new Vue时就传入要监测的数据。
   1.  对象中后追加的属性，Vue默认不做响应式处理
   2. 如需给后添加的属性做响应式

      1. Vue.set(target, propertyName/index, value)

      2. vm.$set(target, propertyName/index, value)

3.  通过包裹数组更新元素的方法实现监测数组，本质就是做了两件事
   1. 调用原生对应的方法对数组进行更新
   2. 重新解析模板，进而更新页面
4. 在Vue中修改数组中的元素使用方法
   1. 使用push(), pop(), shift(), unshift(), splice(), sort()
   2. Vue.set() 或 vm.$set()