美文网首页
面经之vue

面经之vue

作者: Estarsyang | 来源:发表于2019-05-13 17:38 被阅读0次

    基本指令


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

    v-on 简写 @,@事件名。修饰符 stop 阻止事件冒泡。prevent 阻止默认事件 once 只执行一次。

    v-bind 简写 :,:属性,常用于样式,组件传值。:style :xxx

    样式可用对象,数组进行配置。:class = "{active:isActive}",isActive 布尔值,true则active添加,false,则active不添加。

    v-if 控制dom结构的显示隐藏,dom结构消失。

    v-show 控制dom结构的显示隐藏,dom结构不消失,相当于display:none;

    v-model 常用于 input 输入框中。修饰符 .trim 首尾空格过滤,.number 转数字 .lazy 与change事件同步,类似onbulr事件

    v-once 只渲染元素或组件一次。dom再次更新时会被当成静态内容跳过。

    生命周期


    image

    beforeCreate 周期内,由于未初始化,所以无法获取data,props数据。created中,可以获取得到data,props值。mounted后,就可以获取dom结构。beforceDestroy中,移除事件监听。

    created和mounted中,都可以进行ajax请求,两者的区别是created页面视图未出现,请求信息过多,会长时间白屏。mounted不会承诺所有视图都出现,可以加载大多数视图。一般在mounted中请求

    Vue.nextTick(),vm.$nextTick() 全局,实例方法


    视图更新后的回调,修改数据后,可获取更新后的dom,经常来进行 滚动视图的刷新,轮播视图的刷新等

    Vue.set vm.$set


    向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi')。

    这里执行的的是对象的操作,在vue中,对数组执行 push,pop,shift,unshift,splice,sort,reverse操作,会刷新视图。使用下标对数组内的某一个具体值进行更新,不会刷新刷图,可以是用set方法来实现或splice方法实现。

    image image image

    data


    vue的数据,可以是对象,可以是函数。在书写vue的组件时,data必须是一个函数,返回一个对象。

    为什么是一个函数而不是一个对象。

    当一个组件被定义,data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!通过提供 data函数,每次创建一个新实例后,我们能够调用 data 函数,从而返回初始数据的一个全新副本数据对象。

    props 父子传值


    子组件接受父组件的数据。

    props:['a','b']或

    props:{

    a:{type:String,default:'test'},b:{type:Number,require:true}
    

    }

    子=>父 传值 自定义事件,并触发


    father.js------

    <son @passData='fromData'></son> -------- methods:{ formData(dataOne){处理子组件传回来的数据}}

    son.js

    事件中触发 this.$emit('passData',dataOne)

    兄弟组件传值,一般新建一个vue空实例化对象。兄弟通过空实例对象触发和监听数据,也是很方便的。但是在实际开发中,通信比较复杂。更多的是使用vuex来进行通讯。

    center.js ----- import Vue from 'vue' export default new Vue

    a.vue ----- import center from './center.js' 事件中 触发 center.$emit('send',data)

    b.vue ----- import center from './center.js' created 中监听 center.$on('send',data=>{操作data})

    小 tips


    center.$emit('send',(data)=>{处理data});

    center.$on('send',(cb)=>{cb && cb({数据对象})});

    传递一个方法,在$on中监听,在回调函数中执行该方法并可以传值给该函数。

    computed 计算属性


    computed计算属性和对象的get,set方法类似。对 vm.aPlus 取值,就执行了 get方法。会返回 this.a + 1;对它赋值,就会执行 set 方法,改变 this.a的值。计算属性会缓存数据,除非数据进行改变。funtion中的this指向vue的实例对象。

    image

    watch


    基本写法。a:function(val,oldVal){} // 显示原值与新值

    立刻调用,执行一次。 immediate属性。监听整个对象,如有对象的值改变,则新旧值一致。

    computed,watch,method,都可以改变data的值。执行顺序一般是 computed,watch,methods。computed刚开始加载就会使用到,获取值,有缓存效果。watch监听数据,数据改变则执行对应的函数。methods是方法 ,需要主动触发。大多数情况下,computed已经满足需要,但是computed不提供set方法,需要你手动添加。使用 watch 选项允许我们执行异步操作(访问一个 API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这是计算属性无法做到的

    image

    slot 插槽


    常用于父组件向子组件传递视图。也可以写模板代码。

    具名插槽 子组件 slot 标签内书写name 属性,父组件的标签书写同样的name属性,就会一一对应。没有书写name属性性,就会默认添加到slot标签中。

    dom结构以子组件的slot为准。

    image image

    slot可以书写默认内容,若父组件不传递,则显示默认内容

    image image

    ref


    vue不建议操作dom,那么要获取到具体的组件的方法或者属性时,可以用 ref 来获取,相当于 html标签中的 id 属性。可以获取到当前组件的所有信息或者dom结构。

    在方法中可以用 this.$refs.xxx来获取到想要获取的组件或者dom结构。

    is


    is 属性,常用来动态显示组件。 <component :is='xxx'></component> xxx为显示的组件名称

    keep-alive


    缓存不活动的组件,不会销毁。即再次进入的时候,缓存组件的生命周期不会被触发,但是会触发 activated 和 deactivated 这两个生命周期。

    key


    遍历时,通常vue会提醒你添加一个key值。这个key值是唯一值,最好使用属性中不变化的值,例如 item中的id等,性能会好一些。不要使用index下标,如果要遍历的数据不改变,不过一般这不可能,使用index影响不大。由于虚拟DOM是通过 diff 算法实现的原因,dom结构能够复用,就会够减少很多运算,优化性能。key的作用主要是为了高效的更新虚拟DOM。

    阅读大佬文章请移步 为什么使用v-for时必须添加唯一的key? - 掘金

    添加全局方法


    common.js 书写方法并 export 出来,在main.js中引入,挂靠在 Vue.prototype.xxx = xxxx 上。组件中就可以使用。

    mixins 混入


    • 混入 具体可以看官网文档哈,个人理解是创建一个公共的js文件,可以书写组件的属性和方法,生命函数等等。data 将会合并,有冲突的以组件数据优先,生命周期不存在冲突概念,都会执行,以外部优先。像 对象类的值,比如 methods , components , directives 将会合并成同一个对象,若 key 值相同,按照对象合并的原则来合并,后面的 value 值会覆盖前面的 value 值,即组件的方法会覆盖 外部的方法。

    相关文章

      网友评论

          本文标题:面经之vue

          本文链接:https://www.haomeiwen.com/subject/nqdraqtx.html