TS和vue3

TS基础

基础变量

语法：例：定义变为的属性为booler, string, number, number[], string[]等等
let isDone: boolean = false;
let isDone: any[]= [1, ‘aaa’];

数组的定义：
方法一： let list: number[] = [1, 2, 4];
方法二： let lsit:Array<number> = [1, 2, 4] // 数组泛型

元组定义：
let list: [string, number] = [‘aaa’, 20];
注：元组规定初始定义元素的类型和长度，但是在此后可以通过push等方法进行增减，但是增减类型必须满足定义类型的其中之一
例： list.push(‘bbb’)

vue3

升级vue3的好处

打包体积减小，优化vdom使运行速度变快；更改了编写结构，使代码不会分散

setup

ref、 reactive、toRefs

import { ref, reactive, toRefs } from ‘vue’

• ref

都是将数据变成响应式数据；ref主要是用于定义基础数据类型，例：
const num1 = ref(10) // 取值则需要使用 num.value

• reactive

reactive作用同ref，但是是用于定义复杂的数据类型比如数组和对象
const num2 = reactice({a: 10; b: ‘x’})
注：reactice无法直接将基础数据变成响应式数据，reactive并不会将它包装成porxy对象，
例const num3 = reactice(100) 无法将num3变成响应式数据。

ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, ref定义的数据访问的时候要多一个.value

reactive也可以看做是vue2中的data函数

• toRefs
  正常若要使用user里的属性则需要通过user.xxx进行获取
  使用toRefs后通过解构获取值，并进行调用和修改，修改也具有响应式属性，如果只是reactive定义的参数进行解构是无法进行响应式修改的。

   <p>{{name}}</p>
   <p>{{age}}</p>
   <button type="button" @click="name = 'kangkang'"></button>
...
setup () {
	const user = reactive({ name: "Alice", age: 12 });
	const newUser = toRefs(user)
	return {
		...newUser 
		user,
	}
}

computed 和 watch

import { ref, computed,} from 'vue'
setup () {
	const count= ref(1)
	const newValue = computed(() => {
		return count.value * 2	})
	// 一个监听写一条
	watch(count, (newVal, oldVal) => {
		console.log(newVal, oldVal)
	})
	// 同时监控多个参数；如果要监听的参数是对象中的某一个，需要通过函数返回，如果只是user.name是没有响应式属性的
	watch([count, () => user.name], (newVal, oldVal) => {
	  console.log('oldvalue:' + oldVal + ' newValue: ' + newVal);
	})
}

proxy

vue3使用proxy代替原来的Object.defineProperty；他可以对数组或对象的内部元素的修改进行响应式变化。

生命周期

…未完待续…