vue2.x 对象劫持的原理实现
更新时间：2020年04月19日 16:47:48 作者：China
这篇文章主要介绍了vue2.x 对象劫持的原理实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
目标：手写迷你版Vue
一：使用rollup打包,打包后的代码体积更小，更适合写框架源码的打包
npm i rollup -D
二：安装babel相关的包，以及实现静态服务，设置环境变量的包
npm i @babel/core @babel/preset-env rollup-plugin-babel roullup-plugin-serve cross-env -D
三：包的相关介绍
- rollup (打包工具)
- @babel/core(用babel核心模块)
- @babel/preset-env（babel将高级语法转成低级语法）
- rollup-plugin-serve(实现静态服务)
- cross-env(设置环境变量)
- rollup-plugin-babel(桥梁)
四：根目录书写rollup.config.js
import babel from 'rollup-plugin-babel';
import serve from 'rollup-plugin-serve';
export default {
input:'./src/index.js', // 以哪个文件作为打包的入口
output:{
file:'dist/umd/vue.js', // 出口路径
name:'Vue', // 指定打包后全局变量的名字
format: 'umd', // 统一模块规范
sourcemap:true, // es6-> es5 开启源码调试 可以找到源代码的报错位置
},
plugins:[ // 使用的插件
babel({
exclude:"node_modules/**"
}),
process.env.ENV === 'development'?serve({
open:true,
openPage:'/public/index.html', // 默认打开html的路径
port:3000,
contentBase:''
}):null
]
}
配置package.josn
{
"name": "vue_souce",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build:dev": "rollup -c",
"serve": "cross-env ENV=development rollup -c -w"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.9.0",
"@babel/preset-env": "^7.9.5",
"cross-env": "^7.0.2",
"rollup": "^2.6.1",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-serve": "^1.0.1"
}
}
五：新建index.html(public/index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="/dist/umd/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
// 随便给些数据
data(){
return {
name:'张三',
age:11,
address:{
number:0,
name:'李四'
}}
},
})
vm._data.address = {a:1};
console.log(vm._data)
</script>
</body>
</html>
六：编写Vue入口：index.js
// Vue的核心代码 只是Vue的一个声明
import {initMixin} from './init';
function Vue(options){
// 进行Vue的初始化操作
this._init(options);
}
// 通过引入文件的方式 给Vue原型上添加方法
initMixin(Vue); // 给Vue原型上添加一个_init方法
export default Vue
七：编写初始化操作 init.js
import {initState} from './state'
// 在原型上添加一个init方法
export function initMixin(Vue){
// 初始化流程
Vue.prototype._init = function (options) {
// 数据的劫持
const vm = this; // vue中使用 this.$options 指代的就是用户传递的属性
vm.$options = options;
// 初始化状态
initState(vm); // 分割代码
}
}
八：初始化数据
import {observe} from './observer/index.js'
export function initState(vm){
const opts = vm.$options;
// vue的数据来源 属性 方法 数据 计算属性 watch
if(opts.props){
initProps(vm);
}
if(opts.methods){
initMethod(vm);
}
if(opts.data){
initData(vm);
}
if(opts.computed){
initComputed(vm);
}
if(opts.watch){
initWatch(vm);
}
}
function initProps(){}
function initMethod() {}
function initData(vm){
// 数据初始化工作
let data = vm.$options.data; // 用户传递的data
data = vm._data = typeof data === 'function'?data.call(vm):data;
// 对象劫持 用户改变了数据 我希望可以得到通知 =》 刷新页面
// MVVM模式 数据变化可以驱动视图变化
// Object.defineProperty () 给属性增加get方法和set方法
observe(data); // 响应式原理
}
function initComputed(){}
function initWatch(){}
九：书写核心监听功能
// 把data中的数据 都使用Object.defineProperty重新定义 es5
// Object.defineProperty 不能兼容ie8 及以下 vue2 无法兼容ie8版本
import {
isObject
} from '../util/index'
// 后续我可以知道它是不是一个已经观察了的数据 __ob__
class Observer{
constructor(value){ // 仅仅是初始化的操作
// vue如果数据的层次过多 需要递归的去解析对象中的属性，依次增加set和get方法
// 对数组监控
this.walk(value); // 对对象进行观测
}
walk(data){
let keys = Object.keys(data); // [name,age,address]
// 如果这个data 不可配置 直接return
keys.forEach((key)=>{
defineReactive(data,key,data[key]);
})
}
}
function defineReactive(data,key,value){
observe(value); // 递归实现深度检测
Object.defineProperty(data,key,{
configurable:true,
enumerable:false,
get(){ // 获取值的时候做一些操作
return value;
},
set(newValue){ // 也可以做一些操作
if(newValue === value) return;
observe(newValue); // 继续劫持用户设置的值，因为有可能用户设置的值是一个对象
value = newValue;
}
});
}
export function observe(data) {
let isObj = isObject(data);
if (!isObj) {
return
}
return new Observer(data); // 用来观测数据
}
十：编写工具类文件，存放校验对象
/**
*
* @param {*} data 当前数据是不是对象
*/
export function isObject(data) {
return typeof data === 'object' && data !== null;
}
总结：
1 创建Vue构造函数,接收所有所有参数options
2 分类初始化options,本章主要处理data，让data上的引用类型的数据通过Object.definePrototy 变成响应式的，初始化是有循序的，先初始化props 然后初始化method 然后初始化data computed watch
3 核心如下
function defineReactive(data,key,value){
observe(value); // 递归实现深度检测
Object.defineProperty(data,key,{
configurable:true,
enumerable:false,
get(){ // 获取值的时候做一些操作
return value;
},
set(newValue){ // 也可以做一些操作
if(newValue === value) return;
observe(newValue); // 继续劫持用户设置的值，因为有可能用户设置的值是一个对象
value = newValue;
}
});
}
到此这篇关于vue2.x 对象劫持的原理实现的文章就介绍到这了,更多相关vue2.x 对象劫持内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了vue.js中created方法作用及mounted和created的区别介绍，需要的朋友可以参考下2018-03-03
今天我们稍微说一下 vue3 项目中的 hooks 的使用，其实这个 hooks 呢是和 vue2 当中的 mixin 是类似的，学习过 vue2 的小伙伴一定对 mixin 一定比较熟悉，快跟随小编一起来学习学习吧2022-08-08
Vue.js 是一套构建用户界面的渐进式框架。我们可以使用简单的 API 来实现响应式的数据绑定和组合的视图组件。2017-03-03
这篇文章主要介绍了深入了解Vue3模板编译原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
这篇文章主要介绍了element日历calendar组件上月、今天、下月、日历块点击事件及模板源码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要介绍了vue使用H5的audio标签问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了解决vuex数据页面刷新后初始化操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器。下面就和小编一起来学习下面文章内容吧2021-09-09
这篇文章主要介绍的是如何用Vue做一个简单的随机点名册，主要是做个简单的点名器，不做样式,需要的朋友可以参考一下，希望对你有所帮助2021-12-12
这篇文章主要介绍了vue开发中关于axios的封装过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
最新评论