1.setup
setup() 函数是 vue3 中，专门为组件提供的新属性。它为我们使用 vue3 的 Composition API 新特性提供了统一的入口，setup 函数会在 beforeCreate 之后，created 之前执行, vue3 也是取消了这两个钩子，统一用 setup 代替, 该函数相当于一个生命周期函数， setup 内部没有 this指向 , 但能通过getCurrentInstance()获取
setup(props, context) {console.log(props, context);
}
//获取当前vue实例
const { proxy } = getCurrentInstance();
2.ref
ref() 函数用来根据给定的值创建一个响应式的数据对象，返回的是一个对象，这个对象上包含一个value属性，但template中不需要
<script setup>const userList = ref([]);console.log(userList.value)
</script>
3.reactive和toRefs
template中需要使用reactive里的内容时, 使用toRefs并结构赋值起来
const data = reactive({form: {},queryParams: {pageNum: 1,pageSize: 10,},rules: {}
});
const { queryParams, form, rules } = toRefs(data);
因为toRefs() 函数可以将 reactive() 创建出来的响应式对象，转换为普通的对象，只不过，这个对象上的每个属性节点，都是 ref() 类型的响应式数据, 所以当访问queryParams时也需要加上value
console.info(queryParams.value)
4.computed
1.函数式写法
const obj = ref({arr: ["foo", "bar"],
});
const getObjLength = computed(() => {return obj.value.arr.length >= 3 ? "Yes" : "No";
});
2.对象写法
const firstName = ref('John')
const lastName = ref('Doe')const fullName = computed({// getterget() {return firstName.value + ' ' + lastName.value},// setterset(newValue) {// 注意：我们这里使用的是解构赋值语法[firstName.value, lastName.value] = newValue.split(' ')}
})
5.watch
const { proxy } = getCurrentInstance();
watch(deptName, (val) => {proxy.$refs["deptTreeRef"].filter(val);
});
6. defineProps
const props = defineProps({// 是否加载显示loading: {type: Boolean,default: false,},// 表格内数据data: {type: Array,//注意是函数的形式,与vue2有区别default() {return []},}
}
reactive 和 ref 的区别?
1.ref用于定义基本类型和引用类型，reactive仅用于定义引用类型
2.reactive只能用于定义引用数据类型的原因在于内部是通过ES6的Proxy实现响应式的，而Proxy不适用于基本数据类型
3.ref定义对象时，底层会通过reactive转换成具有深层次的响应式对象，所以ref本质上是reactive的再封装
4.在脚本里使用ref定义的数据时，记得加.value后缀
5.在定义数组时，建议使用ref，从而可避免reactive定义时值修改导致的响应式丢失问题
vue3中配置自动按需导入auto-import
//vite.config.js
import autoImport from 'unplugin-auto-import/vite'
export default function createAutoImport() {return autoImport({imports: ['vue','vue-router','pinia'],dts: false})
}
删除有序数组中的重复项)
)
