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;他可以对数组或对象的内部元素的修改进行响应式变化。

生命周期


…未完待续…

Logo

前往低代码交流专区

更多推荐