前端面试之道2 19vue常考基础知识点

Vue这⼀章节我们将来学习VuebeforeCreateprops或者data中的数据的，因为这些数据的初始化都在initState中。created钩⼦函数，在这⼀步的时候已经可以访问到之beforeMountVDOM，最后执⾏mounted钩⼦，并将VDOM渲染为真实DOM并且渲染数接下来是数据更新时会调⽤的钩⼦函数beforeUpdate和另外还有keep-alive独有的⽣命周期，分别为activated和毁，⽽是缓存到内存中并执⾏deactivated钩⼦函数，命中缓存渲染后会执⾏actived钩⼦函数。最后就是销毁组件的钩⼦函数beforeDestroy和psemit发送事件props传递数据，⼦组件不能直接修改props，⽽是必须通过发送事件的⽅另外这两种⽅式还可以使⽤语法糖v-model来直接实现，因为v-这种语法糖的⽅式是典型的双向绑定，常⽤于UI控件上，但是究其$parent$children对象来访问组另外如果你使⽤Vue2.3及以上版本的话还可以使⽤.sync$listeners(.native修饰器的v-on事件监听器传递给⼦组件，⼦组件可以通过访问$listeners来⾃<input:value.sync="value"<input:value="value"@update:value="v=>valuethis.$parent.$children$children中可以通过组件name查询到需要的组件实例，然后进⾏通信。对于这种情况可以使⽤Vue2.2新增的APIprovide/inject，假设有⽗组件A，然后有⼀个跨多层级的⼦组件////⽗组件Aexport{provide:{data:1}}//⼦组件Bexportdefault{inject:['data'],mounted(){⽆论跨⼏层都能获得⽗组件的dataconsole.log(this.data)//=>}}这种⽅式可以通过Vuex或者EventBus解决，另外如果你不怕麻extend这个APIletComponentVue.extend({template:挂载到#appnewletSuperComponent=newSuperComponent({created(){}mixin和mixinsbeforeCreate()这种⽅式会影响到每个组件的beforeCreate}虽然⽂档不建议我们在应⽤中直接使⽤mixin，但是如果不滥⽤的ajax或者⼀些⼯具有相同的业务逻辑，就可以将这些逻辑剥离出来，通过mixins混另外需要注意的是mixins混⼊的钩⼦函数会先于组件内的钩⼦函可以阅读⽂档(/v2/guide/mixins.html)。computed和watch以使⽤watch。//深度遍历deeptrue,//⽴即触发immediatetrue,handler:function(val,oldVal)varvm=Vue({data:{1},computed:{aPlus:{this.aPlusget:function{returnthis.a+this.aPlus1时触发set:function(v){this.a=v-}}}keep-alive就可以使⽤keep-alive组件包裹需要保存的组件。activated和deactivated。⽤keep-alive包裹deactivatedactived钩⼦函v-show与v-ifv-show只是在display:none和display:block之间切换。⽆论初始条件是什么都会被渲染出来，后⾯只需要切换CSS，DOM还是⼀直保留着的。所以总的来说v-show在初始渲染时有更v-if的话就得说到Vue底层的编译了。当属性初始为false时，组件就不会被渲染，直到条件为true，并且切换条件时会触发销v-if的这种惰性渲染机制，可以在必要的时候才去渲染组组件中dataJS组件复⽤时所有组件实例都会共享data，如果data是对象的话，data以后会影响到其他所有组件，所以需要将data写成函数，每次⽤到就调⽤⼀次函数获得新的数据。newVue