vue全局API

网友投稿 243 2022-11-05


vue全局API

Vue.extend( options )

使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。

data 选项是特例,需要注意 - 在 Vue.extend() 中它必须是函数

import msgboxVue from './index.vue'; // 定义插件对象const MessageBox = {};// vue的install方法,用于定义vue插件MessageBox.install = function (Vue,) { const MessageBoxInstance = Vue.extend(msgboxVue); let currentMsg; const initInstance = () => { // 实例化vue实例 currentMsg = new MessageBoxInstance(); let msgBoxEl = currentMsg.$mount().$el; document.body.appendChild(msgBoxEl); }; // 在Vue的原型上添加实例方法,以全局调用 Vue.prototype.$msgBox = { showMsgBox (options) { if (!currentMsg) { initInstance(); } if (typeof options === 'string') { currentMsg.content = options; } else if (typeof options === 'object') { Object.assign(currentMsg, options); } return currentMsg.showMsgBox() .then(val => { currentMsg = null; return Promise.resolve(val); }) .catch(err => { currentMsg = null; return Promise.reject(err); }); } };}; export default MessageBox;

Vue.nextTick( [callback, context] )

参数:

1. {Function} [callback] 2. {Object} [context]

用法

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

// 修改数据vm.msg = 'Hello'// DOM 还没有更新Vue.nextTick(function () { // DOM 更新了})// 作为一个 Promise 使用 (2.1.0 起新增,详见接下来的提示)Vue.nextTick() .then(function () { // DOM 更新了 })

2.1.0 起新增:如果没有提供回调且在支持 Promise 的环境中,则返回一个 Promise。请注意 Vue 不自带 Promise 的 polyfill,所以如果你的目标浏览器不原生支持 Promise (IE:你们都看我干嘛),你得自己提供 polyfill。

异步更新队列

可能你还没有注意到,Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后,在下一个的事件循环“tick”中,Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate,如果执行环境不支持,则会采用 setTimeout(fn, 0) 代替。 例如,当你设置 vm.someData = ‘new value’,该组件不会立即重新渲染。当刷新队列时,组件会在下一个事件循环“tick”中更新。多数情况我们不需要关心这个过程,但是如果你想基于更新后的 DOM 状态来做点什么,这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员使用“数据驱动”的方式思考,避免直接接触 DOM,但是有时我们必须要这么做。为了在数据变化之后等待 Vue 完成更新 DOM,可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。

Vue.set( target, propertyName/index, value )

参数:

1. {Object | Array} target2. {string | number} propertyName/index3. {any} value

返回值:设置的值。

用法:

向响应式对象中添加一个 property,并确保这个新 property 同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新 property,因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = ‘hi’)注意对象不能是 Vue 实例,或者 Vue 实例的根数据对象。

Vue.delete( target, propertyName/index )

参数:

{Object | Array} target{string | number} propertyName/index

​​仅在2.2.0+ 版本中支持 Array + index 用法。​​

用法:

删除对象的 property。如果对象是响应式的,确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到 property 被删除的限制,但是你应该很少会使用它。

​​在 2.2.0+ 中同样支持在数组上工作。​​

目标对象不能是一个 Vue 实例或 Vue 实例的根数据对象。Vue.directive、Vue.filter( id, [definition] )、Vue.component( id, [definition] )、Vue.use( plugin )直接看官网:​​https://v2.cn.vuejs.org/v2/api/#Vue-directive​​


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:中通物流单号查询API(中通物流单号查询官网查询)
下一篇:手机键盘(暑假每日一题 22)
相关文章

 发表评论

暂时没有评论,来抢沙发吧~