当前位置：首页 > news >正文

猿创征文 |《深入浅出Vue.js》打卡Day1

news 来源：原创 2024/4/29 12:36:37

第一章 Vue.js简介

1、什么是Vue.js

Vue.js，通常简称Vue，是一款友好，多用途且高性能的JavaScript框架，能够帮助我们创建可维护性和可测试性更强的代码。
它是一款渐近式的JavaScript框架。渐进式就是如果你有一个现成的服务端应用，也就是非单页应用，可以将Vue.js作为该应用的一部分嵌入其中，带来更加丰富的交互体验。

2、Vue.js简史

2013年7月28日，尤雨溪，英文名叫Evan You，在Github上第一次为Vue.js提交代码，当时还不叫Vue.js，仓库中看出，这时的名字叫做Element，后来被更名为Seed.js；

2013年12月7日，尤雨溪在Github上发布了新版本0.6.6，将项目正式改名为Vue.js，并且把默认的指令前缀变成了 v- 。这一版本，代表Vue.js正式问世；

2014年2月1日，尤雨溪将Vue.js 0.8 发布在了国外的Hacker News网站，这代表它首次公开发布。

2015年10月26日，Vue.js终于迎来了1.0.0版本的发布；

2016年10月1日，祖国的生日，同时也是Vue.js 2.0发布的日子;
Vue.js 2.0 引入了非常多的特性，其中一个明显的效果是Vue.js变得更轻，更快了，引入了虚拟DOM，支持JSX和TypeScript，支持流失服务端渲染，支持跨平台的能力等。

第二章 Object的变化侦测

1、什么是变化侦测

Vue.js 会自动通过状态生成DOM，并将其输出到页面上显示出来，这个过程叫做渲染。通常，在运行时应用内部的状态会不断发生变化，此时需要不停地重新渲染。这时如何确定状态中发生了什么变化？

变化侦测就是用来解决这个问题的，它分为两种类型：

“推”push
Vue.js的变化侦测属于“推”，当状态发送变化时，Vue.js立刻就知道，而且在一定程度上直到哪些状态变了。因此它知道的信息更多，也就可以进行更细粒度的更新。这样也有一定的代价，因为粒度越细，每个状态所绑定的依赖就越多，依赖追踪在内存上的开销就会越大。因此，从Vue.js 2.0 开始，它引入了虚拟DOM，将粒度调整为中等粒度，即一个状态所绑定的依赖不再是具体的DOM节点，而是一个组件。这样状态变化后，会通知到组件，组件内部在使用虚拟DOM进行比对。这可大大降低依赖数量，从而降低依赖追踪所消耗的内存。
“拉”pull
Angular和React中的变化侦测都属于“拉”，就是说当状态发生变化时，他不知道哪个状态变了，只知道状态可能变了，然后就发送一个信号告诉框架，框架内部收到信号后，会进行一个暴力对比来找出哪些DOM节点需要重新渲染，这在Angular中是叫做脏检测，在React中使用的是虚拟DOM （简单说，状态变了，你不知道哪个状态变了，你就全部拉出来看，来一个一个比较看哪个状态变了，之后重新渲染）

2、变化侦测的过程

我们以
student {
	name:'小明';
	age:18;
	school:{
		sname:'XXXX';
		adress:'XXX';
	}
}
为数据案例

第一步，我们使用Object.defineProperty进行封装，转变为getter/setter的形式来追踪变化；

第二步：收集依赖，即把用到数据student中属性的地方收集起来，getter就是收集依赖；如果属性发生改变则在setter中触发依赖；比如，我们修改了name：“小红” ，setter触发依赖；

第三步：getter收集依赖，我们把这些依赖存放到Dep类中，它专门帮我们管理依赖，收集，删除或发生通知。比如，上一步修改了name，触发了setter，那么settter就会通知Dep；

第四步：属性发生变化之后，通知谁——Watcher。比如，上一步，setter已经通知Dep，但Dep只是用于存放的依赖地方，不能修改所用到依赖的地方，所以我们要通知Watcher角色，然后它再通知到使用了name这个属性的其他地方，告诉它们，name数据已经修改了，你们要更新了；

第五步：封装Observer类，将数据内所有属性（子属性）都转换为getter/setter的形式。比如，我们看到student对象里面的其中一个属性school也是一个对象，所以我们也要把这个school对象中的属性都转为getter/setter属性进行侦测。