VueAPI小结

//呈现为

WalterWhiteakaHeisenberg

Vue.nextTickDom更新循环结束延迟回调后执行，Vue在更新DOM时异步执行。只要检测到数据变化，Vue就会打开一个队列，缓冲所有发生在同一个事件循环中的数据变化。如果同一个观察者被多次触发，只会被推入队列一次。这种情况下，在缓冲时进行重复数据删除对于避免不必要的计算和DOM操作很重要：此时修改msg。vm.msg="11"console.log("Originalmessage":msg)Vue.nextTick(function(){console.log("Afterupdate":msg)})2.1新支持promiseVue.nextTick().then(function(){//DOMupdated})awaitVue.nextTick()当数据为数组时，在组件中使用$nextTickVue.set/Vue.delete。更新下标时使用了Vue.use()参数：{Object|Function}plugin如果插件是对象，则必须提供安装方法。如果插件是一个函数，它将被用作安装方法。在调用install方法时，会将Vue作为参数传入。这个方法需要在调用newVue()之前调用。当同一个插件多次调用install方法时，该插件只会安装一次。Vue.compile(template)将模板字符串编译成渲染函数。注意：仅在完整版中可用varres=Vue.compile('')newVue({data:{msg:'hello'},render:res.render,staticRenderFns:res.staticRenderFns})Vue.observable(object)使对象响应。Vue将在内部使用它来处理数据函数返回的对象。返回的对象可以直接用于渲染函数和计算属性，当发生变化时会触发相应的更新。它还可以用作简单场景的最小跨组件状态存储conststate=Vue.observable({count:0})constDemo={render(h){returnh('button',{on:{click:()=>{state.count++}}},`countis:${state.count}`)}}选项/数据datapropspropsDatacomputedmethodswatchpropsArray|Object//简单语法Vue.component('props-demo-simple',{props:['size','myMessage']})//对象语法，提供验证Vue.component('props-demo-advanced',{props:{//detectiontypeheight:Number,//detectionType+otherverificationage:{type:Number,//基本类型default:0,//默认值required:true,//必须加上validator:function(value){//验证成功或失败返回值>=0}}}})propsData{[key:string]:any}只用于在new创建的实例中创建实例时传递props。主要作用是方便测试varComp=Vue.extend({props:['msg'],template:'

{{msg}}

'})varvm=newComp({propsData:{msg:'hello'}})watchnote:Arrowfunctionsshouldnotbeusedtodefinewatcherfunctionoptions/DOMeltemplaterenderrenderErroroptions/lifecyclehooksbeforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedactivateddeectivedbeforeDestroydestroyederrorCaptured所有生命周期钩子自动将此上下文绑定到实例，因此您可以访问数据，用于属性计算withmethods注意：不能使用箭头函数来定义生命周期方法（这里指的不是vue实例）beforeCreate在实例初始化之后调用，在实例创建之后创建dataobserver和event/watcher事件配置之前立即被调用。该实例完成了以下配置：数据观察器、属性和方法操作、watch/event事件回调。挂载阶段还没有开始，$el属性还不可用。beforeMount在挂载开始之前被调用：第一次调用相关的render函数注意这个钩子在服务端渲染时不会被调用实例挂载到文档中的一个元素上。当调用mounted时，vm.$el也在文档中。请注意，mounted不保证所有子组件也一起安装。如果你想等到整个视图渲染完成，你可以在mounted中使用vm.$nextTick：rendered})}注意这个钩子在服务器端渲染期间不起作用在更新beforeUpdate数据时调用，这发生在虚拟DOM被修补之前。这适用于更新前访问已有的DOM，比如手动移除添加的事件监听器。注意这个钩子在服务器端渲染时不会被调用，因为只有初始渲染才会在服务器端更新。虚拟DOM由于数据更改而重新渲染和修补将在此之后调用此钩子。当这个钩子被调用时，组件DOM已经更新，所以你现在可以执行依赖于DOM的操作。在大多数情况下，你应该避免在这段时间内改变状态。如果你想响应状态变化，通常最好使用计算属性或观察者。请注意，updated并不能保证所有子组件也一起重绘。如果你想等到整个视图重绘之后，你可以使用vm.$nextTickupdated:function(){this.$nextTick(function(){//只有在//整个视图重绘之后才会运行的代码rendered})}inupdated在服务器端渲染期间不调用钩子activated在激活具有保持活动缓存的组件时调用在服务器端渲染期间不调用此钩子deactivated当具有保持活动缓存的组件时调用isdeactivated在服务端渲染时不会调用beforeDestroy在实例销毁之前调用，实例仍然完全可用。这个钩子在服务器端渲染期间使用实例销毁后调用销毁的实例。钩子调用后，该Vue实例对应的所有指令都被解除绑定，所有的事件监听器被移除，所有的子实例也被销毁。这个钩子在服务器端渲染时使用不调用errorCaptured当从后代组件捕获错误时调用(err:Error,vm:Component,info:string)=>?boolean三个参数：错误对象，组件实例所在发生错误，包含错误源信息的字符串返回false，以防止此错误继续上传options/resourcesdirectivesfilterscomponentsoptions/combinationparentmixinsextendsprovide/injectmixinsvarmixin={created:function(){console.log(1)}}varvm=newVue({created:function(){console.log(2)},mixins:[mixin]})//=>1//=>2extends允许声明扩展另一个组件而不用Vue.extend这个主要是为了方便扩展单文件组件varCompA={...}//InheritCompAvarCompBwithoutcalling`Vue.extend`={extends:CompA,...}provide/inject允许一个祖先组件注入一个对其所有后代的依赖提供：对象|()=>Objectinject:Array|{[键：字符串]：字符串|符号|Object}options/othersnamedlimitersfunctionalmodelinheritAttrscommentsfunctionalmakesthecomponentstateless(nodata)andinstanceless(nothiscontext).他们使用一个简单的渲染函数来返回虚拟节点，使它们的渲染成本更低用作eventVue.component('my-checkbox',{model:{prop:'checked',event:'change'},props:{//这允许将`value`属性用于不同的目的value:String,//使用`checked`作为代替`value`的属性checked:{type:Number,default:0}},//。..})等同于{foo=val}"value="somevalue">instancepropertyvm.$datavm.$propsvm.$elvm.$optionsvm.$parentvm.$rootvm.$childrenvm.$slotsvm.$scopedSlotsvm.$refsvm.$isServervm.$attrsvm.$listenersvm.$options用于初始化当前Vue实例optionnewVue({customOption:'foo',created:function(){console.log(this.$options.customOption)//=>'foo'}})vm.$slots类型：{[name:string]:?Array}vm.$scopedSlots类型：{[name:string]:props=>数组|undefined}vm.$refs一个对象，它持有所有用ref属性注册的DOM元素和组件实例this.$refs.usernameInputvm.$isServerbooleanVue实例在服务器上运行vm.$attrs包含属性绑定（类和样式除外）实例方法/数据，在父范围vm.$watchvm.$setvm.$delete实例方法中未被识别（和获取）为props/eventvm.$onvm.$oncevm.$offvm.$emit指令v-textv-htmlv-oncev-showv-ifv-elsev-else-ifv-forv-onv-bindv-modelv-slotv-prev-cloakv-predoesnotrequireexpressions跳过这个元素及其子元素的编译过程，可以用来说明原来的Mustache标签跳过大量没有指令的节点会加快编译速度。{{thiswillnotbecompiled}}v-cloakdoesnotrequireexpressions该指令停留在元素上，直到相关实例结束编译才会显示，直到编译结束[v-cloak]{display:none;}{{message}}