vue3中＜script setup＞＜/script＞的文件使用方式

1、定义响应式数据

什么是响应式数据 ：当数据发生改变时，会重新解析dom，渲染页面

<template>
  <div>usrname{{ username }}</div>
  <div>person的name{{ person.name }}</div>
  <div>person的age{{ person.age }}</div>
  <div>person的sex{{ person.sex }}</div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
let username = ref("张三");
let person=reactive({
  name:'李四',
  sex:'男',
  age:'23'
})
</script>

<style scoped>
</style>

响应式测试：通过对数据username，person的修改，观察页面更新

  <!-- 在template中添加按钮，用于测试username属性 -->
  <button @click="changeName">username++</button>

// 通过点击事件验证响应式
const changeName=()=>{
  console.log('点击了btn');
  // 基本类型数据，需要通过.value获取数据
  username.value+='1'
}

结果如下图

 2、生命周期函数

 创建组件test用来测试常用的生命周期函数

<template>
    <h2 @click="count++">test组件{{ count }}</h2>
</template>
<script setup lang="ts">
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from 'vue'
let count = ref(0)
// 页面挂载之前
onBeforeMount(() => {
    console.log('页面挂载之前onBeforeMount');
})
// 页面挂载
onMounted(() => {
    console.log('页面挂载onMounted',);
})
// 任意响应式数据发生改变之前
onBeforeUpdate(() => {
    console.log('onBeforeUpdate');
})
// 任意响应式数据发生改变
onUpdated(() => {
    console.log('响应式数据改变onUpdated');
})
// 组件销毁之前
onBeforeUnmount(() => {
    console.log('组件销毁之前onBeforeMount');
})
// 组件实例被卸载时，用于去掉定时器，window下的监听事件等等
onUnmounted(() => {
    console.log('test组件被卸载');
})

</script>
<style>

</style>

 将test组件在app.vue中引入

<template>
  <test v-if="showtest"></test>
  <button @click="changetest">销毁/挂载test组件</button>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import test from './components/test.vue'
let showtest = ref(true)
const changetest = () => {
  showtest.value = !showtest.value
}

</script>

<style scoped>

</style>

测试结果

 3、计算属性

由计算属性得出来的结果是响应式数据，

3、1简易写法

在下列代码中，点击两个被加数，结果都会重新计算，先使用简易写法实现功能

<template>
<h2 @click="count1++">{{count1}}</h2>
<h2>+</h2>
<h2 @click="count2++">{{count2}}</h2>
<h2>=</h2>
<h2>{{count3}}</h2>
</template>

<script setup lang="ts">
import {ref,computed} from 'vue'
let count1=ref(1)
let count2=ref(1)
// 简易写法，得到的count3为响应式数据
 let count3=computed(()=>{
     return count1.value+count2.value
 })


</script>

<style></style>

3、2完整写法

当对结果进行修改时，需要使用完整写法来实现

当count3发生改变时，会调用computed中的set函数

<template>
<h2 @click="count1++">{{count1}}</h2>
<h2>+</h2>
<h2 @click="count2++">{{count2}}</h2>
<h2>=</h2>
<h2 @click="count3++">{{count3}}</h2> 
</template>

<script setup lang="ts">
import {ref,computed} from 'vue'
let count1=ref(1)
let count2=ref(1)

// 完整写法
let count3=computed({
    get(){
        return count1.value+count2.value
    },
    set(value){
        count1.value=0
        count2.value=value
    }
})
</script>

<style></style>

4、watch属性的使用

在vue中，watch主要用于监听数据发生变化之后，执行某种操作。实际应用有：路由监听，商城页面的联动展示。

以下是vue3中的watch使用，在上述案例中，computed可以监听到count1，count2的变化，同理也可以使用watch来实现

4、1 对单个ref属性的监听

对于单个ref属性的监听
watch(count3,(newValue,oldValue)=>{
    console.log('newValue',newValue);
    console.log('oldValue',oldValue);
})

当count3发生变化时，会打印出新旧的值

4、2 对多个ref属性的监听

对多个ref属性进行监听
watch([count1,count2],(newValue,oldValue)=>{
    console.log('newValue',newValue);
    console.log('oldValue',oldValue);
})

将要监听的属性用数组进行包裹，会同时打印出count1，count2两个属性的新旧值

4、3 对reactive数据进行监听

<template>
    <div>名字：{{person.name}}</div>
    <div>性别：{{person.sex}}</div>
    <div>年龄：{{person.age}}</div>
    <button @click="changePerson"></button>
</template>
<script setup lang="ts">
import { reactive, watch } from 'vue';
// 定义reactive数据
let person=reactive({
    name:'java',
    age:20,
    sex:'女'
})
// 修改name的值
const changePerson=()=>{
    person.name='python'
}
// 对reactive进行监听
watch(person,(newValue,oldValue)=>{
    console.log(newValue,oldValue);  
},{deep:true})
</script>
<style></style>

以上代码表示对reactive类型数据进行监听，但是无法得到oldValue的值，结果如图下所示

 得到的都是newValue的值，此时deep：true属性无效

4、4 对reactive数据的某个属性进行监听

// 对某个属性进行监听
watch(()=>person.name,(newValue,oldValue)=>{
    console.log(newValue,oldValue);
},{immediate:true,deep:true})

其中{deep:true}时默认开启的

下列是对两个及以上的reactive属性进行监听，与ref数据监听同理

watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
    console.log(newValue,oldValue);
},{immediate:true,deep:true})

结果如图所示，其中immediate:true 表示立即监听