前端学习案例-vue2源码解析2-数据劫持

简介: 前端学习案例-vue2源码解析2-数据劫持

index.js

import { initState } from "./init";
//传入对象参数
function Vue(options) {
  //传入options
  console.log(this, "this");
  this._init(options);
}
//初始化
Vue.prototype._init = function (options) {
  //报错实例
  var vm = this;
  vm.$options = options;
  //处理状态
  initState(vm);
};
export default Vue;

init.js

import proxyData from "./proxy"
function initState(vm){
  console.log(vm)
  var options=vm.$options;
  if(options.data){
    initData(vm)
  }
}
function initData(vm){
    //获取data数据
    var data=vm.$options.data
    //访问data
    data=vm._data=typeof data==="function"?data.call(vm):data||{}
    //遍历值
    for(var key in data){
        proxyData(vm,'_data',key)
    }
}
export {
    initState
}

proxy.js

function proxyData(vm,target,key){
    Object.defineProperty(vm,key,{
        get(){
            console.log(vm[target][key],"列表数据")
            return vm[target][key]
        },
        Set(newValue){
            vm[target][key]=newValue
        }
    })
}
export default proxyData
相关文章
|
4天前
|
缓存 安全 JavaScript
前端安全:Vue应用中防范XSS和CSRF攻击
【4月更文挑战第23天】本文探讨了在Vue应用中防范XSS和CSRF攻击的重要性。XSS攻击通过注入恶意脚本威胁用户数据,而CSRF则利用用户身份发起非授权请求。防范措施包括:对输入内容转义、使用CSP、选择安全的库;采用Anti-CSRF令牌、同源策略和POST请求对抗CSRF;并实施代码审查、更新依赖及教育团队成员。通过这些实践,可提升Vue应用的安全性,抵御潜在攻击。
|
4天前
并发编程之读写锁ReadWriteLock的详细解析(带小案例)
并发编程之读写锁ReadWriteLock的详细解析(带小案例)
7 0
|
1天前
|
前端开发 JavaScript 应用服务中间件
前端vue2、vue3去掉url路由“ # ”号——nginx配置(二)
前端vue2、vue3去掉url路由“ # ”号——nginx配置
16 0
|
2天前
|
XML 人工智能 Java
Spring Bean名称生成规则(含源码解析、自定义Spring Bean名称方式)
Spring Bean名称生成规则(含源码解析、自定义Spring Bean名称方式)
|
4天前
并发编程之Callable方法的详细解析(带小案例)
并发编程之Callable方法的详细解析(带小案例)
11 0
|
4天前
|
JSON Java Maven
Javaweb之SpringBootWeb案例之自动配置以及常见方案的详细解析
Javaweb之SpringBootWeb案例之自动配置以及常见方案的详细解析
7 0
Javaweb之SpringBootWeb案例之自动配置以及常见方案的详细解析
|
4天前
|
JSON Java Maven
Javaweb之SpringBootWeb案例之 SpringBoot原理的详细解析
Javaweb之SpringBootWeb案例之 SpringBoot原理的详细解析
8 0
Javaweb之SpringBootWeb案例之 SpringBoot原理的详细解析
|
4天前
|
Java 容器 Spring
Javaweb之SpringBootWeb案例之 Bean管理的Bean作用域详细的解析
Javaweb之SpringBootWeb案例之 Bean管理的Bean作用域详细的解析
12 0
|
4天前
|
Java 数据库
Javaweb之SpringBootWeb案例之AOP案例的详细解析
Javaweb之SpringBootWeb案例之AOP案例的详细解析
11 0
|
4天前
|
Java Spring
Javaweb之SpringBootWeb案例之事务进阶的详细解析
Javaweb之SpringBootWeb案例之事务进阶的详细解析
11 0

推荐镜像

更多