vue3 常用的知识点

setup:容许在script当中书写组合式API 并且vue3的template不再要求唯一的根元素

<script setup>

const name = 'app';
</script>

组合式API的用法：

可以直接在script标签中定义变量或者函数，然后直接在template当中使用

<template>
  {{message}}
  <button @click="logMessage">log</button>
</template>

<script setup>
const message = 'this is message'
const logMessage = () =>{
	console.log("logMessage")
}
	
</script>

响应式变量reactive的使用：

<template>
  <button @click="setCount">{{state.count}}</button>
</template>

<script setup>
//导入函数
import {reactive} from 'vue'
//执行函数 传入一个对象类型的参数
const state = reactive({
	count:0
})

const setCount = () =>{
	state.count++
}
	
</script>

响应式变量ref的使用：

<template>
  <button @click="setCount">{{count}}</button>
</template>

<script setup>
//导入函数
import {ref} from 'vue'
//执行函数 传入一个对象类型或者简单数据类型的参数
const count= ref(0)

const setCount = () =>{
	count.value++
}
	
</script>

computed计算属性

<template>
  <div>
	  原始响应式数据：{{list}}
  </div>
  <div>
	  计算属性数组{{computedList}}
  </div>
</template>

<script setup>
	//原始响应式
	import { ref } from 'vue'
	//导入computed
	import { computed } from 'vue'
	const list = ref([1,2,3,4,5,6,7,8])
	//执行计算函数
	const computedList = computed(()=>{
		return list.value.filter(item=>item>2)
	})
	
	setTimeout(()=>{
		list.value.push(9,10)
	},3000)
</script>

watch函数：侦听一个或者多个数据的变化，数据变化时执行的函数。两个额外的参数1.immediate （立即触发） 2.deep（深度监听）

<template>
  <div>
	  <button @click="setCount">+{{count}}</button>
  </div>
</template>

<script setup>
	
import {ref,watch} from 'vue'
const count = ref(0)
const setCount = () => {
  count.value++
}
watch(count,(newVal,oldVal)=>{
	console.log('count变化了',newVal,oldVal);
})
	
</script>

watch监听对象数据的某一个属性：

<template>
  <div>
	  <button @click="changeName">name:{{state.name}}</button>
	  <button @click="changeAge">age:{{state.age}}</button>
  </div>
</template>

<script setup>
	
import {ref,watch} from 'vue'
const state = ref({
	name:'cc',
	age:18
})
const changeName = () => {
  state.value.name='aa'
}
const changeAge = ()=>{
	state.value.age=20
}
//当只有age属性发生变化时才会触发回调函数
watch(
	() => state.value.age,
	() => {
		console.log('age变化了');
	}
)
	
</script>

生命周期函数：

父组件给子组件传值：
1.父组件给子组件绑定属性
2.子组件内部通过props选项接收

父组件
<template>
<div class="fathher">
	<h2>父组件</h2>
	<!-- 传入想要传的值 message为固定的值，count为响应式的值-->
	<son :count="count" message="father message"></son>
</div>
</template>

<script setup>
//setup语法糖下局部组件无需注册直接可以使用	
import Son from './son.vue'
import {ref} from 'vue'
const count = ref(100)

setTimeout(()=>{
	count.value = 200
},3000)
	
</script>


子组件：
<template>
	<div class="son">
		<h3>子组件Son</h3>
		父组件传入的数据:{{message}}-{{count}}
	</div>
</template>

<script setup>
	//用defineProps接收父组件传的值
    const  props = defineProps({
		message:String,
		count:Number
	})
	console.log(props);
</script>

组合式API下的子传父：
1.父组件中给子组件标签通过@绑定事件
2.子组件内部通过$emit方法触发事件

父组件：

<template>
<div class="fathher">
	<h2>父组件</h2>
	<!-- 1.绑定事件 -->
	<son @get-message="getMessage"></son>
</div>
</template>

<script setup>
//setup语法糖下局部组件无需注册直接可以使用	
import Son from './son.vue'

const getMessage = (msg) => {
	console.log(msg)
}

</script>

子组件：

<template>
	<div class="son">
		<h3>子组件Son</h3>
		<button @click="sendMsg">触发自定义事件</button>
	</div>
</template>

<script setup>
	//2.通过defineEmits() 定义事件
	const emit = defineEmits(['get-message'])
	const sendMsg = () =>{
		emit('get-message','this is son message')
	}
</script>

通过ref获取标签或者子组件

在默认情况下setup语法糖组件内部的属性和方法是不开发给父组件访问的，可以通过defineExpose制定哪些属性和方法允许访问

父组件：

<template>
<div class="fathher">
	<h1 ref="h1Ref">我是h1</h1>
	<son ref="comRef"></son>
</div>
</template>

<script setup>
import Son from './son.vue'
import {ref,onMounted} from 'vue'
const h1Ref = ref(null)
const comRef = ref(null)

onMounted(()=>{
	console.log(h1Ref.value)
	console.log(comRef.value)
})

</script>


子组件
<template>
	<div class="son">
		<h3>子组件Son</h3>
		
	</div>
</template>

<script setup>
	import {ref} from 'vue'
	const name = ref('test name')
	const setName = () => {
		name.value = 'test new name'
	}
	
	defineExpose({
		name,
		setName
	})
</script>

跨层传递普通数据
1.顶层组件通过provide函数提供数据
2.底层组件通过inject函数获取数据