粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

自定义指令

钩子函数改为：beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted，名称与组件生命周期类似。
支持将自定义指令绑定在组件上，与非props属性一样包含在$attr中。

Teleport

在实现一个浮层开关时，浮层需要基于body定位，但是从逻辑上浮层和开关是相关联的，最好能够写在一起，就用上了teleport

<button @click="modalOpen = true">
    Open full screen modal! (With teleport!)
</button>
<teleport to="body">
  <div v-if="modalOpen" class="modal">
    <div>
      I'm a teleported modal! 
      (My parent is "body")
      <button @click="modalOpen = false">
        Close
      </button>
    </div>
  </div>
</teleport>

to属性接收选择器，确定teleport内vnode传送的目标。当多个teleport传送到同一目标时会appendChild

Composition API

在Vue3.0中Composition API可以作为与options并行的编写组件的形式，为组件的组合提供了便利。从一个setup函数开始。

export default {
  props: {
    name: {
      type: String,
      required: false,
      default: ''
    }
  },
  setup(props, context) { // setup在组件创建前执行，因此只能访问props
    // this不指向组件实例！
    return {}; // return的属性将作为实例的属性，在模板，options中可以调用
  }
}

在setup中也可以使用data、计算属性、watch、生命周期。

import {ref, toRefs, reactive, watch, computed, onMounted} from 'vue';
export default {
  props: {
    name: {
      type: String,
      required: false,
      default: ''
    }
  },
  setup(props, context) {
    const title = ref(''); // title经ref包装具有响应式，需要调用value属性读写值
    const name = toRefs(props); // toRef包裹props可使解构出的属性具有响应式
    const info = reactive({age: 18, height: 170}); // 响应式的对象由reactive生成
    const titleChange = watch(title, (val, oldVal) => {
      console.log('title', val);
    }); // watch包装实现监听响应数据的变化
    const TITLE = computed(() => title.value.toUpperCase());
    onMounted(() => { // 生命周期加on可在setup中使用，没有beforeCreate和created，可在setup中初始化
      console.log('mounted');
    });
    return {title, name, info, TITLE};
  }
}

setup的第二个参数为context，包含attrs、 slots、emit三个属性，可访问非props属性、插槽以及触发事件。