当一个Vue实例创建时Vue会遍历data中的属性用Object.defineProperty(Vue使用proxy)转换为getter/setter并且在内部追踪相关依赖在属性被访问和修改时通知变化。

每个组件实例都有相应的watcher程序实例他会在组件渲染的过程中把属性记录为依赖之后依赖项的setter被调用时会通知watcher重新计算从而致使它关联的组件得以更新。

MVVM

通过Object.defineProperty()来劫持各个属性的setter和getter在数据变化时发布消息给订阅者出发相应的监听回调。

监听器Observer对所有数据的属性进行监听解析器Compiler对每个元素节点的指令进行扫描和解析根据指令模板替代数据以及绑定相应的更新数据

new

首先执行初始化对data执行相应化处理这个过程发生在Observer中同时对模板执行编译找到其中动态绑定的数据从data中获取数据并初始化视图这个过程发生在Compile中同时定义一个更新函数updater和watcher将来对应的数据变化时watcher会调用更新函数由于data的某个key在一个视图中可能出现多次所以每个key都需要一个管家Dep来管理多个watcher将来data中的数据一旦发生变化会先找到对应的Dep通知所有watcher执行更新函数

来进行数据劫持有什么缺点

是一开始就遍历对象进行监听所以检测不到对象属性的添加和删除数据的API方法无法监听到例如push、pop方法等监听不到需要对每个属性进行遍历监听如果嵌套的对象层级比较深则会影响性能

MVVM

Model代码数据模型数据和业务逻辑都在Model层中定义view代表UI视图负责数据的展示viewModel负责监听Model中的数据的改变并且控制视图的更新处理用户的交互操作

Model和View并无关联而是通过viewModel来进行联系的Model和View之间有着数据绑定的关系Model中的数据发生改变时会触发View层的更新View中数据的变化也会更新到Model层中。

这种模式实现了Model和View的数据自动同步因此开发者只需要专注于数据的维护而不用操作DOM

MVC

MVC是Model、View和Controller的方式来组织代码结构其中的View负责显示逻辑Model负责业务数据以及数据操作。

Model数据发生变化的时候会通知有关View层更新页面Controller是View和Model之间的纽带带用户页面发生交互的时候COntroller中的事件触发器开始工作通过调用Model层来完成Model的修改Model再去更新View层

MVP

MVC中很多逻辑会在View层和Model层耦合代码复杂的时候可能会造成代码的混乱。

MVP模式和MVC的不同在于Presenter和Controller。

Presenter来实现对View层和Model层的解耦在MVC中Controller只知道Model中的接口不知道View中的逻辑然而在MVP模式中View层的接口同样暴漏给了Presenter因此可将Model层的变化和View的变化绑定在一起实现View和Model的同步更新。

对于Computed

它支持缓存只有依赖的数据发生变化的时候才会重新计算不支持异步当Computed中有异步操作的时候无法监听数据的变化

对于watch

它不支持缓存数据发生变化时它就会触发相应的操作支持异步监听监听的函数接收两个参数第一个参数是最新的值第二个参数是变化之前的值

computed依赖其他属性值并且computed的值有缓存只有依赖的值发生变化才会重新计算computed的值watch更多的是观察的作用无缓存性类似与某些数据监听的回调函数每次监听的数据发生变化都会执行回调函数

slot

nameheader/slot/headermainslot/slot/mainfooterslot

BaseLayouttemplate

生成节点的时候会忽略对应的节点render的时候不会渲染v-show

会生成vnoderender的时候也会渲染成真实的节点只是在render的过程中控制display属性

v-model

input:valuesearchTextinputsearchText

$event.target.value

CustomInput:valuesearchTextupdate:valuenewValue

searchText

templateinput:valuemodelValueinput$emit(update:value,

Vue组件可能存在多个实例如果使用对象形式定义data会导致它们共用一个data对象状态变化会影响所有组件实例这是不合理的采用函数的形式在initData时会将其作为工厂函数返回新的data对象有效避免多实例之间状态污染的问题。

1编码阶段

尽量减少data中的数据data中的数据都会增加getter和setter会收集对应的watcherv-if和v-for不能连用vue2

会先执行for再根据if干掉不需要的组件如果需要使用v-for给每项元素绑定事件时使用代理SPA采用Keep-alive缓存组件循环组件中的key保证唯一体积比较大的图片懒加载

生命周期

**beforeCreate创建前**数据观测和初始化事件还未开始不能访问到data、computed、watch、methods上的方法和数据**created创建后**实例创建完成实例上配置的options包括data、computed、watch、methods都配置完成但是还未挂载DOM所以不能访问到DOM**beforeMount挂载前**在挂载前被调用相关的render函数首次被调用编译模板把data里面的数据和模板生成HTML此时还没挂载HTML到页面上**mounted挂载后**完成了模板中的HTML渲染到页面上**beforeUpdate更新前**响应式数据更新时调用此时虽然响应式诗句更新了但是真实的DOM还未渲染**updated更新后**在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用此时DOM已经更新**beforeDestroy销毁前**实例销毁前调用这一步实例依然可用this还可以调用**destroyed销毁后**实例销毁后调用

activated

命中的缓存组件会执行该钩子函数deactivated切换其他组件时调用

子组件通过props属性来接收父组件的数据子组件通过$emit向父组件发送数据通过ref属性给子组件设置一个名字通过$refs组件名来获取子组件

使用eventBus方法它的本质是通过创建空的Vue实例作为消息传递的中转站通讯的组件引用这个实例来实现消息的传递通过$refs获取兄弟组件也可以进行通信

任意组件之间

它的URL带着一个#例如https://abc.com/#/vue

window.onhashchange

}使用onhashchange()事件的好处是在页面的hash值发生变化的时候不用向后端发送请求

history模式

history模式中的URL中没有#它使用的是传统的路由分发的模式当输入一个路由时服务器会接收到这个请求并解析这个URL然后做出相应的逻辑处理。

$route

是路由信息对象包括path、params、hash、query、等等的属性$router是路由的实例包括了路由的跳转方法钩子函数等

Vuex

应用开发的状态管理模式每一个Vuex应用的核心是store仓库。

vuex的状态存储是响应式的当Vue组件从store中读取状态的时候若store中的状态发生变化那么相应的组件也相应得到更新。

改变store中的状态的唯一途径就是显式得提交commitmutation这样可以方便的跟踪每项变化。

vuex

是存储数据的在组件中可以通过this.$store.state.count获取到count的值当然通过this获取的方式非常的麻烦不方便多个属性获取所以还可以通过辅助函数mapState获取

computed:

相当于vue中的computed属性是基于vuex中的state计算得来第一个参数是state可以获取到state中的值也可以接受其他的getters作为第二个参数。

在组件中可以通过this.$store.getters.twoCount来调用它的辅助函数是mapGetters

computed:

中的状态的唯一方法是提交mutation它必须是一个同步函数。

它的第一个参数是

state

第二个参数的用户自行传入的参数payload其他名字也可以需要注意的是不建议在组件中直接使用mutation中的函数需要使用store.commit操作mutation中的函数。

或者可以使用辅助函数mapMutations在组件中使用例如

methods:

this.$store.commit(addCount)...mapMUtations([addCount])},action

action类似于mutation不同在于action提交的是mutation而不是直接设置状态stateaction可以包含任意异步操作。

action函数接受一个与store实例具有以相同方法和属性的context对象可以通过context.commit来提交一个mutation也可以使用context.state和context.getters获取state和getters的值但它并不是store实例本体

actions:

触发在组件中使用this.$store.dispatch(addCountAsync)触发在action中可以调用异步函数或者调用接口数据可以分发多重mutation它的辅助函数是mapActions

methods:

{...mapActions([addCountAsync])}action是异步函数意味着还可以在函数中嵌套进Promise函数

actions:

{commit(someMutation)resolve()},

1000)})}

store.dispatch(actionA).***n(()

{//

当一个数据量非常大的时候store就可能变得相当臃肿为了解决这个问题可以将store分割成许多模块

const

getter接收的第一个参数是模块的局部状态对象。

对于模块内部的

context.state

作出响应。

也就是说可以和根一样的调用会自动匹配Model中的action

namespaced:

getters[account/isAdmin]},actions:

{login

dispatch(account/login)},mutations:

{login

getters[account/posts/popular]}}}}}

})在组件中使用如下

state.some.nested.module.b}),...mapGetters([some/nested/module/someGetter,

this[some/nested/module/someGetter]some/nested/module/someO***rGetter,

this[some/nested/module/someO***rGetter]])

methods:

{...mapActions([some/nested/module/foo,

this[some/nested/module/foo]()some/nested/module/bar

this[some/nested/module/bar]()])

在组件内部通过dispatch来分发action或者通过辅助函数mapActionsaction

commit

store.dispatch(asyncIncrement)}}

}vue

不是vue特有的在很多场景下都有应用在vue中作用是用来虚拟DOM和真实DOM之间的vnode节点比较

2比较方式

第一次循环后发现旧节点D与新节点D相同直接复用D作为diff的第一个真实的节点同时旧节点的endIndex移动到C新节点的startIndexu移动到C

C)相同同理diff

实现数据劫持消除了vue2当中基于Object.defineProperty

vue2

中的组件时通过声明的方式引入一系列的option和typescript结合比较麻烦vue3

修改了组件的声明方式改成了类的写法这样和TypeScript结合变得容易

语法API

回顾vue2每个组件实例都对应一个watcher他会在组件渲染的过程中把用到的数据property记录为依赖当依赖发生改变触发setter则会通知watcher从而使关联的组件重新渲染

templatediv

/template可以看到组件的内部只有一个动态节点剩余的都是一些静态节点所以这里的很多diff算法和遍历都是不需要的造成性能浪费

因此vue3

下图这里已经标记静态节点的p标签在diff过程中则不会比较把性能进一步提高

静态提升

Vue3中对不参与更新的元素会做静态提升只会被创建一次在渲染时直接复用提升为一个常量不参与

diff

默认情况下绑定事件行为被视为动态绑定每次都会去追踪它的变化开启缓存后下次diff算法直接用

SSR优化

当静态内容大到一定量级时候会用createStaticVNode方法在客户端去生成一个static

node这些静态node会被直接innerHtml就不需要创建对象然后根据对象渲染

很多个静态属性divspan{{

}}_push(div${_ssrRenderAttrs(_mergeProps(_attrs,

_cssVars))}divspan你好/span...divspan你好/spandivspan${_ssrInterpolate(_ctx.message)}/span/div/div)

}2、源码体积

相比Vue2Vue3整体体积变小了除了移出一些不常用的API再重要的是Tree

shanking

任何一个函数如ref、reavtived、computed等仅仅在用到的时候才打包没用到的模块都被摇掉打包的整体体积变小

import

defineProperty来劫持整个对象然后进行深度遍历所有属性给每个属性添加getter和setter实现响应式

vue3采用proxy重写了响应式系统因为proxy可以对整个对象进行监听所以不需要深度遍历

可以监听动态属性的添加可以监听到数组的索引和数组length属性可以监听删除属性

虚拟DOM

虚拟DOM实际上是一层对真实ODM的抽象用JavaScript对象来描述节点最终通过一系列操作使这个树映射到真实的DOM上

这JavaScript

对象中虚拟DOM表现为一个Object对象并且至少包含标签名tag、属性attrs和子元素对象children三个属性创建虚拟DOM就是为了更好的将模拟的节点渲染到页面视图中所以虚拟DOM对象节点和真实DOM节点属性一一对应

div

_c(div,{attrs:{id:app}},[_c(p,{staticClass:p},[_v(节点内容)]),_v(

),_c(h3,[_v(_s(foo))])])}})通过vNode

vue可以对这颗抽象树进行创建节点、删除节点以及修改节点的操作经过diff计算做出需要修改的最小单位再去更新视图减少DOM操作提高性能

为什么需要虚拟DOM

DOM是很慢的其元素非常庞大页面性能的问题大部分都是由DOM操作引起的

由此可见如果每次都直接去操作DOM的代价是非常昂贵的平凡操作还会出现页面卡顿影响用户体验

虚拟DOM的技术不仅仅可以用在网页上最大的优势在于抽象了原本的抽象过程实现跨平台的能力目标平台可以是安卓和IOS的原生组件也可以是小程序也可以是各种GUI

如何实现虚拟DOM

tag/*当前节点对应的对象包含了具体的一些数据信息是一个VNodeData类型可以参考VNodeData类型中的数据信息*/this.data

data/*当前节点的子节点是一个数组*/this.children

text/*当前虚拟节点对应的真实dom节点*/this.elm

context/*函数化组件作用域*/this.functionalContext

undefined/*节点的key属性被当作节点的标志用以优化*/this.key

data

data.key/*组件的option选项*/this.componentOptions

componentOptions/*当前节点对应的组件的实例*/this.componentInstance

undefined/*当前节点的父节点*/this.parent

undefined/*简而言之就是是否为原生HTML或只是普通文本innerHTML的时候为truetextContent的时候为false*/this.raw

false/*是否作为跟节点插入*/this.isRootInsert

false/*是否有v-once指令*/this.isOnce

false}//

https://github.com/answershuto/learnVue*/get

child

所有对象的context选项都指向了vue实例elm属性则指向了其相对应的真实DOM节点