第9集丨Vue 江湖 —— 监测数据原理

一、修改数据时的一个问题

下面案例中，我们定义了一个按钮，期望是：点击按钮更新persons[0] 的信息。

但实际问题是：Vue监测不到数据的变化。

<div id="root">
    <h2>列表过滤</h2>
    <button @click="change">更新令狐冲信息</button>
    <ul>
        <li v-for="(p,index) in persons" :key="p.id" >
            {{p.name}} - {{p.use}} - {{p.age}}
        </li>
    </ul>
    
</div>
<script>
    const vm = new Vue({
        el:'#root',
        data:{
            persons:[
                {id:'001',name:'令狐冲',use:"独孤九剑",sex:'男',age:20},
                {id:'002',name:'任盈盈',use:"仙女下凡",sex:'女',age:19},
                {id:'003',name:'任我行',use:"吸星大法",sex:'男',age:50}
            ]
        },
        methods: {
            change(){
                // 可行的方式
                // this.persons[0].name = "假的令狐冲";
                // this.persons[0].use = "葵花宝典";
                // this.persons[0].age = 100;

                // Vue没发现你修改了数据，其实已经改了
                this.persons[0] = {id:'001',name:'假的令狐冲',use:"葵花宝典",sex:'男',age:100}
                
            }
        },
    })
</script>

1.1 现象一

1. 在浏览器中打开页面，在打开vue-devtools
2. 点击按钮
3. 观察工具中的数据，竟然没有发生变化！！！但其实数据已经真实改变了
4. 我们可以通过控制台，输入vm.persons[0] 查看，发现数据确实变了。

1.2 现象二

1. 在浏览器中打开页面，然后先点击按钮
2. 再打开vue-devtools
3. 查看工具中数据，发现数据改变了！！！

二、Vue监测数据原理

2.1 模拟一个数据监测

下面案例中，当data的数据发生变化，就会在控制台打印出一句话。

let data = {
    name:'令狐冲',
    menpai:'华山派'
}

// 创建一个监视的实例对象，用于监视data中属性的变化
const obs = new Observer(data)

// 准备一个vm的实例对象
let vm = {}
vm._data = data = obs;

function Observer (obj) {
    // 汇总对象中所有的属性形成一个数组
    const keys = Object.keys(obj);
    
    keys.forEach((k)=>{
        Object.defineProperty(this,k,{
            get(){
                return obj[k]
            },
            set(val){
                console.log(`${k}被改了，之后解析模板，生成虚拟DOM....`);
                obj[k] = val
            }
        })
    })
}

2.2 数据劫持

数据劫持：在访问或修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作，如修改返回结果。

Vue 2.x 使用的是 Object.defineProperty()，而 Vue 在 3.x 版本之后改用 Proxy 进行实现

2.3 Vue.set()/vm.$set()

• 语法：Vue.set( target, propertyName/index, value )

• 功能：向响应式对象中添加一个 property，并确保这个新property同样是响应式的，且触发视图更新。

• 注意：它必须用于向响应式对象上添加新 property，因为 Vue无法探测普通的新增 property (比如 this.myObject.newProperty = 'hi')

 Vue.set(this.person.hobby, 0, "哈哈哈")
 this.$set(this.person.hobby, 0, "哈哈哈")
 // 从第0个位置，删一个，在插入一个
// this.person.hobby.splice(0,1,"哈哈哈")

2.4 基本原理

Vue监测到data中的数据（所有层次的数据）发生变化，就会调用setter重新解析模板，解析引用的到的数据的值。

2.4.1 如何监测对象中的数据?

• 通过setter实现监视，且要在new Vue时就传入要监测的数据。

  (1). 对象中后追加的属性，Vue默认不做响应式处理
  (2). 如需给后添加的属性做响应式，请使用如下API:

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

2.4.2 如何监测数组中的数据?

Vue通过包裹数组的更新元素的方法实现，本质就是做了两件事：

• (1). 调用原生对应的方法对数组进行更新。
• (2). 重新解析模板,进而更新页面。

数组中这些被包裹过的方法包括：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

2.4.3 修改数组中的某个元素

在Vue中，修改数组中的某个元素一定要用如下方法，才能实现响应式：

• 被包裹过的方法：push()、pop()、shift()、unshift()、splice()、sort(). reverse()
• 通过Vue.set()或vm.$set()

注意：Vue.set()和 vm.$set() 不能给vm或 vm的根数据对象(vm.data)添加属性。

2.5 案例

2.5.1 需求功能

• 需求如下截图

2.5.2 实现

<div id="root">
    <h2>笑傲江湖</h2>
    <hr>
    <div>
        <button @click="person.age++">年龄+1岁</button> 
        <button @click="addSex">添加性别属性,默认值:男</button> 
        <button @click="addFriend">在列表首位添加一个朋友</button>
        <button @click="updateFName">修改第一个朋友的名字为:小三</button>
        <button @click="addHobby">添加一个爱好</button>
        <button @click="updateHobby">修改第一个爱好为: 哈哈哈</button>
        <button @click="removeHobby">过滤爱好中的喝酒</button>
    </div>
    <h3>姓名：{{person.name}}</h3>
    <h3>年龄：{{person.age}}</h3>
    <h3 v-if="person.sex">性别：{{person.sex}}</h3>
    <h3>爱好：</h3>
    <ul>
        <li v-for="(h,index) in person.hobby" ::key="index">
            {{h}}
        </li>
    </ul>

    <h3>朋友：</h3>
    <ul>
        <li v-for="(f,index) in person.friends" ::key="index">
            {{f.name}} - {{f.age}}
        </li>
    </ul>

</div>
<script>
    const vm = new Vue({
        el:'#root',
        data:{
            person:{
                name:'令狐冲',
                age:26,
                hobby:['喝酒','练剑','行侠仗义'],
                friends:[
                    {name:'田伯光',age:30},
                    {name:'任我行',age:50}
                ]
            }
        },
        methods: {
            addSex(){
                // Vue.set(this.person,'sex','男')
                this.$set(this.person,'sex','男')
            },
            addFriend(){
                this.person.friends.unshift({name:'任盈盈',age:'26'})
            },
            updateFName(){
                this.person.friends[0].name = '小三'
            },
            addHobby(){
                this.person.hobby.push('大笑')
            },
            updateHobby(){
                // 从第0个位置，删一个，在插入一个
                // this.person.hobby.splice(0,1,"哈哈哈")
                // Vue.set(this.person.hobby, 0, "哈哈哈")
                this.$set(this.person.hobby, 0, "哈哈哈")
            },
            removeHobby(){
                this.person.hobby = this.person.hobby.filter((h)=>{
                    return h !== "喝酒"
                })
            }
        },
    })
</script>