生命周期

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


//函数式编程都需要先引入在使用,生命周期对比如下
onBeforeMount(() => {
    })
onMounted(() => {
    })
onBeforeUpdate(() => {
    })
onUpdated(() => {
    })
onBeforeUnmount(() => {
    })
onUnmounted(() => {
    })
onActivated(() => {
    })
onDeactivated(() => {
    })
onErrorCaptured(() => {
    })

获取dom节点

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

组件传值

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

父组件与子组件通信

//父组件
<template>
    <ComponentA ref="refA"/>
</template>
<script 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 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)