Vue 面试知识点(三)__Vue.js
发布于 24 天前 作者 banyungong 205 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

一、基础知识

1. Watch 的高级用法(handle 方法 和 deep 、immediate)如何实现深度监听!

链接

image.png 对象的深度监听: oleVal 和 val 引用类型,拿不到 oldVal 。因为指针相同,此时已经指向了新的 val

2. Vue2.0 v-for 中 :key 到底有什么用?

链接

3. 事件

1. event参数 ,自定义事件 $event的使用

image.png

2. 事件修饰符、按键修饰符

image.png

image.png

二、Vue的高级特性

image.png

1. 自定义的v-model 事件

chrome-capture.gif

---父组件---
  <div>
    <h2>自定义V-model</h2>
    <h3>{{name}}</h3>
    <child v-model="name" ></child>
  </div>
import child from './ChildComponents'
export default {
  components:{
    child
  },
  data(){
    return{
      name:'小凯'
    }
  }
}

---子组件---
<template>
  <!-- 例如:vue 颜色选择 -->
  <input type="text"
         :value="text1"
         @input="$emit('change1', $event.target.value)"
  >
</template>

<script>
export default {
  model: {
    prop: 'text1', // 对应 props text1
    event: 'change1'
  },
  props: {
    text1: String,
    default() {
      return ''
    }
  }
}
</script>

2. $nextTick 异步渲染

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

  • Vue是异步渲染(原理部分会详细讲解)

  • data改变之后,DOM不会立刻渲染

  • $nextTick会在DOM渲染之后被触发,以获取最新

每次当我们点击添加一项的时候 ,正常情况下 第一次点击 应该打印出的是6,结果是3 为啥呢?

image.png

<template>
  <div id="app">
    <ul ref="ul1">
        <li v-for="(item, index) in list" :key="index">
            {{item}}
        </li>
    </ul>
    <button @click="addItem">添加一项</button>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
      return {
        list: ['a', 'b', 'c']
      }
  },
  methods: {
    addItem() {
        this.list.push(`${Date.now()}`)
        this.list.push(`${Date.now()}`)
        this.list.push(`${Date.now()}`)
        // 1. 异步渲染,$nextTick 待 DOM 渲染完再回调
        // 3. 页面渲染时会将 data 的修改做整合,多次 data 修改只会渲染一次
        this.$nextTick(() => {
          // 获取 DOM 元素
          const ulElem = this.$refs.ul1
          // eslint-disable-next-line
          console.log( ulElem.childNodes.length )
        })
    }
  }
}
</script>

但是当我们把这段代码用 this.$nextTick 的方式写之后,就会获取到最新的 Dom 节点

3. 动态组件 典型代表-新闻详情页

动态组件就是 当我们不知道这个组件该渲染为 文章组件 还是 视频组件 还是 图片组件 的时候

image.png

  • 这时候用 <component :is="xxx" > </component>
  • is 绑定的 xxx 就是这些组件的名字

4. 异步组件 (什么时候用,什么时候才加载)

  • 什么时候用到异步组件呢?
  • 比如主页上有一个组件很大,我们每次切换到主页 都得加载这个组件 很浪费性能和影响体验,
  • 这个时候使用 import() 函数来实现组件的按需加载!
<Big v-if="loading"/>   
<button @click="!loading">点我展示这个很大的组件</button>
  • 通常我们引入一个或多个组件是直接引用(也就是打成一个包) import Big from './Big'
  • 但是这种方式会导致性能浪费并且影响体验!
export default {
    components: {
        组件A
        Big: () => import('Big组件路径'),
    }

image.png image.png

5. keep-alive 缓存组件

不加 keep-alive 每次都会让页面重新进行渲染 mounted 和destoryed,很浪费性能; 它和 v-show的区别是 一个在css 层级 ,一个是在Vue层级 image.png

image.png

image.png

6. 多个组件有相同的逻辑,该怎么去抽离!

多个组件有共同的逻辑,把他们抽离出来,就是mixin 比如,组件自身没有 所在城市的data ,但是却可以显示在页面上

  1. 最后效果 image.png

  2. 抽离出来的 mixin.js image.png

  3. 以下是组件自己的内容

image.png

三、Vue-X 全局状态管理

四、Vue-router 路由模式

image.png

image.png

image.png

image.png

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: 没故事的燕同学 原文链接:https://juejin.im/post/6942801168225533983

回到顶部