目录
一、setup详解
二、ref详解
三、computed详解
四、watch详解
（1）监听单个数据的变化
（2）监听多个数据的变化
（3）immediate
（4）deep
（5）精确监听对象的某个属性
五、生命周期
一、setup详解
setup函数在组件实例化时执行，该函数会先于beforeCreate钩子函数执行。在setup函数中，我们可以使用其他的一些组合API(文章下面会介绍到)
此外，在setup函数中还可以定义需要暴露给模板的数据或方法，这些数据和方法都可以直接在模板中使用。
需要注意的是，setup函数在组件实例化之前就已经运行，而且所有的响应式数据都是在创建组件之前被创建的，因此在setup函数中不能访问this。另外，props也是响应式数据，但在setup函数中无法直接访问props，需要通过参数传入。
<template> <div id="app"> <div> a={{ a }} <br> </div> </div> </template> <script setup> const a=122 </script>
二、ref详解
ref可以接受简单类型或者复杂类型，返回一个响应式的对象（注意是对象，所以在js中需要.value来获取他的值）
<template> <div id="app"> <div> a={{ a }}<br> o={{ o }} <br> </div> </div> </template> <script setup> import { ref } from 'vue'; const a=ref(99) const o=ref({ name:'张三', age:'19' }) </script>
三、computed详解
计算属性简单理解成属性也可以的，是自己写好逻辑的属性，自定义的属性。
比如，想获取都大于30的列表，代码如下：
<template> <div id="app"> <div> list={{ list }} <br> 修改后的list={{ setlist}} </div> </div> </template> <script setup> import { ref } from 'vue'; import { computed,watch } from 'vue'; const list=ref([1,45,20,34,100,2,34,900]) const setlist=computed(()=>{ return list.value.filter(i=>i>30) }) </script>这里只介绍了常用的getter用法，setter用法可以去官网自己查看！
四、watch详解
watch主要是用来监听数据的变化，主要用法如下：
（1）监听单个数据的变化
<template> <div id="app"> <div> count={{ count }} <br> <button @click="addcount">count+1</button> </div> </div> </template> <script setup> import { ref } from 'vue'; import { computed,watch } from 'vue'; const count=ref(10) watch(count,(newvalue,oldvalue)=>{ console.log('之前的旧值=',oldvalue,'新值=',newvalue) }) const addcount=()=>{ count.value++; } </script>
（2）监听多个数据的变化
<template> <div id="app"> <div> count={{ count }} a={{ a }} <br> <button @click="addcount">count+1</button> <button @click="adda">a+1</button> </div> </div> </template> <script setup> import { ref } from 'vue'; import { computed,watch } from 'vue'; const count=ref(10) const a=ref(12) // 监听多个数据的变化主要是以数组的形式 watch([a,count],(newarr,oldarr)=>{ console.log('旧值数组=',oldarr,'新值数组=',newarr) }) const addcount=()=>{ count.value++; } const adda=()=>{ a.value++; } </script>
（3）immediate
immediate英文是马上的意思，这里默认immediate是关闭的，打开的话只要将值设置为true即可，为true就是进入页面就开始执行，默认情况下，刚进来是不会监听的。
<template> <div id="app"> <div> count={{ count }} a={{ a }} <br> <button @click="addcount">count+1</button> <button @click="adda">a+1</button> </div> </div> </template> <script setup> import { ref } from 'vue'; import { computed,watch } from 'vue'; const count=ref(10) // 监听多个数据的变化主要是以数组的形式 watch(count,(newv,oldv)=>{ console.log(oldv,newv) }, { immediate:true }) const addcount=()=>{ count.value++; } </script>
（4）deep
默认情况下deep设置是falese关闭的，我们默认监听就是浅层的，比如说监听一个简单类型我们可以监听到，但是复杂类型就不行了，比如对象类型，那么这时候就需要深度监视了。
<template> <div id="app"> <div> a={{ a }} <br> <button @click="add">修改a</button> </div> </div> </template> <script setup> import { ref } from 'vue'; import { computed,watch } from 'vue'; const a=ref({ name:'张三', age:19 }) watch(a,(newvalue,oldvalue)=>{ console.log('旧值=',oldvalue,'新值=',newvalue) },{ deep:true }) const add=()=>{ a.value.age++; } </script>
（5）精确监听对象的某个属性
<template> <div id="app"> <div> a={{ a }} <br> <button @click="addname">修改name</button> <br> <button @click="addage">修改age</button> </div> </div> </template> <script setup> import { ref } from 'vue'; import { computed,watch } from 'vue'; const a=ref({ name:'张三', age:19 }) // 精确监听的话，对象要回调，不懂意思可以认为这是固定形式 watch(()=>a.value.age,(newvalue,oldvalue)=>{ console.log('age变化') console.log('旧=',oldvalue,'新=',newvalue) }) watch(()=>a.value.name,(newvalue,oldvalue)=>{ console.log('name变化') console.log('旧=',oldvalue,'新=',newvalue) }) const addage=()=>{ a.value.age++; } const addname=()=>{ a.value.name='p' } </script>
五、生命周期
生命周期API：
而且他们是可以多次调用的，并不会冲突，按照顺序依次执行。
<template> <div id="app"> <div> </div> </div> </template> <script setup> import { ref } from 'vue'; import { onMounted } from 'vue'; onMounted(() => { console.log("渲染完成1") }) onMounted(()=>{ console.log('渲染完成2') }) </script>
