vue3语法糖基本使用

// vue3中使用setup的语法糖
<script lang="ts" setup>
// 那么props，emit，attrs如何获取,按需引入
import { defineEmits, defineProps,useSlots, useAttrs,defineExpose,toRefs,toRef,ref,reactive,onMounted, onUpdated,computed,watch  } from "vue";
// defineProps接收参数
// defineEmits传参
// useSlots插槽
// useAttrs还没使用过
// defineExpose获取子页面的参数用法ref='ablout'
// toRefs接收一个对象作为参数，它会遍历对象身上的所有属性，然后挨个调用toRef执行
// toRef本质是引用是响应式数据与原始数据有关系,修改响应式数据是会影响到原始数据,修改通过toRef创建的响应式数据，不会触发UI界面的更新。toRef接收两个参数，第一个参数是哪个对象，第二个参数是对象的哪个属性
// ref本质是改变,页面会刷新,基本响应式数据,不会影响原数据,想拿到ref里面的数据需要属性.value
// reactive引用响应式数据
// onMounted的使用onMounted(() => { console.log("组件视图挂载完成") });
// onUpdated的使用onUpdated(() => { console.log("组件更新完成") });
//computed的使用computed(()=>{ return count.value* 2; })
// watch的使用watch(监听的对象, (v1, v2) => {
      // v1 是改变以后的新值
      // v2 是改变前的值
      console.log(v1, v2)
      // 要点：侦听普通函数可以获取修改前后的值，被侦听的数据必须是响应式的
    })

const emit = defineEmits(["change"]); // 声明触发事件 change
// 使用
const sonClick = () =>{
    emit('change' , props.foo)
}
// 获取传过来的值
const props = defineProps({ foo: String });   // 获取props
// 或者在父组件中通过ref='xxx’的方法来获取子组件实例，子组件使用了script setup语法糖,则子组件的数据需要用defineExpose 的方式导出，否则不会暴露属性。
import { ref ,defineExpose} from "vue";
// 用法
defineExpose({ 变量名 })
// 组件内守卫
		beforeRouteEnter:(to,form,next)=>{
			//to 到哪里去
			//form 从哪里来
			next( vm => {
				vm.data.routerIndex = form.name;
			})
		},
</script>