依赖收集:
每个属性都会有一个dep依赖对象,它会收集所有用到这个属性的函数,如果我需要重新为这个属性赋值,dep会通知它所收集到的函数,执行这个函数导致页面上有用到这个属性的地方会被重新渲染。
set可以添加函数,进行去重。
vnode是虚拟dom,本质是一个js对象,不依赖具体的平台,在浏览器中,会生成真实的dom节点,在移动端,会渲染成原生组件,在服务端,会渲染成字符串。
解析模板生成抽象语法树,解析抽象语法树生成渲染函数,执行渲染函数生成虚拟dom,通过diff算法对比新旧虚拟dom的差异,更新新的数据到虚拟dom,通过patch算法,将虚拟dom转化为真实dom,渲染到页面上。
keep-active组件,会缓存页面的数据,当我从A页面跳到B页面,会缓存A页面的数据,当我回到A页面时,页面不会刷新。
数据的响应式原理:
对vm创建的data里面的属性做出代理,使不用通过this.data.message访问,而是可以通过this.message直接访问
建立vm实例,
执行虚拟dom不一定会比真实dom快:
虚拟dom算法操作真实dom,性能高过直接操作真实dom。
虚拟dom算法=虚拟dom+diff算法。
判断是否有el,如果有el,直接使用el,如果没有el,通过vm.mount()创建el判断有无渲染函数,如果有渲染函数执行渲染函数,如果没有渲染函数。diff算法:只会更新对应虚拟dom更改的数据到真实dom上,减少重绘回流,提高性能。更改响应数据时,会触发dep依赖对象,通知它所收集的所有watcher函数,执行watcher的patch方法,更新相应的视图。vnode.el指向真实dom,vnode是虚拟dom。如果vnode未渲染时,el为空。vnode渲染后,如组件挂载,元素插到页面后,el指向真实的dom节点。vnode被销毁后,el会被置空或指向已经从dom移除的节点。解析插槽:子组件可以向父组件传值,原理:父组件解析遇到作用域插槽,会将作用域插槽解析成一个函数。子组件解析将对应的插槽数据包装成一个对象,传进t函数。t函数执行,将t内部数据传入到父组件包装的函数下,渲染到父组件。解析后的虚拟VNode节点会被存放在slots,进行真实dom的渲染,可以在子组件根据this.$slot访问具体的虚拟VNode节点。
在Vue2中,为每个对象和数组建立一个实例,执行监听函数将它们转为响应式的。如果是基本数据类型,不需要将它们创建Observe实例执行Observe执行构造函数,创建响应式数据。
对对象和数组做响应式处理,对基本数据类型不做响应式处理。同时递归操作,可以对数组和对象内部复杂的数据类型做出响应式的处理。