- 数据驱动视图
UI=render(state) -
object通过js的object.defineProperty方法侦测数据变化- object类型把每一个属性转换成
getter/setter的形式侦测数据变化(getter收集依赖，setter通知依赖更新)； - 只能观测到
object数据的取值与设置值，再往object添加或删除值时无法更新视图； - 可通过
Vue.set和Vue.delete达到更新视图的目的；
- object类型把每一个属性转换成
-
Array数组变化侦测是通过拦截器实现（push,pop,shift,unshift,splice,sort,reverse） - 虚拟DOM：用一个js对象来描述一个
DOM节点。用js的计算性能换取操作dom所消耗的性能，用js模拟出一个虚拟dom节点，通过DOM-Diff算法计算出需要更新的地方，然后去更新需要更新的视图。
<div class="a" id="b">我是内容</div>
{
tag:'div', // 元素标签
attrs:{ // 属性
class:'a',
id:'b'
},
text:'我是内容', // 文本内容
children:[] // 子元素
}
VNode类在虚拟DOM的作用：渲染视图前，把写好的template模板先编译成VNode并缓存下来，当有页面数据发生变化需要重新渲染时，则对比数据发生变化前后的VNode进行对比。找出差异(DOM-Diff算法)，有差异的VNode对应真实DOM节点就是需要重新渲染的节点，最后根据有差异的VNode创建出真实的DOM节点再插回视图中，完成一次视图更新。
从而达到尽可能少的操作真实DOM的目的，以节省性能。DOM-Diff的过程称为patch(补丁)过程。过程所做的事：
- 创建节点：新的
VNode中有而旧的oldVNode中没有，就在旧的oldVNode中创建。 - 删除节点：新的
VNode中没有而旧的oldVNode中有，就从旧的oldVNode中删除。 - 更新节点：新的
VNode和旧的oldVNode中都有，就以新的VNode为准，更新旧的oldVNode。
- 与数据相关的实例方法
vm.$watch(expOrFn, callback, [options])：观察vue实例变化的一个表达式或计算属性性函数。vm.$set()：向响应式对象中添加一个属性。vm.$delete()：删除对象的属性。
- 全局api
Vue.extend( options )：使用基础Vue构造器，创建一个‘子类’，接收对象参数。Vue.nextTick( [callback, context] )：在DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后DOM。在created()钩子操作DOM需在vue.nextTick中使用。Vue.set(target, property/index, value)：向响应式对象中添加一个属性，并确保这个新属性是响应式的，且触发视图更新。Vue.delete(target, propertyName/index)：删除对象属性。Vue.directive(id, [definition])：注册或获取全局指令。Vue.filter(id, [definition])：注册或获取全局过滤器。Vue.component(id, [definition])：注册或获取全局组件。Vue.use(plugin)：安装插件。在new Vue()之前使用。Vue.mixnin(mixin)：注册一个混入，影响注册之后所有创建的每个Vue实例。Vue.compile(compile)：在render函数中编译模板字符串。只在独立构建时有效。Vue.observable(object)：让一个对象可响应。Vue内部会用它来处理data函数返回对象(小型vuex)。Vue.version：版本号
过滤器
filters(vue3已废弃)：本质是js函数。用法可串联、可传参{{ text | filterA | filterB(val1, val2) }}自定义指令：合适的时机执行定义指令时所设置的钩子函数。
内置组件
<keep-alive>：抽象组件，不会渲染元素，包裹组件时会缓存不活动的组件实例，而不是销毁。可以保留组件的状态或避免多次重新渲染，以提高页面性能。
被<keep-alive>缓存后，再次渲染时不会执行created、mounted等钩子函数，会调用activated、deactivated。
可接收三个属性：
-
include：字符串或正则表达式。只缓存名称匹配上的组件； -
exclude：字符串或正则表达式。名称匹配上的组件都不缓存； -
max：数字。最多可以缓存多少组件实例。
// 逗号分隔字符串
<keep-alive include="a,b">
<component is="view"></component>
</keep-alive>
// 正则表达式 用v-bind
<keep-alive :include="/a|b/">
<component is="view"></component>
</keep-alive>
// 数组 用v-bind
<keep-alive :include="['a', 'b']">
<component is="view"></component>
</keep-alive>
缓存淘汰策略LRU：算法根据数据的历史访问记录来进行淘汰数据，其核心思想是“如果数据最近被访问过，那么将来被访问的几率也更高”
