Vue监视数据的原理（尚硅谷笔记）

最新推荐文章于 2024-05-11 05:40:21 发布

m0_48283799

最新推荐文章于 2024-05-11 05:40:21 发布

阅读量140

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_48283799/article/details/124633098

版权

Vue监视数据的原理：

1、Vue会监视data中所有层次的数据

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

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

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

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

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

vum.$set(target, propertyName/index, value)

3、如何检测数组中的数据？

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

（1）调用原生对应的方法对数组进行更新。

（2）重新解析模板，进而更新页面

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

1、使用这些API：push()、pop()、shift()、unshift()、splice()、reverse()

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

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

普通函数中的this指向它的直接调用者

箭头函数中的this指向它的外层调用者

什么时候使用箭头函数：把一个函数的结果（返回值）作为另一个函数的参数的时候

所有不是由Vue控制的回调函数尽可能用箭头函数，原因是箭头函数没有this会向上找，找到vm

(回调函数会找到window)

<body>
    <div id="root">
        <h2>学生信息</h2>

        <button @click="student.age++">年龄+1岁</button><br/>
        <button @click="addSex">添加性别属性，默认值：男</button><br/>
        <button @click="student.sex='未知'">修改性别</button><br/>
        <button @click="addFriend">在列表首位添加一个朋友</button><br/>
        <button @click="checkFriend">修改第一个朋友的名字为：张三</button><br/>
        <button @click="addHobby">添加一个爱好</button><br/>
        <button @click="checkHobby">修改第一个爱好为：打游戏</button><br/>
        <button @click="removeChouyan">过滤爱好中的抽烟</button>
        <h3>姓名: {{student.name}}</h3>        
        <h3>年龄: {{student.age}}</h3>
        <!-- 可用v-if -->
        <h3 v-show="student.sex">性别：{{student.sex}}</h3>  
        <h3>爱好: </h3>
        <ul>
            <li v-for="(h, index) in student.hobbys" :key="index">
                {{h}}
            </li>
        </ul>
        <ul>
            <li v-for="(f, index) of student.friends" :key="index">
                {{f.name}}--{{f.age}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;  // 设置为 false 以阻止 vue 在启动时生成生产提示。
        const vm = new Vue({
            el: '#root',
            data: {
                student: {
                    name: '琑儿',
                    age: 18,
                    hobbys:['学习', '跑步', '唱歌', '抽烟'],
                    friends: [
                        {name: '刘美玲', age: 3},
                        {name: 'Yibo', age: 24}
                    ]
                },           
            },
            methods: {
               /*  addAge() {
                    this.student.age++
                }, */
                // 因为有数据代理，所有不需要this._data.student
                addSex() {
                    Vue.set(this.student, 'sex', '男')
                },
                addFriend() {
                   this.student.friends.unshift({name: 'Sean', age: 30})
                },
                checkFriend() {
                   this.student.friends[0].name = '张三'
                },
                addHobby() {
                    this.student.hobbys.push('打游戏')
                },
                checkHobby() {
                   // this.student.hobbys.splice(0,1, '打游戏')
                    this.$set(this.student.hobbys, 0, '打游戏')
                },
                removeChouyan() {
                    this.student.hobbys = this.student.hobbys.filter((h)=>{
                        return h !== '抽烟'
                    })
                }
            }
        
        })
    </script>
</body>

m0_48283799

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue监视数据的原理（尚硅谷笔记）

Vue监视数据的原理： 1、Vue会监视data中所有层次的数据 2、如何监测对象中的数据？通过setter实现监视，且要在new Vue时就传入要监测的数据（1）对象中后追加的属性，Vue默认不做响应式处理（2）如需给后添加的属性做响应式，请使用如下API： Vue.set(target, property...
复制链接

扫一扫