【Vue基础四】Vue检测数据改变的原理

最新推荐文章于 2024-07-06 19:17:31 发布

牛小小小婷～

最新推荐文章于 2024-07-06 19:17:31 发布

阅读量477

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/hannah2233/article/details/126885350

版权

Vue 专栏收录该内容

36 篇文章 3 订阅

订阅专栏

文章目录

一引出问题

Vue更新数据时遇到的问题

1-1 点击更新马冬梅的信息时，页面没有发生变化

代码如下

this.persons[0] = { id: '001', name: '马老师', age: 50, sex: '男' }


<!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/dist/vue.js"></script>
</head>

<body>
    <div id="root">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <button @click="updatem">更新马冬梅的信息</button>
        <ul>
            <li v-for="(p,index) of persons" :key="index">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
    </div>

    <script>
        // 用computed实现
        new Vue({
            el: "#root",
            data: {
                keyWord: '',
                sortType: 0, // 原顺序  1降序  2升序
                persons: [{
                    id: '001',
                    name: '马冬梅',
                    age: 19,
                    sex: '女'
                }, {
                    id: '002',
                    name: '周冬雨',
                    age: 20,
                    sex: '女'
                }, {
                    id: '003',
                    name: '周杰伦',
                    age: 0,
                    sex: '男'
                }, {
                    id: '004',
                    name: '温兆伦',
                    age: 22,
                    sex: '男'
                }],
            },

            methods: {
                updatem() {
                    // this.persons[0].name = '马老师'   //奏效
                    // 开发者工具没变，控制台变了
                    this.persons[0] = {
                        id: '001',
                        name: '马老师',
                        age: 50,
                        sex: '男'
                    }
                }
            }
        })
    </script>
</body>

</html>

页面展示如下

开发者工具没变，控制台变了

1-2 在开发者工具中更改数据时:

二、

2-1

Vue.set(target,key,val)
- 往target身上追加属性和属性值

  <!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/dist/vue.js"></script>
</head>

<body>
    <div id="root">
        <h1>学校信息</h1>
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
        <h1>学生信息</h1>
        <button @click="addSex">添加一个性别属性，默认值是男</button>
        <h2>姓名： {{student.name}}</h2>
        <h2 v-if="student.sex">性别： {{student.sex}}</h2>
        <h2>年龄： {{student.age.rAge}}</h2>
        <h2>朋友们</h2>
        <ul>
            <li v-for="(f,index) in student.friends" :key="index">
                {{f.name}}--{{f.age}}
            </li>
        </ul>
    </div>

</body>
<script>
    const vm = new Vue({
        el: '#root',
        data: {
            name: '尚硅谷',
            address: '北京',
            student: {
                name: 'tom',

                age: {
                    rAge: 40,
                    sAge: 20
                },
                friends: [{
                    name: 'jquery',
                    age: 35
                }]
            }
        },
        methods: {
            addSex() {
                // methods的方法正常些，this一定指向vm
                Vue.set(this.student, 'sex', '男')
                this.$set(this.student, 'sex', '男')
            }
        }
    })
</script>

</html>

想往如上实例身上添加sex
- vm.$set(vm.student,'sex','女')

// methods的方法正常些，this一定指向vm
                Vue.set(this.student, 'sex', '男')
                this.$set(this.student, 'sex', '男')

set不能给vm._data或者vm添加属性

2-2 Vue检测数据的原理

更改原数组：
- push
  - 包装数组身上的
  - 重新解析
- pop
- shift
- unshift
- splice
- sort
- reverse
包装，不是Array原型对象上的方法
- arr.push = Array.prototype.push true
- vm._data.student.push === Array.prototype.push false
常用修改数组的方法
- Vue将被侦听的数组的变更方法进行包裹，它们也将会触发试图更新
- Vue.set(vm._data.student.hobby, 1, '打台球')

2-3 总结vue监视数据

Vue监视数据的原理
- vue会监视data中所有层次的数据。
如何监测对象中的数据？
- 通过setter实现监视，且要在new Vue时就传入要监测的数据
- 对象中后追加的属性，Vue默认不做响应式处理
- 如需给后添加的属性做响应式，请使用如下API：
```
```js
  Vue.set(target，propertyName/index，value) vm.$set(target，propertyName/index，value)
```
```
如何监测数组中的数据？
- 通过包裹数组更新元素的方法实现，本质就是做了两件事:
  - 调用原生对应的方法对数组进行更新。
  - 重新解析模板，进而更新页面。
在Vue修改数组中的某个元素一定要用如下方法:
- 使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
- Vue.set() 或 vm.$set()

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

三、模拟数据监听

let data = {
	nam:'aaa',
	address: '北京'
}

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

function Observer(obj) {
	// 汇总对象中所有的属性形成一个数组
	const keys = Object.keys(obj)
	// 遍历
	keys.forEach((k) => {
		Object.definePoperty(this, k, {
			get() {
				return obj[k]
			},
			set(val) {
				console.log(`${k}被变了，我要去解析模板，生成虚拟DOM。。。我要开始忙了`)
				obj[k] = val
			}
		})
	})
}

牛小小小婷～

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【Vue基础四】Vue检测数据改变的原理

Vue监视数据的原理vue会监视data中所有层次的数据。如何监测对象中的数据？通过setter实现监视，且要在new Vue时就传入要监测的数据对象中后追加的属性，Vue默认不做响应式处理```js```如何监测数组中的数据？通过包裹数组更新元素的方法实现，本质就是做了两件事:调用原生对应的方法对数组进行更新。重新解析模板，进而更新页面。使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
复制链接

扫一扫