Vue中的数据代理与数据劫持
创始人
2024-03-20 14:22:07

数据代理

  1. 数据代理字面上是通过一个对象代理对另一个对象属性的操作
  2. 在vue中的数据代理，实际上是通过vm上的属性代理对_data中属性的操作
    在这里插入图片描述

数据劫持

  1. 数据劫持也可称作数据代理，字面上是劫持到某个属性的变化，去做其他的操作
  2. 在vue中的数据劫持，实际上是劫持到vm上属性的变化，去重新解析模板，更新页面，实现响应式效果
    在这里插入图片描述

注意事项

  1. 可以理解为，属性有对应的setter、getter方法，就可以通过直接赋值的方式实现页面响应式

  2. 但是数组上没有setter、getter方法，需要通过push、pop、shift、unshift、sort、reverse、splice方法实现响应式，因为vue对这些能改变原数组的方法做了一些重新解析模板的操作
    在这里插入图片描述

  3. 如果需要给vm上手动新增一个属性，需要使用Vue.set(target, key, value);或vm.$set(target, key, value);，通过这样的方式添加属性，会自动生成setter、getter

    // 写一个方法给person中添加age属性
const vm = new Vue({el: '#root',data: function () {return {person: {name: 'wuwu'}}},methods: {addAttr() {Vue.set(this.person, 'age', 18);// or// this.$set(this.person, 'age', 18);}}
});

  4. 通过Vue.set()、vm.$set()的方式不能在vm的根上添加属性，否则会报错！！！

上一篇：双十一服装促销广告语大全 服装促销广告语录音样板 双十一服装促销广告语

下一篇：淘宝双十一促销宣传广告语 淘宝双十一活动宣传语 建材双十一促销广告语

相关内容

热门资讯

农畜特产品加工专业就业前景,就... 农畜特产品加工专业就业方向与就业前景分析农畜产品加工业迈上产业化的阶梯，就要加快技术改造和新产品开发...
食品检测及管理专业就业前景,就... 食品检测及管理专业就业方向与就业前景分析食品检测及管理专业培养拥护党的基本路线，适应生产、建设、管理...
酿酒技术专业就业前景,就业方向... 酿酒技术专业就业方向与就业前景分析酿酒技术专业是以化学、生物学和工程学为基础，研究现代优质葡萄酒酿造...
粮油储藏与检测技术专业就业前景... 粮油储藏与检测技术专业就业方向与就业前景分析粮油储藏与检测技术专业主要培养具备粮油保管、仓库害虫防治...
河北民族师范学院录取通知书快递... 河北民族师范学院坐落在闻名中外的世界历史文化名城--承德市，其前身是始建于1907年经光绪皇帝御批设...