vue3 + ts

注意点

可以禁用组件的属性继承，保持其纯净性 inheritAttrs: false

由于html中的属性名是不会区分大小写的， 所以在定义组件与自定义事件时尽量使用 xxx-xxx 的名称

provide (data) inject (props) 用于多级组件的数据传递， 单向传递的，可以通过一些手段实现双向

keep-alive 一般和 动态组件(component)一起使用

vue3中的异步组件 defineAsyncComponent (注意： Suspense)

import { createApp, defineAsyncComponent } from 'vue'
defineAsyncComponent(() =>
	import('./components/AsyncComponent.vue')
)

自定义指令可以使用生命周期钩子

vue3中的this会有点问题

可以参考 v3.vuejs.org/guide/compo…

vue中的操作dom的ref在setUp中，通过动态绑定来实现啦， setUp中的this指向undiffer

vue3 + ts

setup

一个集合体，可以说是组件的入口函数

导出的是变量 就是vue2中的data 导出的是方法就是vue2中的methods

export default {
  /**
    * @return Object 对象中的所有属性值都会绑定到this中 
    * @param props 用于接收父组件传递过来的值，注意：必须先在setup外面props中定义好，才能通过props.xxx拿到父组件传递过来的值
    * @param context 上下文对象
    */
  setup(props, context) {
    const num = 48
    return {num}
  }
};

setup(props, context) {
    context.attrs
    context.slots
    context.emit
 }

ref (vue3 api)

用于将定义的变量作为一个动态的双向绑定的值给抛出去

但是只能定义单个变量， 所有的赋值取值操作都需要通过value属性

import { ref } from 'vue'
// -------------------------------
const num = ref(48)
console.log(num.value)
num.value = 99

reactive

用于将多个变量进行一个动态的绑定

不能使用扩展运算符，只能通过上级对象点出来

import { reactive } from 'vue'
// -------------------------------
const data = reactive({
    name: 'kkk',
    mmm: 4848
})
return {
    data
}
// ——————————————————————————————————————————————
data.name

toRefs

用于将 reactive 返回的对象 进行扩展 允许使用扩展运算符，

import { toRefs } from 'vue'
// -------------------------------
const data = reactive({
    name: 'kkk',
    mmm: 4848
})
const dataRefs = toRefs(data);
return {
    ...dataRefs
}
// ——————————————————————————————————————————————
name

watch

监听函数 定义在setUp函数中

import { watch } from 'vue'
// -------------------------------
const kk = ref(48)
const ll = reactive({
	ii: 48
})
watch(kk, (newData, oldData)=> {})
watch([kk, ()=>ll.ii], (newData, oldData)=> {})

生命周期

定义在setUp

computed

计算属性 定义在setUp函数中

import { computed, ref, reactive, toRefs } from 'vue'
// -------------------------------
const state = ref({
	num: 6
})
const getDoubleNum = computed(() => state.num * 2)
return {getDoubleNum}
//---------------------------
let num = ref(99)
const state = reactive({
      myName: computed(() => num*5) 
})
let refsData = toRefs(state)
return {...refsData}