Vue笔记-Day04-01（数据监控）

最新推荐文章于 2023-06-24 20:09:18 发布
最新推荐文章于 2023-06-24 20:09:18 发布
阅读量641 收藏 1
点赞数
分类专栏： vue\ 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57155307/article/details/122110239
版权

4.1 Vue监视数据改变的原理：

Vue监视数据的过程：
1.加工data，使之成为响应式的对象，即如果data的数据被读取或修改，就发出通知，实现对对象中属性的监视；
2.vm._data = data;

Vue如何监测对象中数据的变化（加工data===》 data 变成 Observer）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模拟一个数据监控</title>
</head>
<body>
    <div class="root">

    </div>

    <script type="text/javascript">

        let data = {
            name:'Sam',
            age:30,
        }
		//创建一个监视的实例对象，用于监视data中属性的变化
        const obs = new Observer(data)
        console.log(obs)

        let vm = {}
        vm._data = data = obs
		
		//Observer的构造函数，获取的参数是一个对象
        function Observer(obj){
        //	汇总对象中所有属性，形成一个数组
            const keys = Object.keys(obj);
		//遍历
            keys.forEach((k)=>{
            				//this是他的实例对象 Observer,让每一个属性都有自己的getter,setter方法
                Object.defineProperty(this,k,{
                    get(){
                        return obj[k]
                    },
                    set(v) {
                    //利用set检测，当属性改变时调用set方法
                    //vue在set触发时，去重新解析模板，生成虚拟dom
                        console.log(`${k} is changed`)
                        obj[k] = v
                    }
                })
            })
        }

    </script>

</body>
</html>
Vue Set的使用

向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = ‘hi’)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Vue Set的使用</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        li{
            font-size: 24px;
            line-height: 50px;
        }
    </style>
</head>
<body>

    <div id="root">
        <ul>
            <li>name:{{name}}</li>
            <li>age:{{age}}</li>
            <li>gender:{{gender}}</li>
        </ul>
    </div>

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

    const vm = new Vue({
        el:'#root',
        data:{
            name:'aq',
            age:24,
        }
    })

</script>
</body>
</html>

用Vue.set给data添加一个gender属性，value为男；

参数：

{Object | Array} target
{string | number} propertyName/index
{any} value
返回值：设置的值。

执行：
Vue.set(vm._data,‘gender’,‘男’)

结果：
vue.js:634 [Vue warn]: Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option.

报错提示无法给Vue实例或data添加一个响应式的属性。

这就是Vue.set的局限性，也就是说Vue.set只能给data里的对象追加属性，不能给data本身追加属性。也即Vue.set的target不能是vm或vm._data;

修改：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Vue Set的使用</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        li{
            font-size: 24px;
            line-height: 50px;
        }
    </style>
</head>
<body>

    <div id="root">
        <ul>
            <li>name:{{student.name}}</li>
            <li>age:{{student.age}}</li>
            <li>gender:{{student.gender}}</li>
        </ul>
    </div>

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

    const vm = new Vue({
        el:'#root',
        data:{
            student:{
                name:'aq',
                age:24,
            },
        }
    })

</script>
</body>
</html>

执行：
Vue.set(vm.student,‘gender’,‘男’);

成功！

Vue如何监测数组的数据变化:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Vue Set的使用</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        li{
            font-size: 24px;
            line-height: 50px;
        }
    </style>
</head>
<body>

    <div id="root">
        <ul>
            <li>name:{{student.name}}</li>
            <li>age:{{student.age}}</li>
            <li>gender:{{student.gender}}</li>
        </ul>
        <br>
        <h2>friends</h2>
        <ul>
            <li v-for="f in student.friends">{{f.name}}--{{f.age}}</li>
        </ul>
        <br>
        <h2>hobbies</h2>
        <ul>
            <li v-for="h in student.hobby">{{h}}</li>
        </ul>
    </div>

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

    const vm = new Vue({
        el:'#root',
        data:{
            student:{
                name:'aq',
                age:24,
                friends:[
                    {name:'jimmy',age:25},
                    {name:'joy',age:30}
                ],
                hobby:[
                    'smoke','drink','eat'
                ]
            },


        }
    })

</script>
</body>
</html>

注：
Vue想要修改student的hobby，是通过包装Array的常用7个方法：push,pop,shift,unshift,splice,sort,reverse；
这7个方法能对数组进行增删改查，Vue通过包装这7个方法来检测数组是否发生改变和作出响应。

vm.student.hobby[0] = ‘抽烟’
‘抽烟’
vm.student.hobby.push(‘学习’)
4
vm.student.hobby.pop()
‘学习’
vm.student.hobby.shift()
‘抽烟’
vm.student.hobby.splice(0,1,‘打台球’)
[‘drink’]
vm.student.hobby.push(‘学习’)
3
//经过Vue包装后的push与Array的原型push并不相同
vm.student.hobby.push === Array.prototype.push
false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>  Vue如何监测数组的数据变化</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        li{
            font-size: 24px;
            line-height: 50px;
        }
    </style>
</head>
<body>

    <div id="root">
        <button @click="ageAddOne">age+1</button><br><br>
        <button @click="addSex">Add Sex,default man</button><br><br>
        <button @click="addFriend">Add Friend in the head</button><br><br>
        <button @click="updataFriend">updata first Friend's name : ZhangSan</button><br><br>
        <button @click="addHobby">add a hobby</button><br><br>
        <button @click="updataHobby">updata the first hobby</button><br><br>

        <ul>
            <li>name:{{student.name}}</li>
            <li>age:{{student.age}}</li>
            <li>gender:{{student.gender}}</li>
        </ul>
        <br>
        <h2>friends</h2>
        <ul>
            <li v-for="f in student.friends">{{f.name}}--{{f.age}}</li>
        </ul>
        <br>
        <h2>hobbies</h2>
        <ul>
            <li v-for="h in student.hobby">{{h}}</li>
        </ul>
    </div>

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

    const vm = new Vue({
        el:'#root',
        data:{
            student:{
                name:'aq',
                age:24,
                friends:[
                    {name:'jimmy',age:25},
                    {name:'joy',age:30}
                ],
                hobby:[
                    'smoke','drink','eat'
                ]
            },
        },
        methods:{
            ageAddOne(){
                this.student.age++;
            },
            addSex(){
                // Vue.set(this.student,'gender','man')
                this.$set(this.student,'gender','man')
            },
            addFriend(){
                this.student.friends.unshift({name:'tom',age:40})
            },
            updataFriend(){
                // this.student.friends.splice(0,1,{name:'ZhangSan',age: 40})
                this.student.friends[0].name='ZhangSan'
            },
            addHobby(){
                this.student.hobby.push('learning')
            },
            updataHobby(){
                this.student.hobby.splice(2,1,'singing')
            }
        }

    })

</script>
</body>
</html>
数据监控总结：

1.Vue会监视data中所有层次的数据；
2.如何监视对象中的数据：
通过Setter实现监视，且要在new Vue时就传入要监测的数据。
（1）对象中后追加的属性，Vue默认不做响应式处理；
（2）如果需要给后追加的属性做响应式的处理，需要用到Vue.set API；

3.如何监视数组中的数据？
通过包装Array更新元素的7个方法来实现，本质是做了两件事：
（1）调用原生的对应方法对数组进行更新；
（2）重新解析模板，进而更新页面；

4.在Vue中修改数组的某个元素一定要用如下方法：
1.7个API： pop.push.shift.unshift.splice.sort.reverse;
2. Vue.set() 和 vm.$set

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

爱吃饭的阿强
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
轻松了解Vue的数据监听
weixin_43840538的博客
04-15 1093
我们使用过vue都知道，vue的数据是双向绑定的，Vue 数据双向绑定主要是指：数据变化更新视图，视图变化更新数据。典型的例子就是v-model。 其中，View 变化更新 Data ，可以通过事件监听的方式来实现，所以 Vue 的数据双向绑定的工作主要是如何根据 Data 变化更新 View。于是乎： 问vue实现双向绑定，拢共分几步？ 分四步： 第一步实现事件监听Observe：通过Obje...
Vue的数据监视
frozenpenguin的博客
04-16 906
参考： 尚硅谷 1. vue会监视data中所有层次的数据。 2. 如何监测对象中的数据？ 通过setter实现监视，且要在new Vue时就传入要监测的数据。 (1).对象中后追加的属性，Vue默认不做响应式处理 (2).如需给后添加的属性做响应式，请使用如下API： Vue.set(target，propertyName/index，value) 或 vm.$set(target，propertyName/index，value) 3. 如何监测数组中的数据？ 通过包裹（封装）数组更新元素的方法实现.
Vue中的数据监视
m0_67198021的博客
11-24 574
​ 通过setter实现监视，且要在new Vue时传入要监测的数据。​
Vue中的数据监测
荣山的博客
06-24 263
Vue中的数据监测
Vue中的数据监视（Watch）
m0_67318246的博客
05-14 206
【代码】Vue中的数据监视（Watch）
vue vue-seamless-scroll 数据滚动
03-28
vue vue-seamless-scroll 数据滚动 list 数据量少 时，不运行滚动
vue-print-nb 兼容低版本浏览器
11-28
vue-print-nb 兼容低版本浏览器 import Print from '@/lib/vue-print-nb/print.umd.min'Vue.use(Print)
vue-element-admin中文版本
07-20
该资源为一个后台管理系统，为vue-element-admin在git下搭建而成
vue-pivot-table-数据透视表的vue组件-Vue.js开发
05-27
vue-pivot-table数据透视表Live演示（jsfiddle）的vue组件安装npm install --save @ marketconnect / vue-pivot-table组件此项目vue-pivot-table数据透视表Live演示（jsfiddle）的vue组件npm install --save @ ...
vue keep-alive请求数据的方法示例
08-27
本篇文章主要介绍了vue keep-alive请求数据的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue-warning：监测预警
02-19
国土空间规划监测评估预警系统 被强烈要求基于某主管的“ OCV框架”开发，记录一下第一次使用openlayers，因为OCV就是宇宙全家桶，所以很多需要优化的地方我也没有做处理，其他也没必要做按按或各种优化了用户名密码：admin 888888 使用说明 :backhand_index_pointing_right:安装：npm i或cnpm i或yarn add :backhand_index_pointing_right:运行：npm start或yarn start :backhand_index_pointing_right:测试环境打包：npm run build --test或yarn build：test :backhand_index_pointing_right:正式环境打包：npm run build或yarn build 文件结构 ├── public 打包所需静态资源 └── src ├── api axios请求 ├── assets 项目静态资源 ├── components 全局组件 ├── di
vue:数据监视
sssxlxwbwz的博客
05-08 415
Vue监视数据的原理： 1. vue会监视data中所有层次的数据。 2. 如何监测对象中的数据？ 通过setter实现监视（数据代理），且要在new Vue时就传入要监测的数据。 (1).对象中后追加的属性，Vue默认不做响应式处理 (2).如需给后添加的属性做响应式，请使用如下API： Vue.set(ta...
Vue基础 数据监测
m0_60273757的博客
01-04 351
冲鸭
Vue监视数据
m0_64766945的博客
03-04 103
Vue数据监视
vue监视数据
m0_55916923的博客
08-09 520
特别注意：Vue.set()和vm.$set()不能给vm或vm的根数据对象添加属性。添加对象朋友时，可以直接用7个API方法进行添加，添加后的数据具有响应式。通过setter实现监视，而且要在new Vue时就要传入要监视的数据。而修改爱好时，由于爱好是数组，得使用vue.set()方法。（1）对象中后追加的属性，vue默认不做响应式处理。(2)Vue.set()或 vm.$set()通过包裹数组更新元素的方法实现，本质是做了两件事。（1）调用原生对应的方法对数组进行更新。3、如何监测数组中的数据？...
Vue数据侦听
weixin_43837268的博客
06-19 420
1.Watch data( ) { return { 'first':1 } }, watch: { first(newValue,oldValue) { console.log('新值--->>>',newValue) console.log('旧值--->>>',oldValue) } } ...
Vue技术—总结Vue监视数据
u013140948的博客
12-24 309
1.vue会监视data中所有层次的数据 2.如何检测对象中的数据 通过setter实现监视，且要在new Vue时就传入要检测的数据 （1）对象中后追加的属性，Vue默认不做响应式处理 （2）如需要后添加的属性做响应式，请使用一下API： Vue.set( target , propertyName/index , value ) 或 vm.$set( target , propertyName/index , value ) 3.如何检数组中的数据 通过包裹数据个更新元素的方法实现，本质就是做了两
数据分析 - 搭建数据监控体系（学习笔记）
m0_65392155的博客
02-26 2376
搭建数据监控体系包含两大关键工作： 1.建立数据指标体系，对业务情况进行监督。 2.将数据应用到管理流程，实现控制。 如何建立数据指标体系？ 1.认准服务对象 企业有部门分工，因此第一步要认准：我在为哪个部门服务。这非常关键！因为即使同一个问题，不同的部门的关注点会不同。同样是销售问题，如果是销售部看，关注的是每一支销售队伍完成率、进度、质量。如果是供应链看，那关注的就是总量、各产品数量、需求高峰期。如果是风控看，那关注的就是回款、坏账、套利。认清部门，有利于了解真正需求点。 即使有些看起来
vue2-org-tree动态加载数据
最新发布
09-14
你可以使用 `vue2-org-tree` 组件来动态加载数据。首先，你需要安装并引入 `vue2-org-tree` 组件： ```bash npm install vue2-org-tree ``` 然后，在你的 Vue 组件中，你可以按照以下方式动态加载数据： ```vue <template> <div> <org-tree :data="treeData"></org-tree> </div> </template> <script> import OrgTree from 'vue2-org-tree'; export default { components: { OrgTree }, data() { return { treeData: [] }; }, mounted() { this.loadData(); }, methods: { loadData() { // 在这里从服务器或其他数据源获取数据 // 并将数据赋值给 treeData // 注意，treeData 应该是一个符合组件要求的树形数据结构 } } }; </script> ``` 在 `loadData` 方法中，你可以从服务器或其他数据源获取数据，并将数据赋值给 `treeData`。请确保 `treeData` 是一个符合 `vue2-org-tree` 组件要求的树形数据结构。 这样，当组件加载完成时，`vue2-org-tree` 组件会根据 `treeData` 动态渲染树形结构。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值