当前位置 主页 > 网站技术 > 代码类 >

    2019年度web前端面试题总结(主要为Vue面试题)(2)

    栏目:代码类 时间:2020-01-12 21:08

    v-model 实际上会帮我们完成上面的两步操作。

    6. Vue中如何监控某个属性值的变化?

    比如现在需要监控data中,obj.a 的变化。Vue中监控对象属性的变化你可以这样:

    watch: {
       obj: {
       handler (newValue, oldValue) {
        console.log('obj changed')
       },
       deep: true
      }
     }

    deep属性表示深层遍历,但是这么写会监控obj的所有属性变化,并不是我们想要的效果,所以做点修改:

    watch: {
      'obj.a': {
       handler (newName, oldName) {
        console.log('obj.a changed')
       }
      }
     }

    还有一种方法,可以通过computed 来实现,只需要:

    computed: {
      a1 () {
       return this.obj.a
      }
    }

    利用计算属性的特性来实现,当依赖改变时,便会重新计算一个新值。

    7. Vue中给data中的对象属性添加一个新的属性时会发生什么,如何解决?

    示例:

    <template>
     <div>
      <ul>
       <li v-for="value in obj" :key="value">
        {{value}}
       </li>
      </ul>
      <button @click="addObjB">添加obj.b</button>
     </div>
    </template>
    <script>
    export default {
     data () {
      return {
       obj: {
        a: 'obj.a'
       }
      }
     },
     methods: {
      addObjB () {
       this.obj.b = 'obj.b'
       console.log(this.obj)
      }
     }
    }
    </script>
    <style></style>

    点击button会发现,obj.b 已经成功添加,但是视图并未刷新:

    原因在于在Vue实例创建时,obj.b并未声明,因此就没有被Vue转换为响应式的属性,自然就不会触发视图的更新,这时就需要使用Vue的全局api $set():

    addObjB () {
       // this.obj.b = 'obj.b'
       this.$set(this.obj, 'b', 'obj.b')
       console.log(this.obj)
      }

    $set()方法相当于手动的去把obj.b处理成一个响应式的属性,此时视图也会跟着改变了:

    8. delete和Vue.delete删除数组的区别

    delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。

    Vue.delete直接删除了数组 改变了数组的键值。

      var a=[1,2,3,4]
      var b=[1,2,3,4]
      delete a[1]
      console.log(a)
      this.$delete(b,1)
      console.log(b)

    9.如何优化SPA应用的首屏加载速度慢的问题?

    将公用的JS库通过script标签外部引入,减小app.bundel的大小,让浏览器并行下载资源文件,提高下载速度;

    在配置 路由时,页面和组件使用懒加载的方式引入,进一步缩小 app.bundel 的体积,在调用某个组件时再加载对应的js文件;

    加一个首屏 loading 图,提升用户体验;

    10. 前端如何优化网站性能?

    减少 HTTP 请求数量

    在浏览器与服务器进行通信时,主要是通过 HTTP 进行通信。浏览器与服务器需要经过三次握手,每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限(不同浏览器允许并发数),一旦 HTTP 请求数量达到一定数量,资源请求就存在等待状态,这是很致命的,因此减少 HTTP 的请求数量可以很大程度上对网站性能进行优化。