编程是常看常新的东西
Vue最大的特点是视图和数据的关联,
创建视图的函数(render,渲染函数)和数据的关联,那假如只改数据呢?
函数和数据的关联,
函数和函数用到的数据,的关联,
函数和函数运行过程中用到的数据,的关联,1需要监听数据的读取和修改(defineProperty兼容性好Vue2/Proxy监听更广Vue3),2如何知晓数据对应的函数?
函数和函数运行过程中用到的对象,的关联
函数和函数运行过程中用到的响应式数据,的关联
什么是数据响应式?
数据变化,页面重新渲染。×不准确
数据是在对象里面,就是改变了对象的一个属性,运行了render函数。√稍微准确
改变了对象,运行了某些函数。√准确
响应式数据的最终目标,是当对象本身或对象属性发生变化时,将会运行一些函数,最常见的就是render函数。
vue数据响应式设计的初衷是为了实现数据和函数的联动,当数据变化后,用到该数据的联动函数会自动重新运行。
具体在vue的开发中,数据和组件的render函数关联在一起,从而实现了数据变化自动运行render,在感官上就看到了组件的重新渲染。
除了vue自动关联的render函数,其他还有很多使用到vue响应式的场景,比如computed. watch等等,不能仅把vue的数据响应式想象成和render的关联。
以上两张图证明了对象改变,运行了某些函数。
在具体实现上,vue用到了几个核心部件:
- 0bserver
- Dep
- Watcher
- Scheduler
1、0bserver
我们先来思考,对象改变,怎么联动地运行某些函数?
ES5数据劫持,Object.defineProperty(对象,‘属性名字’,{配置})
和正常的在对象中定义属性有什么区别?可以配置属性
get
点开…打印get
假如控制台输出obj.age则直接打印get,输出17
set
此时再次调用obj.age还是输出17
如果想getter值显示在setter上,那么得这么写↓
假如写this.age=newVal
则会导致死循环,赋值→运行setter,运行setter→赋值
和Vue的关系
这个时候当我们在set里赋值,那么就会调用method方法
因此,Vue可以监听到属性的变化
这边再次回到最开始讲的
vm对象下的title↓
vm对象下的_data↓
_data对应鼠标选中区域↓
给title赋值就是给_data下title赋值
重归正题
0bserver要实现的目标非常简单,就是把一个普通的对象转换为响应式的对象(对象中每个属性包含getter和setter)。
为了实现这一点,0bserver把对象的每个属性(遍历)通过0bject.defineProperty 转换为带有getter 和setter 的属性,这样一来,当访问或设置属性时, vue 就有机会做一些别的事情。
Observer是Vue内部的构造器,我们可以通过Vue提供的静态方法Vue.observable( object )
间接的使用该功能,可以把整个对象转成响应式
在组件生命周期中,这件事发生在beforeCreate之后,created之前。
具体实现上,它会递归遍历对象的所有属性,以完成深度的属性转换。
由于遍历时只能遍历到对象的当前属性,因此无法监测到将来动态增加或删除的属性,因此Vue提供了
s
e
t
和
set和
set和delete两个实例方法,来对已有响应式对象添加或删除属性。
对于数组,重写了一部分能改变原数组的隐式的原型方法(如push,pop,shift,unshift),Vue会更改它的隐式原型,之所以这样做,是因为Vue需要监听那些可能改变数组内容的方法。
总之,Observer的目标就是要让一个对象,它属性的读取,赋值,内部数组的变化都要能够被Vue感知到。
——————————————————————下面写的太乱了——————————————————————
<script src="./vue.min.js"></script>
<script>
var user = {
name: 'monica',
age: 17,
addr: {
province: '黑龙江',
city: '哈尔滨',
},
students: [
{ name: '小王', age: 5 },
{ name: '小张', age: 6 },
],
};
Vue.observable(user);// 从此以后,user里面所有的东西都是响应式的
// user.students[0] = {} // 无响应式
// 真的如此吗?
//比如在控制台输出 user.sex = '女'; // 此时,数据响应式的处理已经结束了,此时属性是一个普通属性
// delete user.age; // vue能知道我删除了属性吗?不能!
function haha(){
console.log(user.name)
}
</script>
无论嵌套多少重都会变成响应式
第一种情况
user.sex = ‘女’;
这里不是响应式属性,Object.defineProperty()深度遍历属性,当时是没有sex属性存在的
考点Vue2的defineProperty弊端
深度的遍历就会有效率的损失, 由于在观察过程中,就已经完成了深度遍历,里面有的属性都改成了getset,再去新增就不知道了,一旦完成了监听后续再进行添加属性
第二种情况
也不能监控删除数据delete user.age;因为一个getter是读数据,一个setter是赋值
同上
(题外:在组件生命周期中,这件事发生在beforeCreate
之后,created
之前。)
所以,由于遍历时只能遍历到对象的当前属性,因此无法监测到将来动态增加或删除的属性,因此vue2
提供了$set
和$delete
两个实例方法,让开发者通过这两个实例方法对已有响应式对象添加或删除属性。
Vue3
直接没有$set
和$delete
两个方法了。
Vue3Proxy,抛弃Vue2监听属性,不需要遍历了,改为监听整个对象
const proxy=new Proxy(obj,{
get(target,key){},
set(target,key,val){},
deleteProperty(){}
})
proxy.a=3
proxy.b=4
↓仅供了解
第三种情况
对于数组,vue
会更改它的隐式原型,之所以这样做,是因为vue需要监听那些可能改变数组内容的方法
页面刷新,但调用push方法,页面是怎么知道的
原本是数组→Array.prototype
这个push方法是调用Vue里面的push方法
重新改造了原型链,原型链拦截
选中区域就是Vue自定义的对象
监控了所有会导致数组变化的方法,nb
但是存在一个小缺陷,通过下标改值无法响应式,数据变,而页面不变
是Object.defineProperty()的缺陷
现在可以用下面这种方式改成响应式
0bject.defineProperty( vm.hobbies,“0"”,{})
但是,数组本身有许多filter和map之类的方法,改动后就不再是响应式,因此不建议
user.students[0].name = ‘xiao wang’;//响应式
user.students[0] ={};//无响应式
但是如果实在要修改,那么:
①
②
Observer的目标,就是要让一个对象,它属性的读取、赋值,内部数组的变化都要能够被vue感知到。
2、Dep
这里有两个问题没解决,就是读取属性时要做什么事,而属性变化时要做什么事,这个问题需要依靠Dep来解决。Dep的含义是Dependency
,表示依赖的意思。
__ob__观察者
Vue
会为响应式对象中的每个属性、对象本身、数组本身创建一个Dep
实例,每个Dep
实例都有能力做以下两件事:
- 收集依赖:是谁在用我
- 派发更新:我变了,我要通知那些用到我的人
每个dep都是new Dep()构造函数创建出来的↓
{//对象本身有个dep
title: 'Hello Vue',//每个属性会有一个dep
//user本身一个dep,当给user赋值的时候
user: {//对象一个dep,加一个属性this.$set(user, "name", "monica")
age: '',//dep
},
//hobbies属性本身一个dep,给hobbies改值
hobbies: ['读书', '音乐', '钢管'],//字符串原始值,数组本身一个dep,给数组push
},
当读取响应式对象的某个属性时,它会进行依赖收集:有人用到了我
当改变某个属性时,它会派发更新:那些用我的人听好了,我变了
depend记录(getter里)谁在用,之前用的谁,再运行一次notify,即运用render
源码
一个例子↓
不会运行render,Vue有依赖收集,只有改动用到的才会变,没用到不会变
现在有这么一道面试题
??会运行
上面控制台添加的,触发光标选中处的render
因为this.user后面属性是啥,万一this.user后面读的是不存在的属性,↑
如果不记录图中第一个render,那删除name属性时候($delete(user,‘name’)),就会通知不到
所以建议不使用set/delete
3、Watcher($watch)
这里又出现一个问题,就是Dep如何知道是谁在用我?
要解决这个问题,需要依靠另一个东西,就是Watcher。
当某个函数执行的过程中,用到了响应式数据,响应式数据是无法知道是哪个函数在用自己的
因此,vue通过一种巧妙的办法来解决这个问题
我们不要直接执行函数,而是把函数交给一个叫做watcher的东西去执行,watcher是一个对象,每个这样的函数执行时都应该创建一个watcher,通过watcher去执行
watcher会设置一个全局变量,让全局变量记录当前负责执行的watcher等于自己,然后再去执行函数,在函数的执行过程中,如果发生了依赖记录dep.depend()
,那么Dep
就会把这个全局变量记录下来,表示:有一个watcher用到了我这个属性
当Dep进行派发更新时,它会通知之前记录的所有watcher:我变了
每一个vue
组件实例,都至少对应一个watcher
,该watcher
中记录了该组件的render
函数。
watcher
首先会把render
函数运行一次以收集依赖,于是那些在render中用到的响应式数据就会记录这个watcher。
当数据变化时,dep就会通知该watcher,而watcher将重新运行render函数,从而让界面重新渲染同时重新记录当前的依赖。
watcher和函数关联在一起,一开始会运行一次watcher里面的函数,运行过程中就会记录依赖,记录watcher,将来数据变了重新通知watcher,重新运行函数
下面这块扩展。
<body>
<div id="app">
<h1>{{title}}</h1>
</div>
<script src="./vue.min.js"></script>
<script>
//vm.$set(vm.user, "age", 17)
var vm = new Vue({
el: '#app',
data: {
title: 'Hello Vue',
user: {
name: 'monica',
},
hobbies: ['读书', '音乐', '钢管'],
},
created() {
//this.$watch内部new Watcher
this.$watch(() => {
console.log('watcher run');
console.log(this.user.name);
});
},
render(h) {
console.log('render');
return h('h1', `${this.user.name} ${this.title} ${this.hobbies}`);
},
});
</script>
</body>
watcher伪代码↑
把$watch里面的() => {}当fn传进去,run里this就是↓
() => {
console.log(‘watcher run’);
console.log(this.user.name);
}
把this保存到全局变量global,所以收集依赖的时候,只需要访问global,记录该变量即可,函数运行完置null
由于每个组件都有render函数,render函数也是放在watcher里面运行的,每个组件至少有一个watcher,
4、Scheduler(调度器)
现在还剩下最后一个问题,就是Dep通知watcher之后,如果watcher执行重运行对应的函数,就有可能导致函数频繁运行,从而导致效率低下
试想,如果一个交给watcher的函数,它里面用到了属性a、b、c、d,那么a、b、c、d属性都会记录依赖,于是下面的代码将触发4次更新:
state.a = "new data"; // 某些 watcher 想运行了,给调度器
state.b = "new data"; // 某些 watcher 想运行了,给调度器
state.c = "new data"; // 某些 watcher 想运行了,给调度器
state.d = "new data"; // 某些 watcher 想运行了,给调度器
这样显然是不合适的,因此,watcher收到派发更新的通知后,实际上不是立即执行对应函数,而是把自己交给一个叫调度器的东西
调度器维护一个执行队列,该队列同一个watcher仅会存在一次,队列中的watcher不是立即执行,它会通过一个叫做nextTick
的工具方法,把这些需要执行的watcher放入到事件循环的微队列中,nextTick的具体做法是通过Promise
完成的
nextTick 通过
this.$nextTick
暴露给开发者nextTick 的具体处理方式见:https://cn.vuejs.org/v2/guide/reactivity.html#%E5%BC%82%E6%AD%A5%E6%9B%B4%E6%96%B0%E9%98%9F%E5%88%97
也就是说,当响应式数据变化时,render
函数的执行是异步的(除了第一次同步),并且在微队列中
nextTick也容易出面试题,例如↓
nextTick伪代码
render返回值就是模板里一毛一样
问题一、最开始输出?
先render再1,因为是同步,render先放在watcher执行
问题二、点击按钮后,输出啥?
1,2,3,4 render
nextTick和render都是异步,为什么render在后,因为this.a=10是后面改变的
执行到console.log行,此时界面未更新
问题三、第二次点击输出啥?
10111213
问题四、点击按钮输出?
1 1234 render
1同步
问题五、点击后顺序
1234 render 1
问题六、点击输出啥?
render 10,11,12,13
为什么?微队列:render(this.a),nextTick 同步:this.b/c/d
总体流程
一开始运行render函数,交给watcher运行,watcher过程执行render函数,render函数执行会用到数据,运行getter,是原始对象通过Observer的Object.defineProperty转成getter和setter,触发getter会依赖收集,会记录watcher用到哪些数据。数据发生变化,通知watcher把数据重新运行一遍,走调度器,去重进队列,加到nextTick里,微队列,nextTick方法全是异步的,exec watchers就是执行队列的,exec watchers重新执行watcher,又重新运行render函数,周而复始。
响应式数据怎么和页面挂钩呢?模板里所有东西都会变成render函数,当运行render函数,可能会用到一些数据,就会用到getter,用到这个属性就会记录,这叫做依赖收集(collect as dependency),收集的是观察者watchers,发布订阅模式,watchers会观察这些数据,会运行setter,就会通知他notify,叫做派发更新,会重新触发render函数的执行,重新生成虚拟dom树
vue3响应式的五个问题
1、count变化后doubleCount会不会变化?
不会,响应式不是数据与数据的关联
2、count变化后doubleCount会不会变化?
会
3、count变化后doubleCount会不会变化?
不会,原始类型不能是响应式数据,改成props会
4、count变化后doubleCount会不会变化?
会
5、count变化后doubleCount会不会变化?
不会,原始类型不能是响应式数据,改成props会
——————————————
响应式是(被监控)函数与数据的关联,被监控的函数↓
2、函数运行期间用到了响应式数据
3、响应式数据变化会导致函数重新运行