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函数的内容

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: `
    
        Open full screen modal!
    
    
    // 将模态框内容渲染至body元素下
    
      

        

          I'm a teleported modal! 
          (My parent is "body")
          
            Close
          
        
      
    
  `,
  data() {
    return { 
      modalOpen: false
    }
  }
})

3. 片段

多根节点

// 2.x
// 结合inheritAttrs: false绑定$attrs到非根元素



// 3.x
// 支持多根节点，显示绑定$attrs

4. 状态驱动的动态css

// 使用v-bind

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