Vue监视数据的原理

最新推荐文章于 2023-04-26 16:04:11 发布

前端程序员路易

最新推荐文章于 2023-04-26 16:04:11 发布

阅读量309

点赞数

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

本文链接：https://blog.csdn.net/qq_46582421/article/details/121368297

版权

vue 专栏收录该内容

60 篇文章 0 订阅

订阅专栏

Vue.js通过setter监测data中的所有层次数据，并在创建实例时就需要传入要响应式处理的数据。对于对象，Vue默认不处理后添加的属性，但可以使用`Vue.set`或`vm.set`使其响应式。对于数组，Vue通过覆盖其内置方法来监听变化，并在修改数组元素时推荐使用特定API或`Vue.set`以确保视图更新。注意，`Vue.set`不能用于直接给vm或其根数据对象添加属性。

摘要由CSDN通过智能技术生成

Vue监视数据的原理:

vue 会监视data中所有层次的数据。
2.如何监测对象中的数据?
通过setter实现监视，且要在newVuel时就传入要监测的数据。
(1).对象中后追加的属性，Vue默认不做响应式处理
(2).如需给后添加的属性做响应式，请使用如下API:
Vue。set(target, propertyName/index. value) 或
Vm， $s e t (t a r g e t, p r o p e r t y N a m e / i n d e x, v a l u e) 3 . 如何监测数组中的数据 ? 通过包裹数组更新元素的方法实现，本质就是做了两件事 : (1) . 调用原生对应的方法对数组进行更新。 (2) . 重新解析模板，进而更新页面。 4 . 在 V u e 修改数组中的某个元素一定要用如下方法 : 1 . 使用这些 A P I : p u s h () 、 p o p () 、 s h i f t () 、 u n s h i f t () 、 s p l i c e () 、 s o r t () 、 r e v e r s e () 2 . V u e . s e t () 或 v m .$ set()
4.在EVue修改数组中的某个元素定要用如下方法:
1.使用这些API:push()、pop()、shift()、 unshift()、 splice()、 sort()、 reverse( )
2.Vue.set()或vm. $s e t () 特别注意 : V u e . s e t () 和 v m .$ set() 不能给vm或vm的根数据对象添加属性!

代码：

<!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>10.总结Vue数据监测</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <link rel="shortcut icon" href="../ico—全图标/application/dd.ico" type="image/x-icon">
</head>
<body>
    <div id="root">
        <h1>学生信息</h1>
        <button @click="student.age++">年龄+1岁</button> <br>
        <button @click="addSex">添加性别属性， 默认值:男</button> <br>
        <button @click="student.sex = 'ladyboy'">修改性别</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>
            <li v-for="(f,index) in student.friends" :key="index">
                {{f.name}}-{{f.age}}
            </li>
    </div>

    <script>
        
        Vue.config.productionTip = false

        const vm = new Vue({
            el:'#root',
            data:{
                student:{
                    name:'louie',
                    age:23,
                    hobby:['抽烟','喝酒'],
                    friends:[
                        {name:'Max',age:33},
                        {name:'SS',age:54}
                    ]
                }
            },
            methods: {
                addSex(){
                    // Vue.set(this.student,'sex','男')
                    this.$set(this.student,'sex','男')
                },
                addFriend(){
                    this.student.friends.unshift({name:'mm',age:22})
                },
                updateFirstFriendName(){
                    this.student.friends[0].name = '乾隆'//[0]代表第一个
                },
                addHobby(){
                    this.student.hobby.push('写诗')
                },
                updateHobby(){
                    // this.student.hobby.splice(0,1,'开车')
                    // Vue.set(this.student.hobby,0,'开车')
                    this.$set(this.student.hobby,0,'开车')
                },
                removeSmoke(){
                    this.student.hobby = this.student.hobby.filter((h)=>{
                        return h !== '抽烟'
                    })
                }
            }
            
        })
    
    </script>
</body>
</html>