vue3语法笔记

1、 动态类名

1. 对象语法：

<div :class="{ active: isActive, 'text-danger': hasError }"></div>
在上面的例子中，active 和 text-danger 类名将根据 isActive 和 hasError 变量的值动态添加到 div 元素上。

2. 数组语法：

<div :class="[activeClass, errorClass]"></div>
在这个例子中，activeClass 和 errorClass 变量会被解析为类名，并且动态地添加到 div 元素上。

3. 直接绑定到一个对象：

<div :class="classObject"></div>
在这里，classObject 是一个在 Vue 实例中定义的计算属性，它返回一个包含类名的对象。

4.使用数组和对象结合的方式：

<div :class="[isActive ? activeClass : '', errorClass]"></div>

2、定义变量

ref
reactive
toRefs

let preson=reactive({
	name:'zhangsan',
	age:19
})

//直接解构不是响应式，需要加toRefs
let {name,age}=toRefs(preson)

toRef

let preson=reactive({
	name:'zhangsan',
	age:19
})

变成响应式
let name=toRef(preson,'name')
console.log(name.value)

ref在组件上使用

ref传递给子组件，可以获取到子组件实例

<!-- 父组件App.vue -->
<template>
  <Person ref="ren"/>
  <button @click="test">测试</button>
</template>

<script lang="ts" setup name="App">
  import Person from './components/Person.vue'
  import {ref} from 'vue'

  let ren = ref()

  function test(){
    console.log(ren.value.name)
    console.log(ren.value.age)
  }
</script>


<!-- 子组件Person.vue中要使用defineExpose暴露内容 -->
<script lang="ts" setup name="Person">
  import {ref,defineExpose} from 'vue'
	// 数据
  let name = ref('张三')
  let age = ref(18)
  /****************************/
  /****************************/
  // 使用defineExpose将组件中的数据交给外部
  defineExpose({name,age})
</script>

生命周期

创建 挂载 更新 销毁 4步

常用生命周期
onMounted
onUpdated
onBeforeUnmount