当前位置：首页 > news >正文

vue3(入门，setup,ref,计算属性,watch)

news 来源：原创 2025/6/3 22:55:36

vue3(入门，setup,ref,计算属性,watch)

项目创建

请添加图片描述

在这里插入图片描述

Vue2（选项式api）

分散

在这里插入图片描述

vue3（组合式api）

在这里插入图片描述

setUp（）

在这里插入图片描述

setup返回值可以是一个渲染函数

面试题：
setup和vue2中的配置项可以同时存在吗？
可以。不建议在vue3中写vue2中的东西。data（旧的）可以读取到setup（新的）中的数据，setup加载比vue中的要早。

在这里插入图片描述

setup语法糖

不用返回

在这里插入图片描述

插件定义组件名

在这里插入图片描述

响应式数据(ref,reactive)

一：ref定义基本类型数据

在这里插入图片描述

二：reactive应式对象

在这里插入图片描述

<template><dev class="person"><h2>汽车信息：一辆{{car.brand}}车，价值{{car.price}}万</h2><button @click="changePrice">修改价格</button><h2>游戏列表：</h2><ul><li v-for="g in games" :key="g.id">{{g.name}}</li></ul><button @click="changFirstGame">修改第一个游戏名字</button></dev>
</template><script lang="ts">export default {name:'Person',}
</script>
<script lang="ts" setup>
import {reactive} from 'vue'let car = reactive({brand:'奔驰',price:100})let games = reactive([{id:'1',name:'AAA'},{id:'2',name:'BBB'},{id:'3',name:'CCC'}])function changePrice(){car.price += 1;}function changFirstGame(){games[0].name = 'VVVV'}
</script><style>.person {background-color: aqua;border-radius: 10px;box-shadow: 0 0 10px;padding: 20px;position: absolute;top: 200px;right: 200px;}
</style>

ref ---->基本类型响应数据（基本，对象都可）

reactive —>对象类型响应数据（只能）

在这里插入图片描述

三：toRefs和toRef

直接解构后不是响应式
在这里插入图片描述

使用toRefs：把Reactive定义的对应传为多个ref响应式对象（解构）

toRef一个一个取（解构）
在这里插入图片描述

在这里插入图片描述

计算属性（computed）

在这里插入图片描述

watch监视

在这里插入图片描述

情况一：监视ref定义的基本数据类型

在这里插入图片描述
解除监视

情况二：监视ref定义的对象类型的数据

<template><div class="person"><h1>情况二：监视ref定义的对象类型的数据</h1><h2>姓名：{{person.name}}</h2><h2>年龄：{{person.age}}</h2><button @click="changeName">修改姓名</button><button @click="changeAge">修改年龄</button><button @click="changePrson">修改数据</button></div>
</template><script lang="ts">export default {name:'Person',}
</script>
<script lang="ts" setup>
// 监视 引入watchimport {ref,watch} from 'vue'let person = ref({name:'张三',age:18})
function changeName(){person.value.name += '_'
}
function changeAge(){person.value.age += 1
}
function changePrson (){person.value = {name:'lisi',age:20}
}
// 监视的是对象的地址值，若想监视对象内部属性的变化，需要开启深度监视
watch(person,(newObj,oldObj)=>{console.log('数据改变了',newObj,oldObj)
}, {deep:true,immediate:true})
// immediate初始化就开始监视</script><style>.person {background-color: #f2f2f2;border-radius: 10px;box-shadow: 0 0 10px;padding: 20px;position: absolute;top: 200px;right: 200px;}
</style>

在这里插入图片描述