位置: IT常识 - 正文

【VUE前进之路】使用数据代理,计算属性与监视属性的妙用(vue前进后退)

编辑:rootadmin
【VUE前进之路】使用数据代理,计算属性与监视属性的妙用 1.数据代理1.1什么是数据代理

推荐整理分享【VUE前进之路】使用数据代理,计算属性与监视属性的妙用(vue前进后退),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue前端项目实例,vue进阶,vue前进后退,vue前段,vue前进后退,vue前端开发教程,vue前端开发教程,vue前段,内容如对您有帮助,希望把文章链接给更多的朋友!

通过一个对象代理对另一个对象中属性的操作(读/写) 1.Vue中的数据代理:通过vm对象来代理data对象中属性的操作(读/写) 2.Vue中数据代理的好处:更加方便的操作data中的数据 3.基本原理:通过0bject . defineProperty( )把data对象中所有属性添加到vm上。为每一一个 添加到vm上的属性,都指定个getter/setter。在getter/setter内部去操作(读/写) data中对应的属性。简单来说就是把data的属性全部都复制给了_data了一份,可以让vm进行使用

1.2了解使用数据代理

Object.defineProperty方法(给对象添加属性方法的一个方法)这个方法会传入三个参数分别是 对象名,属性名,配置项 在这里我们可以看到,这个颜色稍微的优点变化(这里就是使用Object.defineProperty方法进行添加的,这里的age是不可以进行枚举的,即不参与遍历)

<script> let person = { name:'大熊' sex:'男', } Object.defineProperty(person,'address',{ value:18 }) console.log(person); </script>

这里可以使用Object.keys()进行验证一下(并没有age这个属性)(可以看到依然没有age) 当然也可以使用for… in进行遍历一下这个对象 如和才能让他可以被枚举呢?(这里就使用 enumerable 只要将它的值改为true即可)enumerable: true (是否可以被枚举)writable:true(是否可以修改属性)configurable: true(是否可以删除改属性)这四个基本配置项的内容(包括value)他们的默认值为false

<script> let person = { name:'大熊', sex:'女', } Object.defineProperty(person,'address',{ value:18 }) for(k in person){ console.log(k); } console.log(Object.keys(person)); console.log(person); </script>

那问题来了,如何进行对数据的读取和修改呢?这里用到了两个方法,get和set 当有人读取person的age属性时,get函 数(getter)就会被调用,且返回值就是age值 当有人修改person的age属性时,set函数(setter)就会被调用,且会收到修改的具值

<script> let number = 19; let person = { name: '大熊', sex: '女', } Object.defineProperty(person, 'address', { get() { console.log('age属性已被读取'); return number; }, set(value) { console.log('age属性已被修改'); number = value } }) </script>2. 事件处理

1.使用v-on:xxx或@xxx绑定事件,其中xxx是事件名 2.事件的回调需要配置在methods对象中,最终会在vm上 3.methods中配置的函数,不可以使用箭头函数,否则this就不是vm了而是window 4.methods中配置的函数,都是被Vue所管理的函数,this的指向是vm或组件实例对象5.@click="demo"和@click="demo"效果一致,但后者可以传参 注:不要把事件回调方法data里,虽然可以实现相同的功能,但是这样会给增加一个数据代理,给一个方法添加数据代理是没有意义的

<div id="user"> <h1>{{name}}吃饭了吗?</h1> <button v-on:click="showPage($event,18)">点击提示</button> <!-- 第一个参数是event,所以下面的参数顺序要和这里一致 --> </div> <script> let vm = new Vue({ el: '#user', data: { name: '山鱼', }, methods: { // 在这里配置各种事件回调 showPage(event, number) { alert('山鱼吃饭了!') console.log(number); } } }) </script>2.1事件修饰符【VUE前进之路】使用数据代理,计算属性与监视属性的妙用(vue前进后退)

1.prevent:阻止默认事件(常用) 2.stop: 阻止事件冒泡(常用) 3.once:事件只触发一次(常用) 4.capture: 使用事件的捕获模式 5.self: 只有event.target是当前操作的元素是才触发事件; 6.passive: 事件的默认行为立即执行,无需等待事件回调执行完毕;

<div id="user"> <h1>欢迎来到{{name}}的小屋</h1> <!-- 1,阻止默认事件 --> <a href="http://baidu.com" @click.prevent = "showInfo">点我不跳转</a> <!-- 2,阻止事件冒泡 --> <div class="one" @click = 'showInfo'> <button @click.stop = 'showInfo'>点我</button> </div> <!-- 3,事件只触发一次 --> <button @click.once = 'showInfo'>只能点一次</button> </div> <script> const vm = new Vue({ el:'#user', data:{ name:'大熊', }, methods:{ showInfo(e){ alert('同学,慢走!') } } }) </script>2.2键盘事件

常用的按键别名 回车=> enter,删除=>delete(捕获“删除”和“退格”键),退出=> esc,空格=> space,上=>up,下=> down,左=> left,右=> right

特殊的按键别名 1.换行=> tab (特殊,必须配合keydown使用) 2.系统修饰键 ctrl,alt,shift,meta(meta就是win键也就是windows徽标) 注: (1).配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发。 (2).配合keydown使用:正常触发事件。

<div class="user"> <h1>欢迎加入{{uname}}</h1> <!--.enter 就是按下回车触发事件,也成为按键别名--> <input type="text" placeholder="按下回车提示输入" @keyup.enter = 'showInfo'> <!--删除 del --> <input type="text" placeholder="按下del提示输入" @keyup.delete = 'showInfo'> <!-- 退出esc --> <input type="text" placeholder="按下ESC提示输入" @keyup.esc = 'showInfo'> <!-- 特殊按键别名 --> <input type="text" placeholder="一同按下ctrl+‘其他按键’并释放提示输入" @keyup.ctrl = 'showInfo'> <!-- 自定义别名 --> <input type="text" placeholder="按下回车提示输入" @keyup.huiche = 'showInfo'> </div> <script> // 也可以自定义按键别名 Vue.config.keyCodes.huiche = 13; const vm = new Vue({ el:'.user', data:{ uname:'山鱼社区' }, methods:{ showInfo(e){ console.log(e.target.value); } } }) </script>3.计算属性

1.定义: 要用的属性不存在,要通过已有属性计算得来。 2.原理:底层借助了objcet . defineproperty方法提供的getter和Isetter. 3. get函数什么时候执行? (1).初次读取时会执行一次。 (2).当依赖的数据发生改变时会被再次调用。 4.优势:与jmethods 实现相比,内部有缓存机制(复用),效率更高,调试方便。 5.注: 1.计算属性最终会出现在:vm上,直接读取使用即可。 2.如果i计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发发生变化 3.计算属性内不能够开启异步任务(如:定时器)

<body> <!-- 容器 --> <div class="user"> 姓:<input type="text" v-model="firstName"><br> 名:<input type="text" v-model="lastName"><br> 姓名:<span>{{fullName}}</span> </div> <script> const vm = new Vue({ el: '.user', data: { firstName: '李', lastName: '四' }, // 计算属性 computed: { fullName: { // 当ful1Name被读取时,get就会被调用,且返回值就作为fullName的值,而且get有个缓存效果 // 这里的get在初次读取fullName时会被调用,在所依赖的数据进行改变时也会调用 // 这里所依赖的数据有俩分别是firstName和lastName get() { return this.firstName +"-" +this.lastName }, // 当fullName被修改时调用 set(value){ console.log('set被hi行'); const arr = value. split('-'); this.firstName = arr[0]; this.lastName = arr[1]; } } } }) </script></body>

简写计算属性(前提是只用到get的时候可以简写)

4.侦听属性

监视属性watch: 1.当被监视的属性变化时,回调函数自动调用,进行相关操作 2.监视的属性必须存在,I才能进行监视! ! 3.监视的两种写法: (1) . new Vue时传入watch配置 (2) .通过vm. $watch监视

<body> <div class="user"> <h1>今天我很{{info}}</h1> <button @click='changeMood'>点击切换心情</button> </div> <script> new Vue({ el: '.user', data: { mood: true }, computed: { info() { return this.mood ? '开心' : '不开心' }, }, methods: { changeMood() { this.mood = !this.mood } }, watch: { // 被监视的是谁 mood: { immediate: true,// 初始化时 让handler调用一次 // handler有俩参数分别是修改前的值和修改后的值 handler(newValue, oldValue) { console.log('mood被修改了', newValue, oldValue); } }, // 这个监视属性也可以监视计算属性 info: { immediate: true,// 初识化时 让handler调用一次 // handler有俩参数分别是修改前的值和修改后的值 handler(newValue, oldValue) { console.log('info被修改了', newValue, oldValue); } }, } }) // 也可以用vm.$watch进行监视 =》vm.$watch(监视对象,如何监视) vm.$watch('mood', { immediate: true,// 初识化时 让handler调用一次 // handler有俩参数分别是修改前的值和修改后的值 handler(newValue, oldValue) { console.log('info被修改了', newValue, oldValue); } }) </script></body>4.1深度监视

深度监视 ①Vue中的watch默认不监测对象内部值的改变 ②配置deep:true可以监测对象内部值改变 备注: ①Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以 ②使用watch时根据数据的具体结构,决定是否采用深度监视

4.2监视属性简写

简写(但是不能配置immediate:true,deep:true)

watch: { // 完整写法 // mood: { // deep:true // handler(newValue, oldValue) { // console.log("mood被修改", newValue, oldValue); // } // } // 简写 mood(newValue, oldValue) { console.log('mood被修改', newValue, oldValue); } } }) // 正常写法 vm.$watch('mood',{ immediate:true, deep:true, handler(newValue, oldValue) { console.log('mood被修改', newValue, oldValue); } }) // 简写 vm.$watch('mood',function(newValue, oldValue){ console.log('mood被修改', newValue, oldValue); })4.3computed & watch之间的区别

1.computed能完成的功能,watch 都可以完成。 2.watch能完成的功能,computed不一定能完成,例如: watch可以进行异步操作。 3.两个重要的小原则: ①所被Vue管理的函数,最好写成普通函数,这样this的指向才是vm或组件实例对象。 ②所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等),最好写成箭头函数,这样this的指向才是vm或组件实例对象。

5.写在最后

大家好我是大熊🐻 一个学前端的旅行者也是一个前进的创作者,奋进再这篇土地,希望能和您相遇 ✍善于利用零星时间的人,才会做出更大的成绩来。——华罗庚

本文链接地址:https://www.jiuchutong.com/zhishi/299277.html 转载请保留说明!

上一篇:Vue 3 介绍

下一篇:Vue实现登录功能全套详解(含封装axios)(vue实现登陆)

  • 头条发布视频审核要多久(头条发布视频审核时间太长意味着什么)

    头条发布视频审核要多久(头条发布视频审核时间太长意味着什么)

  • nova7有nfc功能吗(nove7有nfc功能吗)

    nova7有nfc功能吗(nove7有nfc功能吗)

  • rtx2070是什么级别显卡

    rtx2070是什么级别显卡

  • 豆瓣怎么查找浏览记录(豆瓣怎么查找浏览者)

    豆瓣怎么查找浏览记录(豆瓣怎么查找浏览者)

  • 怎么复制抖音视频的链接(怎么复制抖音视频发给微信好友)

    怎么复制抖音视频的链接(怎么复制抖音视频发给微信好友)

  • 开启勿扰模式别人能不能打电话进来(开启勿扰模式别人能打微信电话吗)

    开启勿扰模式别人能不能打电话进来(开启勿扰模式别人能打微信电话吗)

  • nova4外屏可以单独换吗(nova4e外屏可以单独换吗)

    nova4外屏可以单独换吗(nova4e外屏可以单独换吗)

  • 微信号登录不上怎么办(微信号登录不上钱包有钱怎么办)

    微信号登录不上怎么办(微信号登录不上钱包有钱怎么办)

  • vivo发现高危病毒系统禁止安装怎么办(vivox9发现高危病毒无法安装)

    vivo发现高危病毒系统禁止安装怎么办(vivox9发现高危病毒无法安装)

  • 苹果副卡收不到短信(苹果副卡收不到短信验证码)

    苹果副卡收不到短信(苹果副卡收不到短信验证码)

  • 为什么打开短信以后信息就直接退出(为什么打开短信之后是空白)

    为什么打开短信以后信息就直接退出(为什么打开短信之后是空白)

  • 数据分析的主要目的是什么(数据分析的主要作用)

    数据分析的主要目的是什么(数据分析的主要作用)

  • b站手机怎么看私信(b站手机怎么看完整弹幕列表)

    b站手机怎么看私信(b站手机怎么看完整弹幕列表)

  • 怎么卸载ipad上的软件(怎么卸载ipad上的软件保留数据)

    怎么卸载ipad上的软件(怎么卸载ipad上的软件保留数据)

  • flv文件用什么播放器打开(flv文件用什么播放器打开 手机)

    flv文件用什么播放器打开(flv文件用什么播放器打开 手机)

  • 华为手机碎片整理怎么打开(华为手机碎片整理app)

    华为手机碎片整理怎么打开(华为手机碎片整理app)

  • 拼多多到底是怎么拼的(拼多多到底是怎样一种存在)

    拼多多到底是怎么拼的(拼多多到底是怎样一种存在)

  • 怎么将pr视频导出(怎么将pr视频导出到桌面)

    怎么将pr视频导出(怎么将pr视频导出到桌面)

  • 充电宝的开关有啥用(充电宝开关有什么用途和作用)

    充电宝的开关有啥用(充电宝开关有什么用途和作用)

  • pr视频剪辑吃显卡吗(pr视频剪辑吃显卡还是cpu)

    pr视频剪辑吃显卡吗(pr视频剪辑吃显卡还是cpu)

  • ipad耳机孔进水了怎么办(iPad耳机孔进水了)

    ipad耳机孔进水了怎么办(iPad耳机孔进水了)

  • 联通hd怎么开(中国联通hd怎么开)

    联通hd怎么开(中国联通hd怎么开)

  • 一个手机号2个微信怎么弄(一个手机号2个微信会封号吗)

    一个手机号2个微信怎么弄(一个手机号2个微信会封号吗)

  • 为什么搜不到蓝牙耳机(为什么搜不到蓝牙鼠标设备)

    为什么搜不到蓝牙耳机(为什么搜不到蓝牙鼠标设备)

  • Win10 20H2 KB5001391补丁包更新内容汇总

    Win10 20H2 KB5001391补丁包更新内容汇总

  • manpath命令  查看man手册页的查询路径(man-s命令)

    manpath命令 查看man手册页的查询路径(man-s命令)

  • 含税价怎么算不含税价
  • 个体工商户生产经营所得税税率表2021
  • 计提坏账准备怎么理解
  • 减免税控盘增值税纳税申报
  • 主表第17栏应该等于定期
  • 外资企业的分支机构向总机构支付的管理费如何办理税前列支申请
  • 在建工程转固定资产账务处理
  • 个人劳务费增值税如何缴纳
  • 收到货款开的增值税发票怎么写分录
  • 不动产在建工程使用的外购物资可以抵扣吗
  • 应收账款计提坏账后收回
  • 工程发票开多了怎么办
  • 一般户可以结算货款吗
  • 小微企业季度超过45万如何填申报表
  • 企业如何申请定增资金
  • 如何区分餐费发票和停车费发票?
  • 小微企业怎么合法避税
  • 没有发票的房租调增金额怎算
  • 对方开具红字发票过来怎么做进项税转出
  • 收到雇主责任险发票计入什么科目
  • 个人交社保可以交生育险吗
  • 银行对公账户网上注销流程需要多久
  • 支付给法律顾问的钱
  • win11壁纸设置
  • 电脑网页密码不正确
  • microsoft edge怎么改成ie11
  • 城镇土地使用税征收范围
  • 会计核算的一般对象
  • php嵌入js
  • nginx不支持ipv6
  • 事业单位投资收回账务处理
  • 如何将iphone照片导入电脑里
  • 土地投资入股是否缴纳土地增值税12366
  • 市面最高版本
  • 笔记本电脑盖上盖子就关机了吗
  • 资源税纳税申报流程
  • 不能抵扣的发票可以做成本吗
  • 拆迁以后
  • 企业废品处理管理办法
  • elipse左侧菜单栏显示
  • 机器学习中的数据预处理方法与步骤
  • three.js如何给模型锚点
  • 体验了一回
  • uniapp h5路由模式
  • php读取php文件内容
  • php PATH_SEPARATOR判断当前服务器系统类型实例
  • 前期认证相符且不符合
  • 织梦怎么样
  • mysql中事务的作用
  • 公司购入的发明产品
  • 企业取得交易性金融资产的主要目的是
  • 显示应退税额就是能退是吗
  • 企业用支付宝
  • 存货周转次数越高好还是越低好
  • 一般纳税人的服务费税率是多少
  • 发票备注栏填写内容
  • 收付实现制和权责发生制的主要区别是确认
  • 固定资产清理和持有待售资产
  • SQLServer Execpt和not in 性能区别
  • centos 安装
  • solaris修改时间
  • ubuntu20.10
  • 一键u盘安装系统
  • 奇兔刷机可以救砖吗
  • 使用无线网络上网电脑的IP地址会改变吗
  • mac笔记本如何设置不黑屏
  • 安装与配置linux操作系统
  • 有nodejs就不需要用java了么
  • jquery简单例子
  • jquery图片自动滚动
  • shell脚本怎么写循环
  • android sdk location should not contain
  • 那些so 叼的android studio 插件
  • 国家电子税务局登录入口
  • 医疗费发票查询
  • 国家关于农村土地流转政策
  • 增值税进项税额抵扣凭证
  • 小规模纳税人土地税减免政策
  • 洛阳市房屋契税新政策
  • 个人所得税app密码给别人有风险吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设