前端学习日记-手写Vue源码-响应式部分

最新推荐文章于 2023-03-18 23:55:18 发布

原味的你

最新推荐文章于 2023-03-18 23:55:18 发布

阅读量149

点赞数

文章标签： vue js 源码

本文链接：https://blog.csdn.net/weixin_43005178/article/details/110202334

版权

前端学习日记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue工作机制

在new Vue()后，vue会调用进行初始化，初始化生命周期、事件、props、methods、watch等，最重要的过程即是通过Object.defineProperty来设置setter和getter，实现响应式和依赖收集。

核心流程见下图

在这里插入图片描述

首先创建tvue.js，并实现基本构造函数

class TVue{
	constructor(options){
		this.$options = options;//缓存options
		this.$data = options.data;//数据响应化
	}

这里入options参数，首先我们要对options参数做一个缓存，以及对options中的data属性也做一个缓存，放到this里面
这时我们需要一个函数对具体属性一个一个进行遍历，定义一个观察监听函数->observe()，他接收一个data属性

	constructor(options){
		this.$options = options;//缓存options
		this.$data = options.data;//数据响应化
		this.observe(this.$data);
	}

一进来就先判断把有问题的属性（非对象的属性）都过滤掉

	observe(value){
		if(!value || typeof value !=='object'){
			return ;
		}
		//遍历该对象
		Object.keys(value).forEach(key=>{
			this.defineReactive(value,key,value[key])
		})
	}

取出value也就是$data中的key值，并进行循环遍历，实现数据响应化，这里重复调用this.observe()，也就是递归，目的是遍历复杂的对象

	//数据响应化
	defineReactive(obj,key,val){

		this.observe(val); //递归解决数据嵌套

		Object.defineProperty(obj,key,{
			get(){
				return val;
			},
			set(newVal){
				if(newVal === val){
					return ;
				}
				val = newVal;
				console.log(`${key}属性更新了：${val}`)
			}
		})
	}

在拿到每个属性后，通过Object.defineProperty()来对每个属性定义其get、set方法，如果前后值相同直接return;掉不做操作，如果有就打印出来更新的值

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="tvue.js"></script>
	<script>
		const app = new TVue({
			data:{
				test:'I am test'
			}
		});
		app.$data.test = "hello i am new val"
	</script>
</body>
</html>

最终测试一下响应式的效果

在这里插入图片描述
这样就i实现出了最简单版的vue框架

原味的你

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端学习日记-手写Vue源码-响应式部分

Vue工作机制在new Vue()后，vue会调用进行初始化，初始化生命周期、事件、props、methods、watch等，最重要的过程即是通过Object.defineProperty来设置setter和getter，实现响应式和依赖收集。核心流程见下图首先创建tvue.js，并实现基本构造函数class TVue{ constructor(options){ this.$options = options;//缓存options this.$data = options.dat
复制链接

扫一扫