网络日志

vue3.x新特性

1. 组合式api

替代选项式api, 作为组合式api的入口,分离逻辑关注点,将同一个逻辑关注点的代码收集在一起

另外,还提供了逻辑复用方案,替代Vue2.x Mixin(命名冲突隐患,不同组件间配置化使用不够灵活)使用

import dataGet from './dataGet.js';
import dataDelete from './dataDelete.js';
import dataUpdate from './dataUpdate.js';

export default {
    props: {
        id: String,
    },
    // 组件创建之前执行,this实例无法访问
    setup(props, context) {
        // 解构props, 获取对id的响应式引用
        const { id } = toRefs(props);

        const { xxx } = dataGet();
        const { xxx } = dataDelete();
        const { xxx } = dataUpdate();
            
        /* something others */

        // 返回的内容会暴露给组件的其余部分包括模板
        return { xxx };

        // 或者返回一个渲染函数, 此时u需要使用expose暴露组件内部的方法/属性以供父组件访问
        context.expose({ property });
        return () => h('div', 'test composite-api');
    }
}

// SFC中使用组合式api的语法糖
// 代码预编译为setup函数的内容
<script setup>

......
// defineProps, defineEmits
// 不支持渲染函数
......

</script>

setup中使用依赖注入

// 响应性绑定
// 组合式api
setup() {
    const location = ref('North Pole')
    const geolocation = reactive({
      longitude: 90,
      latitude: 135
    })

    provide('location', location)
    provide('geolocation', geolocation)
}
// 选项式api, 使用computed
app.component('todo-list', {
  provide() {
    return {
      todoLength: Vue.computed(() => this.todos.length)
    }
  }
})

app.component('todo-list-statistics', {
  inject: ['todoLength'],
})

// 2.x响应性绑定
data() {
    return {
        test1: 'xxx',
        test2: {
            text: 'aaa',
        },
    }
}
provide: {
    return {
        proData1: () => this.test1,   // 方式1
        proData2: this.test2,   // 方式2
    }
},

2. Teleport

控制模板的渲染位置

常见使用场景:模态框、对话框

app.component('modal-button', {
  template: `
    <button @click="modalOpen = true">
        Open full screen modal!
    </button>
    
    // 将模态框内容渲染至body元素下
    <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>
  `,
  data() {
    return { 
      modalOpen: false
    }
  }
})

3. 片段

多根节点
// 2.x
// 结合inheritAttrs: false绑定$attrs到非根元素
<template>
  <div>
    <header>...</header>
    <main v-bind="$attrs">...</main>
    <footer>...</footer>
  </div>
</template>
<script>
export default {
    inheritAttrs: false,
}
</script>

// 3.x
// 支持多根节点,显示绑定$attrs
<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>

4. 状态驱动的动态css

// 使用v-bind
<script setup>
const theme = {
  color: 'red'
}
</script>

<template>
  <p>hello</p>
</template>

<style scoped>
p {
  color: v-bind('theme.color');
}
</style>

5. emits组件选项

// 使用对象语法可以进行事件验证
app.component('custom-form', {
  emits: {
    // 没有验证
    click: null,

    // 验证 submit 事件
    submit: ({ email, password }) => {
      if (email && password) {
        return true;  // 生效
      } else {
        console.warn('Invalid submit event payload!')
        return false
      }
    }
  },
  methods: {
    submitForm(email, password) {
      this.$emit('submit', { email, password })
    }
  }
})