Vue 2.0 官网 API 零碎知识整理

野性酷女 2021-07-26 23:34 368阅读 0赞

# Vue API 零碎知识整理 #

> 最近抽空重新看了一遍Vue官网的API，对一些经常使用的、经常忘记用法的、经常错用的API进行了梳理，并以个人学习笔记的形式记录，以降低再次阅读的成本和提高查阅文档的效率

## 写在前面 ##

*  为获得最佳的阅读体验，可访问本人笔记原文地址 [Vue API碎片知识整理][Vue API]

--------------------

## ignoredElements ##

*  vue.config 配置
 *  忽略在Vue 之外的自定义元素，如微信的开放标签 wx-open-tag; 否则会报组件未注册的警告

## data ##

*  组件data 必须返回一个函数（尽量不要使用箭头函数），否则data会被所有实例共享
 *  Vue 会递归将data的property 转换为getter/setter —> 从而让data成为响应式数据
 *  创建根实例之前，声明所有的响应数据，后续将无法在data上添加响应式属性
 *  以 \_ 或 $ 开头的属性不会被Vue实例代理，因为他们可能和Vue内置的属性、API方法冲突

## props ##

*  props可以通过数组的方式指定：`props:['name','code']` 但是并不推荐，最好是通过对象形式，规范props 的类型，默认值，校验规则等
 *  props如果类型为对象或函数，则其默认值必须由工厂函数生成
 *  只为props 指定类型时支持 `name:String` 快捷写法

## computed ##

*  最好不要使用箭头函数: —> `this` 指向问题
 *  计算属性会被混入到Vue实例中，所有的`getter` 和 `setter` 的this上下文自动成为Vue 实例
 *  计算属性会被缓存，除非依赖的响应式属性变化

## watch ##

*  最好不要使用箭头函数: —> `this` 指向问题
 *  **handler** 可以使用数组(每个元素都是一个方法），里面的方法会依次调用

## 生命周期 ##

*  **beforeCreated** : 实例初始化之后，`data`数据，`event`事件，`watcher`配置之前调用。
 *  **created**：实例创建完成后调用，`data`数据，`event`事件，`watcher`，`property`,`method`配置完成，但是尚未挂载，$el 尚不可用。
 *  \*\*beforeMount: **挂载开始之前调用，`render`函数首次执行** \*\*。
    
    > 该钩子函数在服务端渲染时不可用
 *  **mounted:** 实例挂载后调用，el已经被vm.$el替换；
    
    el：挂载vue的dom元素，通常是元素id或者class 类名；最常见的是vue项目中index.htmlx中对应的id=app 元素
    
    **mounted 不会保证所有的子组件都一起被挂载，如果你希望等到整个视图都渲染完毕，可以在moubted**钩子函数中使用`vm.$nextTick`
 *  **beforeUpdate**: 数据更新之前调用，发生在虚拟Dom 打补丁之前，这里只适合在更新之前访问现有的dom,比如手动移除已经添加的事件监听器
    
    > 该钩子函数在服务端渲染期间不会被调用，只有初次渲染会在服务端进行
 *  **updated**: 数据更新完成后调用，此时dom已经更新，应该避免在此期间更改状态，如果必须最好使用计算属性或者watcher
    
    > 该钩子函数服务端渲染不可用
    
    **updated**不会保证所有的子组件都一起被挂载，如果你希望等到整个视图都渲染完毕，可以在**updated**钩子函数中使用`vm.$nextTick`
 *  **activated**: 被keep-alive 缓存的组件被激活时调用
    
    > 该钩子函数服务端渲染时不可用
 *  **beforeDestroy**: 实例销毁之前调用

> 该钩子函数服务端渲染时不可用

**destroyed:** 实例销毁后调用

> 该钩子函数服务端渲染时不可用

## 父子实例访问 ##

*  子实例可以通过`$parent` 访问父实例
 *  父实例可以通过`$children` 访问所有子实例
 *  节制的使用`$parent` `$children`

## mixins ##

*  混入Vue实例的属性、方法、生命周期等
 *  被混入的钩子函数（生命周期）将优先执行
 *  混入相同的属性、方法会报错

> 不建议在日常业务代码中使用

## provide / inject ##

> 主要在开发高阶组件时使用，并不推荐用于普通应用程序开发

*  允许祖先组件向其所有子孙组件注入一个依赖
 *  `vue2.2.1` 以上的版本，注入的值会先于`data` 和`props`得到

provide / inject 的绑定不是可响应的，然而你传入了一个可监听的对象，那么其对象的property还是可响应的

## name ##

*  组件名，方便调试时的错误定位和更好的语义化

设置组件名的好处就是可以递归使用

## vm.$options ##

*  创建自定义property

嗯！Vue实例还支持创建自定义`property`

new Vue({
      customProperty:"www",                              //像这样定义
      created:function(){
        console.log(this.$options.customoProperty)       // 像这样访问     
      }
    })

## vm.$slots ##

*  用于访问插槽分发的内容

插槽不是响应性的，如果需要组件在传入数据改变时重新渲染建议采用`data`或者`props`

## vm.$attrs ##

*  高阶组件时使用，透传`props`属性
 *  通过`v-bind="$attrs"`的形式使用

## vm.$listeners ##

*  高阶组件时使用，透传事件监听，类似`$attrs`
 *  通过`v-on = $lisenters` 的形式使用

## vm.$watch ##

*  deep ： 深度监听对象内部属性的变化 【数组的时候不需要】
 *  immediate ：立即以当前值触发回调，此时 `oldval = newVal`
    
    使用此属性不能在第一次回调时取消对指定property的监听
 *  $watch 会返回一个取消监听的函数，用来停止触发回调

var unwatch = vm.$watch('a',cbfun)
    
    unwatch() // 取消监听

## vm.$forceUpdate ##

强制刷新Vue实例。注意它仅仅影响实例本身和插入插槽内容的组件，而不是所有子组件

## vm.$nextTick ##

*  在下一次dom更新完成后执行回调，回调里面访问的是最新的dom

## v-show / v-if ##

*  v-show控制组建的`display`属性
 *  v-if 控制组建的创建与销毁

## v-for ##

v-for 的默认行为会尝试原地修改元素而不是移动它们，要强制其重新排序，可通过绑定key值来提供排序提示

*  v-for 的优先级比v-if 高

## 动态样式绑定 `:class` `:style` ##

:class = "[ classA , classB ]"             // 数组形式：同时绑定样式A、B
    :class = "{ classA: flag }"                // 对象形式：满足条件（flag 为 true）才绑定样式A
    :class = "[ classA , { classB : flag } ]"   // 数组形式和对象形式的结合

:style = "{ width : width + 'px' }"     
    :style = "[ styleA , styleB ]"          // 推荐使用计算属性来求解元素的最终样式

[Vue API]: https://www.wolai.com/rExtsCf6EsqntyH4cEZTCQ?theme=light