Vue|Vue2的核心原理剖析 javascript|前端|vue.js

? 用了这么久的Vue2了你真的知其然，知其所以然么？

? 今天博主就为大家带来一篇对 V u e 核心功能的部分剖析 \textcolor{pink}{今天博主就为大家带来一篇对Vue核心功能的部分剖析} 今天博主就为大家带来一篇对Vue核心功能的部分剖析

? 后续文章会用更多小案例来帮助大家理解 V u e 的原理 \textcolor{green}{后续文章会用更多小案例来帮助大家理解Vue的原理} 后续文章会用更多小案例来帮助大家理解Vue的原理

前言：

相信大家阅读过很多关于Vue2的文章，我也阅读过很多，但是大部分文章介绍的都是如何在项目中进行应用，技术点如果使用，功能如何实现；
今天小编为大家带来这篇Vue2的核心原理剖析就是为大家介绍我们常用的Vue2他是如何实现的核心内容，我们简单代码的背后究竟他做了哪些，让大家能够知其然，知其所以然

【Vue|Vue2的核心原理剖析】学习目标：

了解Object.defineProperty原理
了解set、get关联使用
了解数据反应到识图的过程
了解视图更换如何影响数据
掌握MVVM

Object.defineProperty

> // 1. 字面量定义 let data = https://www.it610.com/article/{ name:'aa' } data.name = 'bb' // 这种情况下我们并不能知道name属性发生了变化// 2. Object.defineProperty let data1 = {} Object.defineProperty(data1, 'name', { // 当我们访问data1的name属性的时候自动调用的方法 // 并且get函数的返回值就是你拿到的值 get() { console.log('你访问了data1的name属性') return 'aa' }, // 当我们设置修改name属性的时候自动调用的函数 // 并且属性最新的值会被当成实参传入进来 set(newValue) { console.log('你修改了data1的name属性最新的值为', newValue) // 这个位置只要你修改了name属性就会得到执行 // 所以如果你想要在name变化的时候完成一些自己的事情 // 都可以放到这里来执行 // 1. ajax() // 2. 操作一块dom区域 } }) // 以上是js中对象定义的另外一种方案，可以在访问属性和设置属性的时候自动调用对应的函数 // 访问属性：data.namedata['name'] // 设置属性：data.name = 'bb'data['name'] = 'bb'

响应式的核心API

get、set

> // let data = https://www.it610.com/article/{ //name:'aa' // } let data = https://www.it610.com/article/{} let _name ='aa' Object.defineProperty(data, 'name', { get() { console.log('你访问了data1的name属性') return _name },set(newValue) { console.log('你修改了data1的name属性最新的值为', newValue) _name = newValue } }) // 问题产生的原因：get中直接返回了一个固定的值,并且set函数中新值拿到了但是没有做任何事情 // 解决方案：通过声明一个中间变量,让get函数中return出去这个变量 // 并且在set函数中把最新的值设置到这个中间变量身上,起到一个set和get操作的一个 // 数据的效果

数据反应到视图数据的变化可以引起视图的变化(通过操作dom把数据放到对应的位置上去如果数据变化之后就用数据最新的值再重新放一次)
方案一:命令式操作

document.querySelector(’#app’).innerText = data.name
set函数中重新执行一下document.querySelector(’#app’).innerText = data.name

方案二:声明式渲染
v-text指令的实现

核心逻辑：通过‘模板编译’找到标记了v-text的元素,然后把对应的数据通过操作domapi放上去

1.通过app根元素找到所有的子节点（元素节点，文本节点…） -> dom.nodeChilds
2.通过节点类型筛选出元素节点（p） -> nodeType 1元素节点 3文本节点
3.通过v-text找到需要设置的具体的节点

4.找到绑定了v-text标记的元素拿到它身上所有的属性 id class v-text=“name”
5.通过v-text=“name” 拿到指令类型 ‘v-text’ 拿到需要绑定的数据的属性名 ‘name’
6.判断当前是v-text指令然后通过操作domapi 把name属性对应的值放上去 node.innerText = data[name]
以上整个过程可以称作‘模板编译’
视图的变化反映到数据

input元素 v-model双向绑定 M -> V V -> M

M -> V
1.通过app根元素找到所有的子节点（元素节点，文本节点…） -> dom.nodeChilds
2.通过节点类型筛选出元素节点（p） -> nodeType 1元素节点 3文本节点
3.通过v-text找到需要设置的具体的节点

4.找到绑定了v-text标记的元素拿到它身上所有的属性 id class v-text=“name”
5.通过v-model=“name” 拿到指令类型 ‘v-model’ 拿到需要绑定的数据的属性名 ‘name’
6.判断当前是v-model指令然后通过操作domapi 把name属性对应的值放上去 node.value = https://www.it610.com/article/data[name]
v-model和v-text除了指令类型不一致，使用的dom api不一致其它的步骤是完全一致的
V -> M
本质：事件监听在回调函数中拿到input中输入的最新的值然后赋值给绑定的属性

node.addEventListener('input',(e)=>{ data[name] = e.target.value })

以上总结：
1.数据的响应式
2.数据变化影响视图
3.视图变化影响数据
4.指令是如何实现的(常规实现逻辑)
优化工作：
1.通用的数据响应式处理

data(){ return { name:'cp', age:28 } }

基于现成的数据,然后都处理成响应式

Object.keys(data) // 由所有的对象的key组成的数组 Object.keys(data).forEach(key=>{ // key 属性名 // data[key]属性值 // data 原对象 // 将所有的key都转成get和set的形式 defineReactive(data,key,data[key]) }) function defineReactive(data,key,value){ Oject.defineProperty(data, key, { get(){ return value }, set(newValue){ value = https://www.it610.com/article/newValue } }) }

2.发布订阅模式
问题：