Vue 2.0 官网 API 零碎知识整理

Vue API 零碎知识整理

最近抽空重新看了一遍Vue官网的API，对一些经常使用的、经常忘记用法的、经常错用的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 ]"          // 推荐使用计算属性来求解元素的最终样式