## Vue.extend 创建子类，继承Vue上的功能 ### 基础用法 ``` // 返回构造器 ，参数是组件选项 var Profile = Vue.extend({ template: '{{firstName}} {{lastName}} aka {{alias}}', // data 必须是函数 data: function () { return { firstName: 'Walter', lastName: 'White', alias: 'Heisenberg' } } }) // 创建 Profile 实例，并挂载到一个元素上。 new Profile().$mount('#mount-point') ``` ### 源码 * 缓存策略 - 如果反复调用时，缓存中有就直接返回结果 * name校验 * 继承逻辑 * 初始化传入的 props、computed * 复制父类的属性到子类中 ``` Vue.extend = function (extendOptions: Object): Function { extendOptions = extendOptions || {} const Super = this const SuperId = Super.cid const cachedCtors = extendOptions.\_Ctor || (extendOptions.\_Ctor = {}) // 缓存策略 if (cachedCtors[SuperId]) { return cachedCtors\[SuperId\] } // name校验 const name = extendOptions.name || Super.options.name if (process.env.NODE\_ENV !== 'production' && name) { validateComponentName(name) } const Sub = function VueComponent (options) { this._init(options) } Sub.prototype = Object.create(Super.prototype) Sub.prototype.constructor = Sub Sub.cid = cid++ Sub.options = mergeOptions( Super.options, extendOptions ) Sub['super'] = Super // For props and computed properties, we define the proxy getters on // the Vue instances at extension time, on the extended prototype. This // avoids Object.defineProperty calls for each instance created. if (Sub.options.props) { initProps(Sub) } if (Sub.options.computed) { initComputed(Sub) } // allow further extension/mixin/plugin usage Sub.extend = Super.extend Sub.mixin = Super.mixin Sub.use = Super.use // create asset registers, so extended classes // can have their private assets too. ASSET\_TYPES.forEach(function (type) { Sub[type] = Super[type] }) // enable recursive self-lookup if (name) { Sub.options.components[name] = Sub } // keep a reference to the super options at extension time. // later at instantiation we can check if Super's options have // been updated. Sub.superOptions = Super.options Sub.extendOptions = extendOptions Sub.sealedOptions = extend({}, Sub.options) // cache constructor cachedCtors\[SuperId\] = Sub return Sub } ```  ## Vue.nextTick ### 作用 将回调延迟到下次dom更新之后执行，原理同 vm.$nextTick Vue.nextTick 和 vm.$nextTick 区别是：vm.$nextTick 中回调的 this 自动绑定到实例 #### Vue是使用异步更新队列   ### 下次dom更新是什么时候 - 微任务执行时，更新dom 更新dom的回调是使用 vm.$nextTick 注册到微任务中 vm.$nextTick 是把回调也放在微任务中。 所以顺序很重要，要先修改数据，再使用 nextTick 才可以获取到更新后的 dom  ### 原理  ## Vue.set 同 vm.$set ## Vue.delete 同 vm.$delete ## Vue.directive 注册或获取全局指令 ``` // 注册 Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() } }) // bind 和 update 触发相同的行为 Vue.directive('color-swatch', function (el, binding) { el.style.backgroundColor = binding.value }) 获取 var xxx = Vue.directive('focus') ``` 原理  ## Vue.filter 注册或获取**全局**过滤器 ``` // 注册 Vue.filter('my-filter', function (value) { // 返回处理后的值 }) // getter，返回已注册的过滤器 var myFilter = Vue.filter('my-filter') ```  ## Vue.component 注册或获取**全局**组件  ## Vue.use ## Vue.mixin ## Vue.compile 编译模版字符串，返回包括渲染函数的对象 ## Vue.version 读取package.json中的 version，设置到 vue.version