Vue -- 监视数据

最新推荐文章于 2024-05-16 21:56:24 发布

zmm_mohua

最新推荐文章于 2024-05-16 21:56:24 发布

阅读量168

点赞数

分类专栏： vue学习记录文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_42250642/article/details/123019941

版权

vue学习记录专栏收录该内容

21 篇文章 1 订阅

订阅专栏

Vue – 监视数据

小结

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的根数据对象添加属性！！！

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>总结Vue数据检测</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <h2>学校名称：{{name}}</h2>
            <h2>学校地址：{{address}}</h2>
            <h3>学生信息</h3>
            <button @click="student.age++">点击，学生年龄+1</button>
            <br><hr>
            <button @click="addSex">点击，添加性别属性，默认值，男</button>
            <br><hr>
            <button @click="addF">点击，在列表首位添加一个朋友</button>
            <br><hr>
            <button @click="updateName">点击，修改第一个朋友的名字为：张三</button>
            <br><hr>
            <button @click="addH">点击，添加一个爱好</button>
            <br><hr>
            <button @click="updateHobby">点击，修改第一个爱好为：开车</button>
            <h4>姓名：{{student.name}}</h4>
            <h4>年龄：{{student.age}}</h4>
            <h4 v-if="student.sex">性别：{{student.sex}}</h4>
            <h4>爱好：</h4>
            <ul>
                <li v-for="(h,index) in student.hobby" :key="index">
                    {{h}}
                </li>
            </ul>
            <h4>朋友们：</h4>
            <ul>
                <li v-for="(f,index) in student.friends" :key="index">
                    {{f.name}}--{{f.age}}
                </li>
            </ul>
        </div>
    </body>

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

        const vm = new Vue({
            el:'#root',
            data:{
                name:'湖南大学',
                address:'北京',
                student:{
                    name:'Tom',
                    age:18,
                    hobby:['学习','看小说','追剧'],
                    friends:[
                        {name:'Marry',age:19},
                        {name:'Mary',age:20}
                    ]
                }
            },
            methods: {
                addSex(){
                    //Vue.set(this.student,'sex','女')
                    this.$set(this.student,'sex','男')
                },
                addF(){
                    this.student.friends.unshift({name:'Lili',age:17})
                },
                updateName(){
                    this.student.friends[0].name = '张三'
                },
                addH(){
                    this.student.hobby.push('玩游戏')
                },
                updateHobby(){
                    this.student.hobby.splice(0,1,'开车')
                    //Vue.set(this.student.hobby,0,'开车')
                    //this.$set(this.student.hobby,0,'开车')
                }
            }
        })
    </script>
</html>