Vue监视数据的原理详解


Posted in Vue.js onFebruary 24, 2022

1. Vue监视数据的原理(set方法)

1.1 Vue监视不同类型数据的原理

特点:vue会监视data中所有层级的数据,并且如果他检测到是对象那么就会给对象里面所有的属性配置getter和setter函数

1.1.1 如何监测对象中的数据?

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

​(1).对象中后追加的属性,Vue默认不做响应式处理(就是没有配置getter和setter函数)

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

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

​ vm.$set(target,propertyName/index,value)

1.1.2 如何监测数组中的数据?

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

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

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

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

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

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

1.1.3 小案例

<div id="root">
        <h2>人员信息</h2>
        <button @click="updatep">点击更新马东梅的信息</button>
        <ul>
            <li v-for='p in person' :key="p.id">
                {{p.name}} -- {{p.age}} -- {{p.gender}}
            </li>
        </ul>
        <button @click="addNew">在结尾添加一个人的信息</button>
    </div>

    <script>
        Vue.config.productionTip = false
        let vm = new Vue({
            el: '#root',
            data: {
                person: [
                    { id: "001", name: "马冬梅", age: 20, gender: "女" },
                    { id: "002", name: "夏洛特", age: 33, gender: "男" },
                    { id: "003", name: "沈腾", age: 50, gender: "男" },
                    { id: "004", name: "贾玲", age: 45, gender: "女" },
                ]
            },
            methods: {
                updatep() {            
                    // 但是下面方法不奏效,此方法Vue检测不到,
                    // 原因是因为数组上面没有getter和setter方法所以检测不到数据发生改变
                    // this.person[0] = {id:"001",name:"李焕英",age:66,gender:"女"}

                    // 下面方法奏效,是因为属性上面已经配置了getter和setter方法
                    // this.person[0].name = "李焕英"
                    // this.person[0].age = "66"
                    // this.person[0].gender = "女"

                    //  this.person.splice(0, 1, { id: "001", name: "李焕英", age: 66, gender: "女" }) 

                    this.$set(this.person, 0, { id: "001", name: "李焕英", age: 66, gender: "女" })
                },
                addNew() {
                    this.person.push({id: "005", name: "老妹啊", age: 99, gender: "女"})
                }
            },

        })
    </script>

1.1.4 set()小案例

<div id="root">
        <h2>学生信息</h2>
        <p>姓名:{{student.name}}</p>

        <!-- 
            一个很重要的点:如果是查找对象中不存在的属性,返回的是一个undefined
            不管v-show或者是v-if,如果等到undefined的就不显示
         -->
        <p v-show="student.sex">性别:{{student.sex}}</p>
        <p>年龄:{{student.age}}</p>
        <p>地址:{{student.address}}</p>
        <p>联系方式:{{student.contact}}</p>
        朋友:<p v-for="(v,index) in student.friends" :key="index">{{v.name}} -- {{v.age}}</p>
        <button @click="add">点击添加性别</button>
    </div>

    <script>
        Vue.config.productionTip = false
        let vm = new Vue({
            el: '#root',
            data: {
                student: {
                    name: "Jack",
                    age: 18,
                    address: "北京",
                    contact: "13xxxxxxx56",
                    friends: [
                        { name: 'Mark', age: 12 },
                        { name: 'Lisa', age: 52 },
                        { name: 'Guli', age: 25 },
                    ]
                }
            },
            methods: {
                add() {
                两种写法都可以
                    // this.$set(vm.student,"sex","男")
                    Vue.set(this.student,"sex","男")
                }
            },
        })
    </script>

总结

以上就是今天要讲的内容,本文介绍了Vue监视数据的原理和set方法,该部分很重要需要好好理解,希望对大家有所帮助!

Vue.js 相关文章推荐
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
vue中axios封装使用的完整教程
Mar 03 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
Vue监视数据的原理详解
Feb 24 Vue.js
vue项目打包后路由错误的解决方法
Apr 13 Vue.js
Vue的列表之渲染,排序,过滤详解
Vue3如何理解ref toRef和toRefs的区别
Feb 18 #Vue.js
Vue h函数的使用详解
Feb 18 #Vue.js
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 #Vue.js
前端vue+express实现文件的上传下载示例
一篇文章告诉你如何实现Vue前端分页和后端分页
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 #Vue.js
You might like
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
2020显卡排行榜天梯图 显卡天梯图2020年3月最新版
2020/04/02 数码科技
linux iconv方法的使用
2011/10/01 PHP
PHP设置进度条的方法
2015/07/08 PHP
Smarty模板简单配置与使用方法示例
2016/05/23 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
对于this和$(this)的个人理解
2013/09/08 Javascript
给ListBox添加双击事件示例代码
2013/12/02 Javascript
js面向对象之静态方法和静态属性实例分析
2015/01/10 Javascript
js实现点击链接后延迟3秒再跳转的方法
2015/06/05 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
2016/09/14 Javascript
jQuery 的 ready()的纯js替代方法
2016/11/20 Javascript
Node.js websocket使用socket.io库实现实时聊天室
2017/02/20 Javascript
jsonp跨域请求实现示例
2017/03/13 Javascript
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
2018/05/08 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
2019/01/30 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
2019/05/15 Javascript
angularjs1.X 重构controller 的方法小结
2019/08/15 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
2019/09/23 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
2020/03/12 Javascript
jquery实现进度条状态展示
2020/03/26 jQuery
在Python中使用PIL模块处理图像的教程
2015/04/29 Python
python生成器与迭代器详解
2019/01/01 Python
详细介绍Python进度条tqdm的使用
2019/07/31 Python
用Python将Excel数据导入到SQL Server的例子
2019/08/24 Python
Python socket连接中的粘包、精确传输问题实例分析
2020/03/24 Python
js实现移动端H5页面手指滑动刻度尺功能
2017/11/16 HTML / CSS
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
2014教师党员自我评议总结
2014/09/19 职场文书
单位委托书怎么写
2014/09/21 职场文书
个人自荐书怎么写
2015/03/26 职场文书
Python字符串对齐方法使用(ljust()、rjust()和center())
2021/04/26 Python
java后台调用接口及处理跨域问题的解决
2022/03/24 Java/Android
React更新渲染原理深入分析
2022/12/24 Javascript