Vue3 入门基本语法使用

1.ref

ref主要定义基本数据类型，不仅可以用在数据的响应式，还可以绑定DOM元素

<template>
  <div>
    {{num}}
  </div>
  <div>
    <button @click="handleChange">Num++</button>
  </div>
</template>
<script setup  lang='ts'>
import { ref } from 'vue'
let num = ref(1)
 	console.log(num); // { "__v_isShallow": false, "__v_isRef": true, "_rawValue": 1, "_value": 1 }
const changeNum = () => {
	num.value += 1 //num 数据存在vlue，修改需要修改value的值，数据显示因为vue3数据模板已结处理，直接{{num}}就能显示
}
</script>

2. reactive

reactive可以传递基础数据类型和引用数据类型，基础数据类型不会被包装成响应式数据

<template>
  <div>
    {{obj.name}} {{obj.age}}
  </div>
</template>
<script setup  lang='ts'>
import { reactive } from 'vue'
let obj = reactive({
	name: 'aa',
	age: 10,
})
console.log(obj)
//ref定义也能实现数据响应，原理也是判断转换reactive，使用ref定义相当于多加了一层对象
let obj = ref({
	name: 'aa',
	age: 10,
})
console.log(obj.value)
</script>

3.toRef、toRefs

toRef和toRefs把对象的数据进行分解和扩散，这个对象针对的是响应式对象并非是普通对象。

toRef、toRefs区别

toRef: 复制 reactive 里的单个属性并转成 ref
toRefs: 复制 reactive 里的所有属性并转成 ref

<template>
  <div>
    {{name}} {{age}}
  </div>
  <div>
    <button @click="changeName">Num++</button>
  </div>
</template>
<script setup  lang='ts'>
import { reactive, toRefs} from 'vue'
let obj = reactive({
	name: 'aa',
	age: 10,
})
console.log(obj)
let { name, age } = toRefs(obj)	
const changeName = () => {
	name.value = 'bb'// toRef、toRefs和ref同理，需要找到绑定value上的值，实现数据响应,但不同的是toRefs是延续响应，ref是创建响应
}
</script>

4. computed

<template>
  <div>
    {{name}} {{age}}
    <p> {{total}} </p>
  </div>
  <div>
    <button @click="changeTotal">Num++</button>
  </div>
</template>
<script setup  lang='ts'>
import { reactive, toRefs, computed} from 'vue'
let obj = reactive({
	name: 'aa',
	age: 10,
	arr: [2,4,6]
})
console.log(obj)
let { name, age } = toRefs(obj)	
const changeTotal = () => {
	obj.arr.push(2) //数组改变，total值响应修改
}
const total = computed(() => {
	obj.arr.reduce((pre,cur) => {
		return pre + cur
	})
})
</script>

5. watch和watchEffect,

watch写法上支持一个或者多个监听源，这些监听源必须只能是getter/effect函数(ref数据，reactive对象，或者是数组类型)

watch和watchEffect区别：

两者都可以监听 data 属性变化； watch 需要明确监听哪个属性；而 watchEffect 会根据其中的属性，自动监听其变化。

<template>
  <div>
    {{name}} {{age}}
    <p> {{total}} </p>
  </div>
  <div>
    <button @click="changeName">Num++</button>
  </div>
</template>
<script setup  lang='ts'>
import { reactive, toRefs, computed} from 'vue'
let obj = reactive({
	name: 'aa',
	age: 10,
	arr: [2,4,6]
})

let { name, age } = toRefs(obj)	
const changeName = () => {
	obj.name = 'bb'
}
watch([name,age], (nv, ov) => {
	console.log(nv, '改变后的值');
	console.log(ov, '改变前的值');
})
watchEffect(() => {
  console.log("watchEffect");
  console.log(name.value, "name");
  console.log(age.value, "age");
});


</script>