Vue2手写源码---响应式数据的变化
响应式数据变化
数据发生变化后，我们可以监听到这个数据的变化 (每一步后面的括号是表示在那个模块进行的操作)
手写简单的响应式数据的实现（对象属性劫持、深度属性劫持、数组函数劫持）、模板转成 ast 语法树、将 ast 语法树转换成 render 函数、render 函数生成虚拟节点、根据生成的虚拟节点创造真实 DOM、实现依赖收集
响应式数据的实现
-
创建一个Vue实例 vm (index.html)
const vm = new Vue({
data() {
return {
name : 'zs',
age : 18
}
}
}) -
在 index.js 中使用 this._init 做数据的初始化，并使用 initMaxin 方法，将 vue 实例传过去 (index.js)
function Vue(options) { // options 就是用户的选项
this._init(options); //默认调用了init
}
initMixin(Vue); // 扩展了 init 方法 -
在 init.js 中，将用户的数据信息挂载到 vue 实例上，并初始化状态 (init.js)
export function initMixin(Vue) { //就是给 Vue 增加 init 方法
Vue.prototype._init = function (options) { //用于初始化操作
//vue vm.$options 就是获取用户的配置
// 将 用户的选项 挂载到 Vue 实例上
const vm = this;
vm.$options = options;
// 初始化状态
initState(vm)
}
}
-
在 state.js 中，要先获取到所有的配置，判断是否存在某一配置，然进行获取这个配置。将data放到实例上的_data 上，然后对数据进行劫持。 (state.js)
export function initState(vm) {
const opts = vm.$options; //获取所有的选项
if(opts.data) { //判断是否存在data
initData(vm);
}
}
function initData(vm) {
let data = vm.$options.data; //获取到data中的数据 data 可能是函数 也可能是对象
// 判断 data 中数据是函数还是对象
data = typeof data === 'function'? data.call(vm) : data; //data 是用户返回的对象
vm._data = data; //将返回的对象放到 _data 上
// 对数据进行劫持 vue2使用一个 api defineProperty
observe(data);
}
-
创建一个 处理 数据劫持的文件夹，在里面创建一个 index.js 文件进行数据劫持 (/observe/index.js)
-
先判断数据是否为对象（只对对象进行劫持），再判断是否被劫持过（被劫持过就不需要再被劫持），再通过类实例进行劫持。 (/observe/index.js)
// 判断是否为对象
if(typeof data !== 'object' || data == null) {
return; //不是对象，直接 return 出来
}
// 判断是否被劫持过，使用实例进行判断，被劫持过就不需要再被劫持
return new Observe(data);
-
声明一个类实例 Observe，然后再将 defineReactive 作为公共 API 导出 (/observe/index.js)
class Observe {
constructor(data) { //用户传入的数据
this.walk(data)
}
walk(data) { //循环这个 数据对象，对属性依次进行劫持
// 重新定义属性 所以 vue2 性能会比 vue3 差
Object.keys(data).forEach(key => defineReactive(data, key, data[key]))
}
}
export function defineReactive(target,key,value) { //作为公共 API 导出，target:需要重新定义的 值，key:需要重新定义的值的key值,value：需要重新定义的值的value值
observe(value); //值如果是对象的话，就再次进行劫持(避免深层次的值没有被劫持)
Object.defineProperty(target, key, {
get() { //取值时候，执行 get
console.log('get');
return value;
},
set(newValue) { //修改的时候，执行set
console.log('set');
if(value === newValue) return
value = newValue;
}
})
}
-
访问 vm.name 就相当于访问 vm._data.name（还是在 state.js 中进行代理） (state.js)
// 将vm._data 用 vm来进行代理 访问vm.name 就相当于 访问 vm._data.name
for(let key in data) {
proxy(vm, '_data', key)
}
function proxy(vm, target, key) {
Object.defineProperty(vm, key, {
get() {
return vm[target][key];
},
set(newValue) {
vm[target][key] = newValue;
}
})
}
-
对于数组的话，会遍历数组内部的所有元素，造成性能的浪费。所以要对数组的方法进行重写。数组有七个方法可以修改本身。（/observe/index.js）
Object.defineProperty(data, '__ob__', { //将 Observe 实例赋给data 对象的自定义属性上，让array.js中能拿到 Observe 中的方法。
value : this,
enumerable : false //将 __ob__ 变成不可枚举的（循环的时候就获取不到了）
})
// 判断数据是不是数组
if(Array.isArray(data)) {
// 重写数组中的方法 7个方法 可以修改数组本身
data.__proto__ = newArrayProto;
// 在对数组里面的每一项进行劫持
this.observeArray(data);
} else {
this.walk(data) //不是数组就直接进入循环，进行数据劫持
}
observeArray(data) { //循环这个数组，然后进行数据劫持
data.forEach(item => observe(item));
}
-
在 array.js 中，重写了能修改数组本身的七个方法，还要对数组新增的数据再次进行劫持.（/observe/array.js）
// 获取数组的原型
let oldArrayProto = Array.prototype;
// newArrayProto._proto = oldArrayProto
export let newArrayProto = Object.create(oldArrayProto);
let methods = [ //找到所有的变异方法
'push',
'pop',
'shift',
'unshift',
'reverse',
'sort',
'splice'
]
methods.forEach(method => {
newArrayProto[method] = function(
-
监听到数据变化后，要进行模板参数的解析
-
要先判断有没有传进 el 参数 （init.js）
// 判断是否有传入 el 参数
if(options.el) {
vm.$mount(options.el); //实现数据的挂载
}
-
编写 $mount 方法 （init.js)
Vue.prototype.$mount = function (el) {
const vm = this;
el = document.querySelector(el)
let ops = vm.$options
if(!ops.render) { //判断是否写了 render
let template; //没有render 就看看有没有模板
if(!ops.template && el) { //没有模板，但是有el
template = el.outerHTML
} else {
if (el) {
template = ops.template; //如果有el ， 则采用模板的内容
}
}
// 如果写了模板
if(template) {
const render = compileToFunction(template); //将模板编译成 render 函数
ops.render = render;
}
}
ops.render;
}
模板转化为 ast 语法树
-
compileToFunction 对模板进行编译处理（/compile/index.js)
先将模板转化为 ast 语法树 (/compile/parse.js)
-
利用正则先匹配 标签名、属性、文本内容
-
//利用正则匹配出模板
const ncname = `[a-zA-Z][\\-\\.0-9_a-zA-Z]*`
const qnameCapture = `((?:${ncname}\\:)?${ncname})`;
const startTagOpen = new RegExp(`^<${qnameCapture}`); //这里匹配的是开始标签名 <div>
const endTag = new RegExp(`^<\\/${qnameCapture}[^>]*>`); //这里匹配的是结束标签名 </div>
const attribute = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/; // 匹配属性的
const startTagClose = /^\s*(\/?)>/; //匹配开始标签的两种格式 <div> <div />
const defaultTagRE = /\{\{((?:.|\r?\n)+?)\}\}/g; // 匹配双花括号 {{}} -
然后依据这个正则开始匹配 模板中的内容，匹配到一个，就删除一个 (开始标签解析比较复杂，所以放在 parseStartTag 方法中)
-
// 存在 html 的时候
while(html) {
// 如果 textEnd 为 0，则说明是开始标签和结束标签。大于 0 就是文本的结束位置
let textEnd = html.indexOf('<');
debugger;
// 匹配开始标签
if(textEnd == 0) {
const startTagMatch = parseStartTag(); //开始标签的匹配结果
if(startTagMatch) { //解析到的开始标签
start(startTagMatch.tagName, startTagMatch.attrs)
continue;
}
// 如果不是开始标签，那就是结束标签
let endTagMatch = html.match(endTag);
if(endTagMatch) {
advance(endTagMatch[0].length);
end(endTagMatch.tagName)
continue;
}
}
// 匹配文本
if(textEnd > 0) {
let text = html.substring(0, textEnd); //截取的文本内容
if(text) { //存在文本的话
chars(text);
advance(text.length) //删除文本的部分
}
}
} -
开始的标签比较复杂，需要匹配开始的标签和标签中的属性
-
// 匹配开始标签
function parseStartTag() {
const start = html.match(startTagOpen);
if(start) {
const match = {
tagName:start[1], //标签名
attrs:[] //存放属性
}
advance(start[0].length); //匹配完开始标签后就去掉开始标签
// 如果不是 开始标签的结束，就一直匹配下去
let attr, end;
while(!(end = html.match(startTagClose)) && (attr = html.match(attribute))) { //如果没有匹配到结束标签的时候，就一直匹配下去
advance(attr[0].length); //匹配完属性后就去掉属性
match.attrs.push({name : attr[1], value : attr[3] || attr[4] || attr[5] || true}) //往 match 的 attrs 中存放属性的键值对
}
if(end) { //如果匹配到结束标签
advance(end[0].length) //直接去掉结束标签
}
return match; //返回解析完成的结果
}
return false; //不是标签
} -
拿获取到的开始标签、文本、结束标签来做处理---最终转换成一颗抽象树
-
抽象树的格式
const ELEMENT_TYPE = 1; //元素类型
const TEXT_TYPE = 3;//文本类型
const stack = []; //创建用于存放元素的栈---利用栈先进后出的特性来构建抽象语法树
let currentParent; //用于指向栈中的最后一个元素
let root;//根节点
// 转换为一颗抽象语法树
function createASTElement(tag,attrs) {
return {
tag,
type:ELEMENT_TYPE,
children:[],
attrs,
parent:null
}
} -
// 对开始 文本 结束标签做处理---最终转换成一颗抽象语法树
function start(tag, attrs) { //标签名 + 属性
let node = createASTElement(tag,attrs); //调用 createASTElement 函数，生成一个 ast 节点
if(!root) { //判断是否有根节点，没有的话就将当前节点作为根节点
root = node;
}
if(currentParent) { //如果栈中已经有最后一个元素，则当前节点的父亲就是栈中最后一个元素
node.parent = currentParent;
currentParent.children.push(node);//还需要在父节点添加children属性的值
}
stack.push(node);//将节点放入栈中
currentParent = node; //指向栈中的最后一个元素
}
function chars(text) { //文本内容直接放到当前指向的节点
text = text.replace(/\s/g,'')
text && currentParent.children.push({
type:TEXT_TYPE,
text,
parent: currentParent
})
}
function end() { //标签
stack.pop(); //弹出 栈中最后一个元素
currentParent = stack[stack.length - 1]; //更新 currentParent ， 指向最后一个元素
}
-
ast 语法树 转换成 render 方法
（/compiler/index.js)
// 2.生成 render方法 （render方法执行返回的结果就是 虚拟DOM）
let code = codegen(ast);
code = `with(this){return ${code}}`
let render = new Function(code); //根据代码生成 render 函数
return render;
```javascript
// 转化为 render
function codegen(ast) {
let children = genChildren(ast.children)
let code = `_c('${ast.tag}', ${ast.attrs.length > 0? genProps(ast.attrs) : 'null'}${ast.children.length ? `,${children}` : ''})`
return code
}
```
-
转换的规则（属性的转换、文本内容的转换） (/compiler/index.js)
// 属性的转化
function genProps(attrs) {
let str = ''
for(let i = 0; i < attrs.length; i++) {
let attr = attrs[i];
if(attr.name === 'style') { //判断属性是不是style
let obj = {};
attr.value.split(';').forEach(item => { //先利用 ； 进行分隔出成对的 key value。 再利用 ： 分隔出单个的 key 和 value
let [key, value] = item.split(':');
obj[key] = value; //将成对的 key value 写入空对象中
});
attr.value = obj; //再将 obj 对象作为 value 放进 attr 中
}
str += `${attr.name}:${JSON.stringify(attr.value)},` //拼接属性
}
return `{${str.slice(0, -1)}}`
}
// 生成元素和文本内容（普通文本内容，双花括号文本内容）
function gen(node) {
if(node.type === 1) { //元素
return codegen(node);
} else { //文本
let text = node.text
if(!defaultTagRE.test(text)) { //普通文本的话
return `_v(${JSON.stringify(text)})`
} else {
// _v(_s(name) + 'one' + _s(name))
let tokens = [];
let match;
defaultTagRE.lastIndex = 0;
let lastIndex = 0; //最后匹配的位置
while(match = defaultTagRE.exec(text)) {
let index = match.index; //双花括号内容匹配的位置
if(index > lastIndex) { //判断双花括号内容匹配的位置 看看是否中间有普通文本内容
tokens.push(JSON.stringify(text.slice(lastIndex, index))); //有就将普通文本放进 tokens 中
}
tokens.push(`_s(${match[1].trim()})`) //将花括号内容放进 tokens
lastIndex = index + match[0].length //更改最后匹配的位置
}
if(lastIndex < text.length) { //要是普通文本在 双花括号后面的话
tokens.push(JSON.stringify(text.slice(lastIndex)))
}
return `_v(${tokens.join('+')})` //将内容 return 出去
}
}
}
// 孩子的转化
function genChildren(children) {
return