Vue3.0的新特性(二)

时间:2020-9-7 作者:admin

自定义指令

  1. 钩子函数改为:beforeMountmountedbeforeUpdateupdatedbeforeUnmountunmounted,名称与组件生命周期类似。

  2. 支持将自定义指令绑定在组件上,与非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,包含attrsslotsemit三个属性,可访问非props属性、插槽以及触发事件。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。