位置: IT常识 - 正文

Vue2响应式原理(vue2响应式原理面试回答)

编辑:rootadmin
🍀vue2响应式原理 vue的特性:数据驱动视图和双向数据绑定。vue官方文档也提供了响应式原理的解释: 深入响应式原理 Object.defineProperty() Object.defineProperty()的作用是直接在一个对象上定义一个新属性,或者修改一个属性 使用方式:Object. ... ?vue2响应式原理

推荐整理分享Vue2响应式原理(vue2响应式原理面试回答),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue2响应式原理循环便利源码,vue2响应式原理和vue3的区别,vue2响应式原理循环便利源码,vue2响应式原理源码,vue2响应式原理代码实现,vue2响应式原理和vue3的区别,vue2响应式原理缺点,vue2响应式原理缺点,内容如对您有帮助,希望把文章链接给更多的朋友!

vue的特性:数据驱动视图和双向数据绑定。vue官方文档也提供了响应式原理的解释:

深入响应式原理

Object.defineProperty()

Object.defineProperty()的作用是直接在一个对象上定义一个新属性,或者修改一个属性

使用方式:Object.defineProperty(对象名,属性名,配置项)

<script>let person = {name: '张三',sex: '男',}Object.defineProperty(person,'age',{value: 18}) //不能参与遍历</script>

上述写法是给person对象添加一个age属性,属性的值是18

但是这种写法:

不能进行枚举,即无法在遍历的时候获取到age属性的值不能被修改不能删除

所以Object.defineProperty()还有其他配置项

Object.defineProperty(person,'age',{ value: 18 enumerable: true //控制属性是否可以枚举,get="_blank">默认值是false writeable: true //控制属性是否可以被修改,默认值是false configurable: true //控制属性是否可以被删除,默认值是false})

现在有一个需求:定义一个新的变量number,当number的值修改后,person中age的值也相应被修改;而person中age的值被修改后,number的值也相应被修改。

这个时候需要借助新的配置项get和set

<script>let number = 18let person = {name: '张三',sex: '男',}//能够实现number的值修改后,person中age的值也相应被修改 Object.defineProperty(person,'age',{ //当有人读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值 get:function(){ return number }, //当有人修改person的age属性时,set函数(setter)就会被调用,且接收到修改的具体值 set(value){ number = value } })</script>数据代理

数据代理就是通过一个对象代理另一个对象中属性的操作

vue就是通过vm对象来代理data对象中属性的操作

<body> <div id="app"> <h2>姓名:{{name}}</h2> <h2>年龄:{{age}}</h2> </div></body><script> const vm = new Vue({ el: '#app', data: { name: '张三', age: 18 } })</script>

控制台输出vm,我们可以看到name和age这两个属性

这两个属性都是通过Object.defineProperty()添加到vm上,所以可以发现他们都有对应的getter/setter

也就是说:当读取vm中的name时,会调用getter,把data.name给name;当修改vm中的name时,会调用setter,修改data.name中的值(这里跟第一个例子是同一个道理)

但是我们会发现vm上没有data(疑惑:明明在创建vue实例对象的时候,设置了data,为什么取不到)

Vue2响应式原理(vue2响应式原理面试回答)

其实我们以为的这个data其实是_data,可以验证一下:

let data = { name: '张三', age: 18}const vm = new Vue({ el: '#app', data})

控制台进行一下判断:

所以我们获取数据的时候,也可以通过vm._data.age来获取

vue为了编码更方便,进行了数据代理,遍历data中的所有属性,把每个属性都添加到vm中,指定getter/setter。

所以可以直接通过vm.age来获取数据

基本原理:

通过Object.defineProperty()把data对象中所有属性添加到vm上为每一个添加vm上的属性,都指定一个getter/setter在getter/setter内部去操作(读/写)data中对应的属性实现双向绑定

双向绑定就是数据发生变化时,视图也跟着变。核心是数据劫持和发布者-订阅者模式

数据劫持实质就是使用defineProperty重写getter/setter。当数据改变时,set就会劫持这个数据的变化,更新视图(view)

但是由于defineProperty无法检测到对象和数组内部的变化,所以遇到属性为对象时,会递归观察该属性;遇到数组时,会重写push、pop、shift等方法。

监测对象中的数据

最开始会想认为利用getter/setter,但是这样会造成死循环。只要有人获取name的值,就会调用get,然后又会获取一次person.name,造成死循环。set同理。

//错误的代码!!!!!!!!!let person = { name: '张三',}Object.defineProperty(person, 'name', { get: function() { return person.name }, set(value) { person.age = name }})

正确的做法是:监听数据的每一个属性,当监听到属性值发生变化时,通知订阅者去更新视图,重新进行模板解析。

<script> let data = { name: '张三', } //创建一个观察者实例对象,用于监视data中属性的变化 const obs = new Observer(data) //准备一个vm实例对象 let vm = {} vm._data = data = obs function Observer(obj) { //汇总对象中所有的属性形成一个数组 const keys = Object.keys(obj) //遍历 keys.forEach((k) => { Object.defineProperty(this, k, { get() { return obj[k] }, set(val) { obj[k] = val } }) }) }</script>

上述代码只是一个例子,只会对一层对象进行处理,vue的操作是递归,直到数据类型是简单数据类型。

如需给后添加的属性做响应式,可以使用

Vue.set(object,propertyName,value)或vm.$set(object,propertyName,value)data: {student:{name: '张三',age: 18,friends:[{name:'小明',age:20},{name:'李四',age:15}]}}Vue.set(this.student, 'sex', '男')this.$set(this.student, 'sex', '男')监测数组中的数据

这里可以去看一下vue的官方文档:

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

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

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

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

使用API:push(),pop(),shift(),splice(),sort(),reverse()等Vue.set(),vm.$set()
本文链接地址:https://www.jiuchutong.com/zhishi/313020.html 转载请保留说明!

上一篇:Dedecms标签Tag长度使用Titlelen属性控制(aspcms标签)

下一篇:phpcms图片不存在的解决办法(图片加载不存在)

  • 收到投资款要交企业所得税吗为什么
  • 增值税普通发票有什么用
  • 浙江注册税务师考试时间
  • 三方代付协议有效吗
  • 发票遗失如何入账
  • 企业增资的分录怎么写
  • 房地产企业开发间接费用包括哪些
  • 固定资产加速折旧税收优惠政策
  • 外资企业变内资流程
  • 原材料预付款如何做账
  • 已认证未抵扣什么意思
  • 销售商品的成本计入什么科目
  • 股东退股分红怎么拿回
  • 诉讼财产保全保险费能否主张
  • 公司牌车还款从哪里扣款
  • 劳务公司购买材料怎么做账
  • 进项税和销项税怎么区分
  • 销售新的固定资产怎么算
  • 机票的抵扣率是多少
  • 收到发票后怎么处理
  • 税控系统维护费280会计分录
  • 向股东分配股利会影响所有者权益吗
  • 工会上缴40%的经费法律依据
  • win11压缩文件
  • 电脑右下角弹窗广告怎么彻底清除
  • 微信打开链接无法滑动
  • 文件夹怎么发送不了
  • 损益类科目在期末均需转入什么科目
  • 网络公司的财务主要做什么
  • 实例简介php的一般过程
  • 清理macbook清除系统垃圾
  • 按揭贷款到账时间
  • 厂房修缮
  • 小规模纳税人按季度申报
  • php制作验证码
  • 房地产预缴所得税怎么算
  • 发放职工薪酬账务怎么做
  • element - - - - - 你不知道的loading使用方式
  • “oracle”
  • 面试官问:mysql 的自增 id 用完了,怎么办?
  • 城市维护税暂行条例
  • python装饰器如何保留原函数信息
  • 银行本票怎么办理转账
  • json 处理
  • 发票开具内容与实际经营范围不符是否合适呢?
  • DB2 9(Viper)快速入门
  • 征税小规模纳税申报
  • mysql子查询关键字
  • 2021个税新规工资表公式
  • 返利冲减销售收入还是进费用
  • 资产减值损失是什么意思
  • 付款申请单如何生成凭证
  • 海关进口代理公司名称
  • 错误凭证如何处理
  • 合同取得成本包括什么
  • 个人独资企业核定征收取消了吗
  • win8系统如何查看电脑型号
  • xp系统奇怪
  • linux 图形
  • Win10 Mobile RS2预览版14926升级错误代码800703ed的解决方法
  • 程序中map是什么意思
  • win7系统无线网络
  • windows7basic怎么改
  • ubuntu怎么安装程序
  • Win10预览版桌面图标和任务栏不翼而飞怎么办?
  • 铁嘴啥意思
  • Unity3D游戏开发(第2版)pdf
  • jquery图片轮播无缝连接
  • node js并发加载缓慢
  • 爬虫爬取微博
  • unity ui
  • js class实现原理
  • jquery控制css样式
  • jquery创建map集合
  • 税控盘登录密码忘了怎么办怎么重置
  • 安徽残疾人补助过年有多少钱
  • 企业所得税申报表怎么填写
  • 企业租赁房屋需要预缴增值税吗
  • 销售折让怎么开票
  • 工程增值税率从11%调整到9%
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设