关于vue.js:Vue-API总结

本文次要用于了解vue api内容,查缺补漏,对于根本api,此处不做解释。

全局配置

通过 Vue.config设置

  • silent
  • optionMergeStrategies
  • devtools
  • errorHandler
  • warnHandler
  • ignoredElements
  • keyCodes
  • performance
  • productionTip

Vue.config.errorHandler

Vue.config.errorHandler = function(err, vm, info) {
  console.log(`组件${vm.$vnode.tag}产生谬误:${err.message},${info}`)
}
mounted() {
  b  
},

log

组件xxx产生谬误:b is not defined,mounted hook

全局API

  • Vue.extend
  • Vue.nextTick
  • Vue.set
  • Vue.delete
  • Vue.directive
  • Vue.filter
  • Vue.component
  • Vue.use
  • Vue.mixin
  • Vue.compile
  • Vue.observable
  • Vue.version

Vue.extend

应用根底 Vue 结构器,创立一个“子类”。参数是一个蕴含组件选项的对象
留神 data 选项是特例,须要是函数

// 创立结构器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 创立 Profile 实例,并挂载到一个元素上。
new Profile().$mount('#mount-point')
<div id="mount-point"></div>

// 渲染成
<p>Walter White aka Heisenberg</p>

Vue.nextTick

Dom更新循环完结后执行的提早回调,Vue 在更新 DOM 时是异步执行的

  • 只有侦听到数据变动,Vue 将开启一个队列,并缓冲在同一事件循环中产生的所有数据变更
  • 如果同一个 watcher 被屡次触发,只会被推入到队列中一次。这种在缓冲时去除反复数据对于防止不必要的计算和 DOM 操作是十分重要的

案例:此时批改msg。

vm.msg = "11"
console.log("原信息":msg)

Vue.nextTick(function (){
  console.log("更新后":msg)
})

2.1新增反对promise

Vue.nextTick()
  .then(function () {
    // DOM 更新了
  })



await Vue.nextTick()  

组件内用$nextTick

Vue.set / Vue.delete

在数据是数组时。更新下标时候用过

Vue.use()

参数:{Object | Function} plugin

  • 如果插件是一个对象,必须提供 install 办法
  • 如果插件是一个函数,它会被作为 install 办法。install 办法调用时,会将 Vue 作为参数传入
  • 该办法须要在调用 new Vue() 之前被调用。
  • 当 install 办法被同一个插件屡次调用,插件将只会被装置一次

Vue.compile(template)

将一个模板字符串编译成 render 函数。

  • 留神:只在完整版时可用

    var res = Vue.compile('<div><span>{{ msg }}</span></div>')
    
    new Vue({
    data: {
      msg: 'hello'
    },
    render: res.render,
    staticRenderFns: res.staticRenderFns
    })

    Vue.observable( object )

    让一个对象可响应。Vue 外部会用它来解决 data 函数返回的对象

返回的对象能够间接用于渲染函数和计算属性内,并且会在产生变更时触发相应的更新。也能够作为最小化的跨组件状态存储器,用于简略的场景

const state = Vue.observable({ count: 0 })

const Demo = {
  render(h) {
    return h('button', {
      on: { click: () => { state.count++ }}
    }, `count is: ${state.count}`)
  }
}

选项/数据

  • data
  • props
  • propsData
  • computed
  • methods
  • watch

props

  • Array<string> | Object

    // 简略语法
    Vue.component('props-demo-simple', {
    props: ['size', 'myMessage']
    })
    
    // 对象语法,提供验证
    Vue.component('props-demo-advanced', {
    props: {
      // 检测类型
      height: Number,
      // 检测类型 + 其余验证
      age: {
        type: Number, // 根本类型
        default: 0, // 默认值
        required: true, // 是否必须增加
        validator: function (value) { // 校验成功失败
          return value >= 0
        }
      }
    }
    })

    propsData

  • { [key: string]: any }
  • 只用于 new 创立的实例中
  • 创立实例时传递 props。次要作用是不便测试

    var Comp = Vue.extend({
    props: ['msg'],
    template: '<div>{{ msg }}</div>'
    })
    
    var vm = new Comp({
    propsData: {
      msg: 'hello'
    }
    })

watch

留神:不应该应用箭头函数来定义 watcher 函数

选项/DOM

  • el
  • template
  • render
  • renderError

选项/生命周期钩子

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • activated
  • derectived
  • beforeDestroy
  • destroyed
  • errorCaptured

所有的生命周期钩子主动绑定 this 上下文到实例中,因而你能够拜访数据,对 property 和办法进行运算

  • 留神:不能应用箭头函数来定义一个生命周期办法 (this不指vue实例)

beforeCreate

在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用

created

在实例创立实现后被立刻调用。

  • 实例已实现以下的配置:数据观测 (data observer),property 和办法的运算,watch/event 事件回调。
  • 挂载阶段还没开始,$el property 目前尚不可用。

beforeMount

在挂载开始之前被调用:相干的 render 函数首次被调用

  • 留神 该钩子在服务器端渲染期间不被调用

mounted

  • 实例被挂载后调用,这时 el 被新创建的 vm.$el 替换了
  • 如果根实例挂载到了一个文档内的元素上,当 mounted 被调用时 vm.$el 也在文档内
  • 留神 mounted 不会保障所有的子组件也都一起被挂载
  • 如果你心愿等到整个视图都渲染结束,能够在 mounted 外部应用 vm.$nextTick

    mounted: function () {
    this.$nextTick(function () {
      // Code that will run only after the
      // entire view has been rendered
    })
    }
  • 留神 该钩子在服务器端渲染期间不被调用

beforeUpdate

  • 数据更新时调用,产生在虚构 DOM 打补丁之前
  • 这里适宜在更新之前拜访现有的 DOM,比方手动移除已增加的事件监听器
  • 留神 该钩子在服务器端渲染期间不被调用,因为只有首次渲染会在服务端进行

updated

  • 因为数据更改导致的虚构 DOM 从新渲染和打补丁,在这之后会调用该钩子
  • 当这个钩子被调用时,组件 DOM 曾经更新,所以你当初能够执行依赖于 DOM 的操作
  • 在大多数状况下,你应该防止在此期间更改状态
  • 如果要相应状态扭转,通常最好应用计算属性或 watcher 取而代之
  • 留神 updated 不会保障所有的子组件也都一起被重绘
  • 如果你心愿等到整个视图都重绘结束,能够在 updated 里应用 vm.$nextTick

    updated: function () {
    this.$nextTick(function () {
      // Code that will run only after the
      // entire view has been re-rendered
    })
    }
  • 该钩子在服务器端渲染期间不被调用

activated

被 keep-alive 缓存的组件激活时调用

  • 该钩子在服务器端渲染期间不被调用

deactivated

被 keep-alive 缓存的组件停用时调用

  • 该钩子在服务器端渲染期间不被调用

beforeDestroy

实例销毁之前调用,实例依然齐全可用

  • 该钩子在服务器端渲染期间不被调用

    destroyed

    实例销毁后调用。该钩子被调用后,对应 Vue 实例的所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁

  • 该钩子在服务器端渲染期间不被调用

errorCaptured

捕捉一个来自子孙组件的谬误时被调用

  • (err: Error, vm: Component, info: string) => ?boolean
  • 三个参数:谬误对象、产生谬误的组件实例,一个蕴含谬误起源信息的字符串
  • 返回 false 以阻止该谬误持续向上传

选项/资源

  • directives
  • filters
  • components

选项/组合

  • parent
  • mixins
  • extends
  • provide/inject

mixins

var mixin = {
  created: function () { console.log(1) }
}
var vm = new Vue({
  created: function () { console.log(2) },
  mixins: [mixin]
})
// => 1
// => 2

extends

容许申明扩大另一个组件,而无需应用 Vue.extend

  • 这次要是为了便于扩大单文件组件

    var CompA = { ... }
    
    // 在没有调用 `Vue.extend` 时候继承 CompA
    var CompB = {
    extends: CompA,
    ...
    }

    provide/inject

    容许一个先人组件向其所有子孙后代注入一个依赖

    provide:Object | () => Object
    inject:Array<string> | { [key: string]: string | Symbol | Object }

选项/其余

  • name
  • delimiters
  • functional
  • model
  • inheritAttrs
  • comments

functional

使组件无状态 (没有 data) 和无实例 (没有 this 上下文)。他们用一个简略的 render 函数返回虚构节点使它们渲染的代价更小

  • 函数式组件

model

容许一个自定义组件在应用 v-model 时定制 prop 和 event

  • 默认状况下v-model 会把 value 用作 prop
  • 把 input 用作 event

    Vue.component('my-checkbox', {
    model: {
      prop: 'checked',
      event: 'change'
    },
    props: {
      // this allows using the `value` prop for a different purpose
      value: String,
      // use `checked` as the prop which take the place of `value`
      checked: {
        type: Number,
        default: 0
      }
    },
    // ...
    })
    <my-checkbox v-model="foo" value="some value"></my-checkbox>

    等同于

    <my-checkbox
    :checked="foo"
    @change="val => { foo = val }"
    value="some value">
    </my-checkbox>

实例property

  • vm.$data
  • vm.$props
  • vm.$el
  • vm.$options
  • vm.$parent
  • vm.$root
  • vm.$children
  • vm.$slots
  • vm.$scopedSlots
  • vm.$refs
  • vm.$isServer
  • vm.$attrs
  • vm.$listeners

vm.$options

用于以后 Vue 实例的初始化选项

new Vue({
  customOption: 'foo',
  created: function () {
    console.log(this.$options.customOption) // => 'foo'
  }
})

vm.$slots

类型:{ [name: string]: ?Array<VNode> }

vm.$scopedSlots

类型:{ [name: string]: props => Array<VNode> | undefined }

vm.$refs

一个对象,持有注册过 ref attribute 的 所有 DOM 元素组件实例

<base-input ref="usernameInput"></base-input>

this.$refs.usernameInput

vm.$isServer

boolean,以后 Vue 实例是否运行于服务器

vm.$attrs

蕴含了父作用域中不作为 prop 被辨认 (且获取) 的 attribute 绑定 (class 和 style 除外)

实例办法/数据

  • vm.$watch
  • vm.$set
  • vm.$delete

实例办法/事件

  • vm.$on
  • vm.$once
  • vm.$off
  • vm.$emit

指令

  • v-text
  • v-html
  • v-once
  • v-show
  • v-if
  • v-else
  • v-else-if
  • v-for
  • v-on
  • v-bind
  • v-model
  • v-slot
  • v-pre
  • v-cloak

v-pre

不须要表达式

  • 跳过这个元素和它的子元素的编译过程
  • 能够用来显示原始 Mustache 标签。跳过大量没有指令的节点会放慢编译。

    <span v-pre>{{ this will not be compiled }}</span>

v-cloak

不须要表达式

  • 这个指令放弃在元素上直到关联实例完结编译
  • 不会显示,直到编译完结

    [v-cloak] {
    display: none;
    }
    <div v-cloak>
    {{ message }}
    </div>

非凡attribute

  • key
  • ref
  • is
  • slot
  • slot-scope
  • scope

key

次要用在 Vue 的虚构 DOM 算法,在新旧 nodes 比照时辨识 VNodes

  • 如果不应用 key,Vue 会应用一种最大限度缩小动静元素并且尽可能的尝试就地批改/复用雷同类型元素的算法
  • 应用 key 时,它会基于 key 的变动重新排列元素程序,并且会移除 key 不存在的元素。
  • 有雷同父元素的子元素必须有独特的 key

ref

  • ref 被用来给元素或子组件注册援用信息
  • 援用信息将会注册在父组件的 $refs 对象上
  • 如果在一般的 DOM 元素上应用,援用指向的就是 DOM 元素
  • 如果用在子组件上,援用就指向组件实例

    <!-- `vm.$refs.p` will be the DOM node -->
    <p ref="p">hello</p>
    
    <!-- `vm.$refs.child` will be the child component instance -->
    <child-component ref="child"></child-component>
  • ref 和 v-for 一起应用的时候,你失去的 ref 将会是一个蕴含了对应数据源的这些子组件的数组。
  • $refs 不是响应式的,不能够用它在模板中做数据绑定

is

用于动静组件且基于 DOM 内模板的限度来工作

<!-- 当 `currentView` 扭转时,组件也跟着扭转 -->
<component v-bind:is="currentView"></component>

<!-- 这样做是有必要的,因为 `<my-row>` 放在一个 -->
<!-- `<table>` 内可能有效且被搁置到里面 -->
<table>
  <tr is="my-row"></tr>
</table>

内置组件

  • component
  • transition
  • transition-group
  • keep-alive
  • slot

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年50元

阿里云限时活动-2核2G-5M带宽-60G SSD-1000G月流量 ,特惠价99元/年(原价1234.2元/年,可以直接买3年),速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

You may also like...

发表评论

邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据