Vue3+TypeScript使用computed和watch

Vue3+TypeScript使用computed

方法一：直接用function

<template>
	<ul v-for="numbers in sets">
		<li v-for="n in even(numbers)">{{n}}</li>
	</ul>
</template>

<script lang="ts" setup>

import {onMounted,reactive,ref,toRaw} from "vue" ;

let sets = reactive( target:[[ 1,2,3,4,5 ],[6,7,8,9,10]])

function even(numbers:[]){
	return numbers.filter( predicate: number => number % 2 === 0)
}
</script>

方法二：直接使用computed

<template>
	<div>
		<input type="text" v-model="firstname ">
		<input type="text" v-model="lastname">
		<br />
		{{firstname }} -- {{lastname}}
		<br />
		{{fn}}
		<br />
		{{fnn()}}
	</div>
</template>
<script lang="ts" setup>
import {onMounted,eactive,ref,toRaw,computed} from "vue";

let firstname = ref("");
let lastname = ref("")

const fn = computed (()=>{
	return firstname.value + lastname.value ;
})
function fnn() {
	return firstname.value + lastname.value;
}
</ script>

Vue3+TypeScript使用watch

<template>
	<div>
		<input type="text" v-model="ddd">
	</div>
</template>

<script lang="ts" setup>
import {onMounted,reactive,ref，toRaw , computed , watch} from "vue ";

let ddd = ref("");

watch( ddd, (newValue) => {
	console.log(newValue)
 },{immediate:true})
 
 </script>