关于vue.js:vue3x新特性

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})
    }
  }
})