Vue2 API必知的几点

FEFL
122 阅读7分钟

Vue2 API 速查

Global API

Vue api

  1. Vue.extend( {} ) 用于扩展Vue的选项，生成一个新的扩展后的构造器，这样我们就可以通过创建实例来复用这个扩展后的组件
  2. Vue.nextTick(function(){} , context) 用于在DOM异步渲染结束后执行，保证能获取到最新DOM
  3. Vue.set(target, key, value); 用于设置响应式对象上的key
  4. Vue.delete(target, key) 用于删除响应式对象上的key
  5. Vue.directive(name, {}) 用于创建全局的指令，实现逻辑的复用
  6. Vue.filter(name, function(){}) 用于创建全局的过滤器，实现数据处理
  7. Vue.component(name, {}) 用于创建全局组件，实现组件的复用
  8. Vue.use( { install(){} } ) 用于安装插件，增强Vue的功能
  9. Vue.mixin({}) 用于混入组件选项，实现选项的复用
  10. Vue.observable({}) 用于实现对象的响应式
  11. Vue.compile("<h4>哈哈</h4>").render 用于编译模板，只在引入完整版Vue时才可用
  12. Vue.version 返回Vue的版本
  13. Vue.config 返回Vue的配置对象
    • 加粗的是默认值，其后跟具体用法
    • Vue.config.async = false 是否启动Vue的异步渲染模式，能够将更新视图的任务拆分为多个小任务，分散到多个帧中执行
    • Vue.config.devtools = true 是否允许vue-devtools检查代码，开发默认为true，生产围殴false
    • Vue.config.ignoredElements = []--- ['component-name', ...] 用于指定忽略某些非Vue组件的自定义元素，否则会误认为是vue组件未注册
    • Vue.config.keyCodes = {}--- {键位别名，键码} 用于自定义某个键的别名，当我们在监听键盘相关事件时，使用别名作为修饰符即可
    • Vue.config.optionMergeStrategies.my_option = function( parent,child, vm ){} 用于处理某个自定义选项在父实例和子实例的合并策略
    • Vue.config.performance = false 用于设置是否在浏览器的性能工具面板对组件的初始化，编译，渲染等进行性能追踪
    • Vue.config.productionTip = true 用于设置是否在vue启动时生成生产提
    • Vue.config.silent = false 用于取消Vue的所有日志和警告
    • Vue.config.errorHandler = undefined--- function() {} 用于在2.6以后这个钩子会捕获组件渲染和更新，生命周期，自定义事件，监听的回调发生的错误，同时如果是Promise链，则链上的错误也会被捕获，如果这个钩子未配置，则默认使用console.error来输出错误
    • Vue.config.warnHandler = undefined--- function () {} 配置开发环境中vue的运行时警告的处理函数

Vm api

  1. vm.$data 是一个普通的js对象 Vue 实例代理了对其 data 对象 property 的访问，通过读取$data获取到对原始对象的访问，但是修改$data并不会影响原始对象
  2. vm.$props 是一个普通的js对象 Vue 实例代理了对其 props 对象 property 的访问
  3. vm.$el 是一个DOM元素 Vue 实例挂载的根DOM元素，即当前组件template中得根元素，拿到这个根元素我们可以随意移动组件位置
  4. vm.$options 是一个普通的js对象 Vue实例的选项对象
  5. vm.$parent 是一个Vue实例 父实例
  6. vm.$root 是一个Vue实例 根实例
  7. vm.$children 是一个Vue实例 子实例
  8. vm.$slots 是一个普通的js对象 具名插槽和默认插槽作为该对象的属性来访问
  9. vm.$scopedSlots 是一个函数，接收slot名作为参数，返回该slot对应的渲染函数
  10. vm.$refs 是一个普通的js对象，所有属性由注册过ref属性的组件或DOM元素的引用构成
  11. vm.$isServer 是一个Boolean，返回Vue是否运行于服务器
  12. vm.$attrs 是一个普通的js对象，拥有除props声明，class，style外的所有从父组件中绑定的值
  13. vm.$listeners 是一个普通的js对象，key是事件名，value是事件监听器
  14. vm.$watch 是一个函数，接收三个参数，表达式，回调函数，选项对象 ，是一个对watcher的简单封装，
    • 通过解析表达式，读取值，触发依赖绑定，实现响应式，返回一个取消观察的函数，调用即可取消
    • 选项deep，可以观察对象内部值的变化，如果是数组则不需要加deep，数组是通过拦截器实现的。选项immediate是以当前值立即执行一次回调函数
  15. vm.$set 是一个函数，接受两个参数，对象，属性。用于给响应式对象添加属性时维持新加属性的响应式，通过definePeoperty实现
  16. vm.$delete 是一个函数，接收两个参数，对象，属性，
  17. vm.$on 是一个函数，接受两个参数，事件名，回调函数。
  18. vm.$emit 是一个函数，接收两个参数，事件名，【参数】
  19. vm.$once 是一个函数，同$on，只执行一次
  20. vm.$off 是一个函数，接收两个参数，事件名，监听器函数
  21. vm.$mount 是一个函数，接收一个DOM元素或者选择器作为参数，返回vm实例
  22. vm.$nextTick 是一个函数，在实例DOM更新结束后执行回调
  23. vm.$destroy 是一个函数，不接受参数，销毁一个实例
  24. vm.$forceUpdat 是一个函数，不接受参数，强制更新一个实例，只会影响实例自身，传入插槽的子组件，
    • 一般用于修改数组length，在定时器修改数据，数据不会影响data中数据时，使用此方法
    • 或者组件的数据依赖三方库，浏览器API等，Vue可能无法检测到三方库数据的变化，就需要使用强制更新来实现

Options api

export default {
    data() {
        return {
            // 组件实例化时，会将当前data对象进行深克隆，作为组件实例的$data属性，然后递归将$data进行响应式转换，随后，将$data中的每个属性都代理到组件实例上方便模板的访问
        }
    },
    props: {
        // 对于传入的数据，可以配置的属性有，type，default。required，validator
    },
    computed: {
        // 自动绑定this为vm。对计算结果进行缓存
    },
    methods: {
        // 自动绑定this为vm，相比于计算属性，可以进行一些额外操作，如异步请求等
    },
    watch: {
        // 第一个参数是需要观察的js表达式，第二个参数是回调函数
    },
    el: "", //只在使用new 创建实例时有效
    template: "", //要挂载到el中的内容，单文件组件即template标签中的内容，在导入单文件组件时，会自动作为当前选项的值
    render() { }, //一个生产虚拟DOM的函数，如果当前项存在，则template会被忽略
    renderError() { }, //当render函数发生错误时，渲染当前函数生产的虚拟DOM
    directives: {
        // 创建局部指令
    },
    filters: {
        // 创建局部过滤器
    },
    components: {
        // 引入局部组件
    },
    parent: Vue, // 父实例
    mixins: [], // 混入选项
    extends: {
        // 声明扩展组件，在此次导入要扩展的组件
    },
    provide: {
        // 提供非响应的数据给后代
    },
    inject: {
        // 声明要注入的依赖，key是本地使用的变量名，value是provide提供的名
    },
    name: "", // 只在作为选项时起作用，通过name，可以方便调试和调用
    delimiters: [], // 修改模板中的插值语法的分隔符，默认是{{}} ，可以修改为【"${","}"】——> ${}
    functional: false, // 用于将组件声明为一个无状态，无实例的组件，加快渲染过程
    model: {
        prop: "",
        event: ""
        // 用于设置双向绑定的值和监听的事件
    },
    inheritAttrs: true, // 组件外部传入的非prop属性，默认会被继承到组件的根标签上，通过此选项可以控制是否继承
    comments: false, // 用于设置编译器编译模板时，对于模板中的注释的处理，为true则保留，为all则连同vue的注释一同保留，或者为正则，则仅保留匹配注释

}

LifeCycle

export default {
    /**
     * new 调用了Vue构造函数，创建vue实例vm
     * 初始化Options，将传入的option属性添加到vm身上
     * 初始化生命周期变量，将$parent，$root等添加到vm身上
     * 初始化事件变量，将$on,$off,$listeners等添加到vm身上
     * 初始化渲染，将$slot,$scopedSlots等添加到vm身上
     * 以上基本是给些默认值，或者空进行占位
     */
    beforeCreate() {
        /**
         * 经过上述步骤，我们完成了vm属性的初始化
         * 在此处可以去修改之前已经初始化的数据，
         * 或者初始化一些全局变量
         * 基本没啥用，一般我们在组件选项中就已经给定了初始值了
        */

    },
    /**
     * 将我们传入的option选项（默认存在$options中） props、data、computed、methods 等属性合并到实例身上。
     * 初始化实例的 $el 属性，用于存储实例的根 DOM 元素。
     * 处理provide，inject
     */
    created() {
        /**
         * 在此处vm创建完毕，相关数据也初始化完毕，但是组件还未编译成渲染函数，无法访问DOM元素
         * 在此处可以执行一些异步操作，请求数据，订阅事件等，
         * 
        */
    },
    /**
     * 编译模板————>渲染函数————>虚拟DOM
     * 初始化实例的 _vnode 属性，用于存储实例的虚拟 DOM
     * 调用 updateComponent 函数，创建实例的渲染 watcher
     */
    beforeMount() {
        /**
         * 在这能干的，在created也能干，没区别，唯一的区别是多了个渲染函数
         */
    },
    /**
     * 将实例的根 DOM 元素挂载到页面上
     */
    mounted() {
        /**
         * 可以访问到已经vm的DOM元素，在此处可以执行一些与DOM相关的操作
         */
    },
    /**
     * 更新实例的 props、data、computed 等属性。
     */
    beforeUpdate() {
        /**
         * 可以访问更新前的数据和DOM
         */
    },
    /**
     * 更新实例的虚拟 DOM
     * 将更新后的虚拟 DOM 渲染成真实的 DOM
     */
    updated() {
        /**
         * 能够访问到更新后的数据，但不一定能访问到更新后的DOM
         */
    },
    activated() {
        /**
         * 使用keep-alive组件缓存的组件
         * 当从缓存取出时执行activated
         * 一般用于重新获取数据，重新注册事件监听器
         */
    },
    deactivated() {
        /**
         * 当被缓存到keep-alive时调用
         * 一般用于清除定时器，取消事件监听
         */
    },
    beforeDestroy() {
        /**
         * 在这里还能访问到数据和DOM
         * 清楚定时器，取消事件监听
         */
    },
    destroyed() {
        /**
         * 在这里访问不到数据和DOM
         * 一般在此释放资源，清除引用
         */
    },
    errorCaptured() {
        /**
         * 用于捕获来自后代组件的错误，可以返回false，阻止错误继续向上传播
         */
    }
}
avatar
文章
阅读
粉丝