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 相关文章推荐
vue3.0实现插件封装
Dec 14 Vue.js
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
Vue中computed和watch有哪些区别
Dec 19 Vue.js
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
vue监听滚动事件的方法
Dec 21 Vue.js
浅析vue中的nextTick
Dec 28 Vue.js
vue watch监控对象的简单方法示例
Jan 07 Vue.js
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
Vite和Vue CLI的优劣
Jan 30 Vue.js
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
开发一个封装iframe的vue组件
Mar 29 Vue.js
vue实现可拖拽的dialog弹框
May 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
PHP-MySQL教程归纳总结
2008/06/07 PHP
PHP学习笔记之数组篇
2011/06/28 PHP
几种有用的变型 PHP中循环语句的用法介绍
2012/01/30 PHP
php判断终端是手机还是电脑访问网站的思路及代码
2013/04/24 PHP
PHP 自定义错误处理函数的使用详解
2013/05/10 PHP
JavaScript学习笔记(十七)js 优化
2010/02/04 Javascript
编写Js代码要注意的几条规则
2010/09/10 Javascript
JQuery选择器特辑 详细小结
2012/05/14 Javascript
jquery选择器-根据多个属性选择示例代码
2013/10/21 Javascript
Javascript中克隆一个数组的实现代码
2013/12/06 Javascript
NodeJS的Promise的用法解析
2016/05/05 NodeJs
JS加载器如何动态加载外部js文件
2016/05/26 Javascript
基于javascript实现按圆形排列DIV元素(一)
2016/12/02 Javascript
jQuery点击头像上传并预览图片
2017/02/23 Javascript
通过button将form表单的数据提交到action层的实例
2017/09/08 Javascript
详解Vue项目部署遇到的问题及解决方案
2019/01/11 Javascript
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
javascript实现前端成语点击验证优化
2020/06/24 Javascript
koa2 数据api中间件设计模型的实现方法
2020/07/13 Javascript
Openlayers显示地理位置坐标的方法
2020/09/28 Javascript
零基础写python爬虫之打包生成exe文件
2014/11/06 Python
利用python写个下载teahour音频的小脚本
2017/05/08 Python
python 函数传参之传值还是传引用的分析
2017/09/07 Python
Python基于多线程实现抓取数据存入数据库的方法
2018/06/22 Python
python实现的MySQL增删改查操作实例小结
2018/12/19 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
keras在构建LSTM模型时对变长序列的处理操作
2020/06/29 Python
python获取时间戳的实现示例(10位和13位)
2020/09/23 Python
商场促销活动方案
2014/02/08 职场文书
《老王》教学反思
2014/02/23 职场文书
护士实习自荐信
2015/03/06 职场文书
2015年新教师工作总结
2015/04/28 职场文书
复兴之路纪录片观后感
2015/06/02 职场文书
公司趣味运动会开幕词
2016/03/04 职场文书
详解CSS故障艺术
2021/05/25 HTML / CSS