一、基础知识

1. Watch 的高级用法（handle 方法 和 deep 、immediate）如何实现深度监听！

链接

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

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

链接

3. 事件

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

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

二、Vue的高级特性

1. 自定义的v-model 事件

---父组件---
  <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 为啥呢？

<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. 动态组件 典型代表-新闻详情页

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

• 这时候用 <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组件路径'),
    }

5. keep-alive 缓存组件

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

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

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

1. 最后效果

2. 抽离出来的 mixin.js

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

三、Vue-X 全局状态管理

四、Vue-router 路由模式

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