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实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
Vue中computed和watch有哪些区别
Dec 19 Vue.js
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
vue watch监控对象的简单方法示例
Jan 07 Vue.js
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
Vue3.0 手写放大镜效果
Jul 25 Vue.js
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 Vue.js
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 Vue.js
vue修饰符.capture和.self的区别
Apr 22 Vue.js
ant design vue的form表单取值方法
Jun 01 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 file_exists 检查文件或目录是否存在的函数
2010/05/10 PHP
php打造属于自己的MVC框架
2012/03/07 PHP
很让人受教的 提高php代码质量36计
2012/09/05 PHP
php eval函数用法总结
2012/10/31 PHP
PHPAnalysis中文分词类详解
2014/06/13 PHP
php压缩和解压缩字符串的方法
2015/03/14 PHP
PHP下的浮点运算不准的解决方法
2016/10/27 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
thinkphp5框架路由原理与用法详解
2020/02/11 PHP
PDO实现学生管理系统
2020/03/21 PHP
javascript中input中readonly和disabled区别介绍
2012/10/23 Javascript
JS实现自定义简单网页软键盘效果代码
2015/11/05 Javascript
JavaScript中的ajax功能的概念和示例详解
2016/10/17 Javascript
学习 NodeJS 第八天:Socket 通讯实例
2016/12/21 NodeJs
详解JS异步加载的三种方式
2017/03/07 Javascript
解析jquery easyui tree异步加载子节点问题
2017/03/08 Javascript
JavaScript的继承实现小结
2017/05/07 Javascript
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
Angularjs的键盘事件的绑定
2017/07/27 Javascript
详解JavaScript中typeof与instanceof用法
2018/10/24 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
2019/12/23 Javascript
python+django+sql学生信息管理后台开发
2018/01/11 Python
用django-allauth实现第三方登录的示例代码
2019/06/24 Python
python opencv minAreaRect 生成最小外接矩形的方法
2019/07/01 Python
python创建属于自己的单词词库 便于背单词
2019/07/30 Python
python字典的常用方法总结
2019/07/31 Python
已安装tensorflow-gpu,但keras无法使用GPU加速的解决
2020/02/07 Python
使用python-pptx包批量修改ppt格式的实现
2020/02/14 Python
医院辞职信范文
2014/01/17 职场文书
80后职场人的职业生涯规划
2014/03/08 职场文书
购房协议书
2014/04/11 职场文书
我的中国梦口号
2014/06/16 职场文书
论群众路线学习心得体会
2014/10/31 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书
CSS3实现的文字弹出特效
2021/04/16 HTML / CSS