关于vue.js:Vue-API总结

42次阅读

共计 6507 个字符，预计需要花费 17 分钟才能阅读完成。

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

通过 Vue.config设置

silent
optionMergeStrategies
devtools
errorHandler
warnHandler
ignoredElements
keyCodes
performance
productionTip

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

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 结构器，创立一个“子类”。参数是一个蕴含组件选项的对象
留神 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>

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

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

参数：{Object | Function} plugin

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

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

留神：只在完整版时可用

var res = Vue.compile('<div><span>{{ msg}}</span></div>')

new Vue({
data: {msg: 'hello'},
render: res.render,
staticRenderFns: res.staticRenderFns
})

让一个对象可响应。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

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
    }
  }
}
})

{[key: string]: any }
只用于 new 创立的实例中

创立实例时传递 props。次要作用是不便测试

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

var vm = new Comp({
propsData: {msg: 'hello'}
})

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

el
template
render
renderError

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
derectived
beforeDestroy
destroyed
errorCaptured

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

留神：不能应用箭头函数来定义一个生命周期办法（this 不指 vue 实例）

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

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

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

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

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

实例被挂载后调用，这时 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
})
}

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

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

因为数据更改导致的虚构 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
})
}

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

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

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

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

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

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

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

destroyed

实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁
该钩子在服务器端渲染期间不被调用

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

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

directives
filters
components

parent
mixins
extends
provide/inject

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

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

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

var CompA = {...}

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

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

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

name
delimiters
functional
model
inheritAttrs
comments

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

函数式组件

容许一个自定义组件在应用 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>

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

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

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

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

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

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

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

this.$refs.usernameInput

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

蕴含了父作用域中不作为 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

不须要表达式

跳过这个元素和它的子元素的编译过程
能够用来显示原始 Mustache 标签。跳过大量没有指令的节点会放慢编译。
```
<span v-pre>{{this will not be compiled}}</span>
```

不须要表达式

这个指令放弃在元素上直到关联实例完结编译

不会显示，直到编译完结

[v-cloak] {display: none;}

<div v-cloak>
{{message}}
</div>

key
ref
is
slot
slot-scope
scope

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

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

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 不是响应式的, 不能够用它在模板中做数据绑定

用于动静组件且基于 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

正文完

vue.js

发表至： vue.js

2021-07-13

0

关于vue.js:创建Vue项目遇到报错

关于vue.js:手写Vue的diff算法

关于vue.js:在vue中使用海康插件实现视频实时监控海康插件

关于vue.js:19道高频vue面试题解答上

关于react.js:如何设计实现H5营销页面搭建系统

关于vue.js:Vue-API总结

全局配置

Vue.config.errorHandler

全局 API

Vue.extend

Vue.nextTick

Vue.set / Vue.delete

Vue.use()

Vue.compile(template)

Vue.observable(object)

选项 / 数据

props

propsData

watch

选项 /DOM

选项 / 生命周期钩子

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

activated

deactivated

beforeDestroy

destroyed

errorCaptured

选项 / 资源

选项 / 组合

mixins

extends

provide/inject

选项 / 其余

functional

model

实例 property

vm.$options

vm.$slots

vm.$scopedSlots

vm.$refs

vm.$isServer

vm.$attrs

实例办法 / 数据

实例办法 / 事件

指令

v-pre

v-cloak

非凡 attribute

key

ref

is

内置组件

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）