vue监测数据遇到的问题以及其监视数据的原理：

最新推荐文章于 2023-02-13 10:50:53 发布

小学渣渣

最新推荐文章于 2023-02-13 10:50:53 发布

阅读量172

点赞数

本文链接：https://blog.csdn.net/R1156237641/article/details/119552086

版权

首先我们先看一下下面的例子（别忘了引用你自己的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>
    <script src="../js/vue.js"></script>
</head>

<body>

    <div id="root">
        <h2>人员列表</h2>
        <button @click="updateMei">更新马冬梅的信息</button>
        <ul>
            <li v-for="(p,index) in persons" :key="p.id">
                {{p.name}}-{{p.age}}-{{p.gender}}
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false

        const vm = new Vue({
            el: '#root',
            data: {
                persons: [
                    {id: '001',name: '马冬梅',age: 30,gender: '女'}, 
                    {id: '002',name: '周冬雨',age: 31,gender: '女'},
                    {id: '003',name: '周杰伦',age: 18,gender: '男'},
                    {id: '004',name: '温兆伦',age: 19,gender: '男'}
                ]
            },
            methods: {
                updateMei(){
                    // this.persons[0].name = '马老师'//奏效
                    // this.persons[0].age = 50//奏效
                    // this.persons[0].gender = '男'//奏效
                    this.persons[0] = {id: '001',name: '马老师',age: 50,gender: '男'}
                }
            },
        })
    </script>
</body>

</html>

当你用updateMei中奏效的三行代码去写的时候，你可以发现其实在页面上以及vue开发者工具都是奏效的，但是当你使用下面那种快捷的方式将其数据改变的时候，再点击按钮的时候，你可以发现页面并没有发生变化，而且vue开发者工具也不会发生变化(注意，打开页面时，首先打开vue开发者工具，在点击按钮)但是实际上马冬梅信息已经改成马老师的信息了，你可以在页面consolo里去验证一下，因为vue并没有监测到数据的变化，这是因为你直接操作了数组的索引值，用赋值的方式去改，vue是认可的，想要让数组修改的数据被vue认可必须使用数组提供的方法，比如：

pop() 删除并返回数组的最后一个元素

push() 向数组的末尾添加一个或更多的元素，并返回新的长度

shift() 删除并返回数组的第一个元素

unshift() 向数组的开头添加一个或更多的元素，并返回新的长度

splice() 删除元素，并向数组添加新元素影响原数组返回删除的元素

sort() 排序

reverse(): 颠倒数组

Vue监视数据的原理：

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

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

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

(1).对象中后追加的属性，Vue默认不做响应式处理

(2).如需给后添加的属性做响应式，请使用如下API：

Vue.set(target，propertyName/index，value) 或

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

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

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

(1).调用原生对应的方法对数组进行更新。

(2).重新解析模板，进而更新页面。

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

1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()

2.Vue.set() 或 vm.$set()

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

小学渣渣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue监测数据遇到的问题以及其监视数据的原理：

首先我们先看一下下面的例子（别忘了引用你自己的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-sc
复制链接

扫一扫