Vue3 学习2

Vue3核心语法

watchEffect

• 官网：立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行该函数。

• watch对比watcheffect

  1.都能监听响应式数据地变化，不同的是监听数据变化的方式不同

  2.watch：要明确指出监视的数据

  3.watchEffect：不用明确指出监视的数据（函数中用到哪些属性，那就监视哪些属性）

    <template>
    	<div class="person">
    	<h2>需求：当水温达到60度，或水位达到80cm时，给服务器发请求	</h2>
    	<h2>当前水温：{{ temp }}℃</h2>
    	<h2>当前水位：{{ height }}cm</h2>
    	<button @click="changeTemp">水温+10</button>
    	<button @click="changeHeight">水位+10</button>
    	</div>
    </template>
  
    <script lang="ts" setup name="Person">
    	import {ref,watch, watchEffect}from 'vue'
    	//数据
    	let temp= ref(10)
    	let height = ref(0)
    	//方法
    	function changeTemp(){
    		temp.value +=10
    	}
    	function changeHeight(){
    		height.value +=10
    	}
  
    	//监视
    	 /* watch([temp,height],(value)=>{
    		//console.log(newValue,oldValue);
    		//从value中获取最新的水温（newTemp）、水位（newHeight）
    		let[newTemp,newHeight] = value
    	//逻辑
    	if(newTemp >=60 || newHeight >=80){
  		console.log('给服务器发请求');
    	}
    }) */
  
     //监视 watchEffect实现
    	watchEffect(()=>{
    		if(temp.value >=60 || temp.value >=80){
    		console.log('给服务器发请求');
    		}
    	})
    </script>

标签的ref属性

作用：用于注册模板引用

• 用在普通DOM标签上，获取的是DOM节点。
• 用在组件标签上，获取的是组件实例对象。

TS中的_接口_泛型_自定义

	<template>
		<div class="person">
			???
		</div>
	</template>

	<script lang="ts" setup name="Person">
		import{type personInter,type Persons} from '@/types'
		//let person:personInter = {id:'asjcnjjanjb',name:'张三',age:60}

		let personList:Persons = [
			{id:'asjcnjjanjb',name:'张三',age:60},
			{id:'asjcnjjanjb',name:'李四',age:18},
			{id:'asjcnjjanjb',name:'王五',age:6}
		]
	</script>

props的使用

！！！重点理解

生命周期

组件的生命周期：

创建（created）：创建前（beforeCreate），创建完毕

挂载（mounted）：挂载前，挂载完毕

更新：更新前，更新完毕

销毁：销毁前，销毁完毕

生命周期、生命周期函数、生命周期钩子

<script>

	export default {
	/* eslint-disable */
		name: 'Person',
	//数据
	data(){
	 return{
  		sum:1
	}
},
	//方法
	methods:{
		add(){
  		this.sum +=1
	}
},
 //创建前的钩子
	beforeCreate(){
	 console.log('创建前');

	},
//创建完毕的钩子
	created(){
		console.log('创建完毕');
	},
//挂载前
	beforeMount(){
		console.log('挂载前');
	},
//挂载完毕
	mounted(){
		console.log('挂载完毕');
	},
//更新前
	beforeUpdate(){
		console.log('更新前');
	},
//更新完毕
	updated(){
		console.log('更新完毕');
	},
//销毁前
	beforeDestroy(){
		console.log('销毁前');
	},
//销毁完毕
	destroyed(){
		console.log('销毁完毕');
	}
}

</script>

• 概念：vue组件实例在创建时要经历一系列初始化步骤，在此过程中vue会在合适的时机，调用特定的函数，从而让开发者有机会在特定阶段运行自己的代码，这些特定的函数统称为：生命周期钩子

• 规律：创建、挂载、更新、销毁每个阶段有两个钩子，一前一后

• vue2的生命周期

• vue3的生命周期：

    <script lang="ts" setup name="Person">
    	import {ref,onBeforeMount,onMounted, onUpdated,onBeforeUpdate,onBeforeUnmount,onUnmounted} from 'vue'
  
       //数据
    	let sum = ref(0)
    	//方法
    	function add(){
    		sum.value +=1
    	}
    	//创建
    	console.log('创建');
  
    	 //挂载前
    	onBeforeMount(()=>{
    		console.log('挂在载前');
    	})
    	//挂载完毕
    	onMounted(()=>{
    		console.log('子--挂载完毕');
    	})
     //更新前
    	onBeforeUpdate(()=>{
    		console.log('更新前');
    	})
    //更新完毕
    	onUpdated(()=>{
    		console.log('更新完毕');
    	})
    //卸载前
    	onBeforeUnmount(()=>{
    		console.log('卸载前');
    	})
    //卸载完毕
    	onUnmounted(()=>{
    		console.log('卸载完毕');
    	})
    </script>

Hooks