vue的数据劫持代理实现

最新推荐文章于 2023-10-06 14:04:18 发布

颜军200

最新推荐文章于 2023-10-06 14:04:18 发布

阅读量259

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_66855655/article/details/127945754

版权

本文介绍了Vue中数据劫持代理的概念，通过实例展示了如何在Vue中使用`Object.defineProperty`来监听并修改组件data属性，使得可以直接通过`this.属性名`的方式访问和更新数据，而非使用微信小程序中的`this.data.属性名`形式。

摘要由CSDN通过智能技术生成

vue中的数据劫持代理指的是开发者调用或修改组件data里的某个属性时可以直接使用this.属性名，而不用写成微信小程序的写法，写成this.data.属性名来获取。

先新建一个html文件代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据劫持代理</title>
</head>
<body>
    <script src="./index.js"></script>
</body>
</html>

引入的index.js文件代码如下：

// vue的数据劫持代理
// 模拟data选项
let data = {
    username: 'curry',
    age: 33
}

// 模拟组件的实例
let _this = {
    test: "测试"
}

// 利用Object.defineProperty()  
// 这个方法接收三个参数:
// 1.属性所在的对象
// 2.属性的名字
// 3.一个描述符对象
for (let item in data) {
    // item是key  data[item]是value