Vue3 setup 语法糖中一些常用操作

生命周期

<script lang="ts" setup>
import { onMounted, onUpdated, onUnmounted } from 'vue'
	onMounted(()=> {
	
	})
	onUpdated(()=> {
	
	})
	onUnmounted(()=> {
	    
	})
</script>

函数式编程都需要先引入在使用,生命周期对比如下

	/**
	beforeCreate -> use setup()
	created -> use setup()
	beforeMount -> onBeforeMount
	mounted -> onMounted
	beforeUpdate -> onBeforeUpdate
	updated -> onUpdated
	beforeDestroy -> onBeforeUnmount
	destroyed -> onUnmounted
	errorCaptured -> onErrorCaptured
	*/
	onBeforeMount(() => {
    })
    onMounted(() => {
    })
    onBeforeUpdate(() => {
    })
    onUpdated(() => {
    })
    onBeforeUnmount(() => {
    })
    onUnmounted(() => {
    })
    onActivated(() => {
    })
    onDeactivated(() => {
    })
    onErrorCaptured(() => {
    })

获取dom节点

<template>
<div ref="divDom"></div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
const divDom = ref<HTMLElement|null>(null)
onMounted(()=> {
console.log(divDom.value) //获取dom节点
})
</script>

双向绑定

<template>
<div>
    {{msg}}
    {{data.name}}
</div>
</template>
<script lang="ts" setup>
import { ref,reactive } from 'vue';
const msg = ref<string>('双向绑定')
const data = reactive<any>({ //数据集合 可以是任意组合
    name: '张三',
    age: 10
})
</script>

组件传值

• 子组件接受参数用defineProps语法糖

const props = defineProps({
  option: Object,
  id: {
    type: String,
    default: "echart-box",
  }
});

Watch

1、

父组件与子组件通信

• 父组件调用子组件方法

//父组件
<template>
    <ComponentA ref="refA"/>
</template>
<script lang="ts" setup>
import ComponentA from '@/components/component.vue'
import { ref, onMounted } from 'vue'
const comA = ref<InstanceType<typeof ComponentA>>()
onMounted(()=> {
   ComponentA .value?.initBideo()
})
</script>
//子组件
<template>
    子组件
</template>
<script lang="ts" setup>
const initBideo = () => {
	console.log('子组件方法')
}
defineExpose({
  //将子组件属性暴露出去
  initBideo
});
</script>

• provide && inject

//父组件中
//父组件传递响应属性
provide('info', obj)
//子组件里接收响应属性
inject('info')

• context形参
  setup函数的第二个形参是一个上下文对象，就是vue2.x中的this，在vue 3.x中，它们的访问方式如下

setup(props, context) {
  context.slots
       context.emit
       context.refs
   }
import { onMounted, useSlots, useAttrs } from "vue";
const slots = useSlots()
console.log(slots) //插槽
const attrs = useAttrs()
console.log(attrs)//属性

• computed
  计算属性 可创建只读，和可读可写两种
  computed() 用来创建计算属性，computed() 函数的返回值是一个 ref 的实例

onst count = ref(1)
const doblueCount = computed(() => count.value * 2)
// console.log(doblueCount.value) // 打印 2
// doblueCount.value++ //报错
// 创建可读可写的计算属性
// 在调用computed()函数的时候传入一个包含get和set的对象，就可以得到一个可读可写的计算属性了。
// 创建一个响应式数据
// 根据count的值创建一个响应式的计算属性， 它会根据ref自动计算并且返回一个新的ref
const computedCount = computed({ //创建可修改的computed属性
    get: () => count.value + 1,
    set: (val) => count.value = val - 1
})
computedCount.value = 6
console.log(computedCount.value, count.value)
setTimeout(() => {
    count.value = 15
    console.log(computedCount.value, count.value)
}, 1000)

//后续更新