vue3 组合式API

时间:2025/7/13 8:25:53来源：https://blog.csdn.net/qq_55111117/article/details/141321006 浏览次数:6次

<!-- 深度监听  deep 点击按钮控制台，才输出count变化了: 1, 老值: 0;否则控制台不输出 -->
<script setup>import { ref,watch } from 'vue'const state = ref({count:0})const setCount = () => {state.count.value++}watch(state, () => {console.log(`count变化了: ${newValue}, 老值: ${oldValue}`)},{deep:true})
</script><template><div><button @click="setCount">count is: {{ state.count }}</button></div>
</template>

setup 语法糖（API入口）

 <script setup>// 数据const message = 'this is ms'// 函数const logMessage = () =>{console.log(message);}</script><template><div>{{ message }}</div><button @click="logMessage ">log</button>
</template>

ref和 reactive的用法

共同点：用函数调用的方式生成响应式数据

不同点： reactive: 只支持对象类型的数据

ref: 可以支持简单类型和对象类型的数据， 在脚本区域修改ref产生的响应式对象数据，必须通过value属性，来获取。

<script setup>
// 用ref和reactive 共同点。用函数调用的方式生成响应式数据
// 1.导入函数
// import { reactive } from 'vue';
// // 只支持对象类型
// const state = reactive({
//   count:0// })// // 定义一个函数// const setCount =()=>{
//   state.count++ 
// }import { ref } from 'vue';const state = ref(0)
const setCount =() =>{// 在脚本区域修改ref产生的响应式对象数据，必须通过value属性state.value++
}
</script><template><!-- <button @click="setCount">{{ state.count }}</button> -->
<button @click="setCount">{{ state }}</button></template>

计算属性computed

<script setup>
// 原始响应式数据
import { ref } from 'vue';
// 导入computed
import {computed} from 'vue';
const list = ref([1,2,3,4,5,6,7,8])
// 执行函数 return 计算之后的值，变量接收const computedList  = computed(() =>{// 计算属性中不应该有副作用（比如异步请求，修改dom）// 避免直接修改计算属性的值（计算属性应该是只读的）return list.value.filter(item => item > 2)
})setTimeout(()=>{list.value.push(9,10)
},3000)
</script><template><div>原始响应式数组 - {{ list }}</div><div>计算属性数组 - {{ computedList }}</div>
</template>

watch基本使用

<script setup>import { ref,watch } from 'vue'
const count = ref(0)
// 监听count的变化
// watchAPI,ref对象不需要加.value
watch(count, (newValue, oldValue) => {console.log(`new: ${newValue}, old: ${oldValue}`)
})
</script>  <template><h1>{{ count }}</h1><button @click="count++">count is: {{ count }}</button>
</template>

监听多个数据源

<script setup>import { ref,watch } from 'vue'const count = ref(0)
const name = ref('zhangsan')
const changeCount = () => {count.value++
}
const changeName = () => {name.value = 'lisi'
}// 监听多个数据源
watch([count,name],([newCount,newName],[oldCount,oldName])=>{console.log(`newCount: ${newCount}, oldCount: ${oldCount}`)console.log(`newName: ${newName}, oldName: ${oldName}`)}
)
</script><template><div><button @click="changeCount">count is: {{ count }}</button></div><div><button @click="changeName">name is: {{ name }}</button></div></template>

立即执行

<!-- 立即执行的watchAPI  immidiate -->
<!-- 默认浅层监听   --><script setup>import { ref,watch } from 'vue'const count = ref(0)const setCount = () => {count.value++}watch(count, (newValue, oldValue) => {console.log(`new: ${newValue}, old: ${oldValue}`)},{immediate:true})
</script><template><div><button @click="setCount">count is: {{ count }}</button></div>
</template>

深度执行

<script setup>import { ref,watch } from 'vue'const state = ref({count:0})const setCount = () => {state.count.value++}watch(state, () => {console.log(`count变化了: ${newValue}, 老值: ${oldValue}`)},{deep:true})
</script><template><div><button @click="setCount">count is: {{ state.count }}</button></div>
</template>

精确侦听

<!-- 精确侦听对象的某个属性 --><!-- 在不开启deep的情况下，监听age的变化，只有age变化时才会执行回调 --><script setup>import { ref,watch } from 'vue'const state = ref({name:'asdas',age:10})const changeName = () => {state.value.name = 'children'}const changeAge = () => {state.value.age = 20}//  精确侦听某个具体属性 侦听agewatch(() => state.value.age,() => {console.log('age变化了')}) 
</script><template><div><div>当前name == {{ state.name }}</div><div>当前age == {{ state.age }}</div><div><button @click="changeName">修改name</button><button @click="changeAge">修改age</button></div></div></template>

生命周期API

<script setup>
import { onMounted } from 'vue';onMounted(() => {console.log('1.组件挂载完毕mounted执行了');
}) 
onMounted(() => {console.log('2.组件挂载完毕mounted执行了');
}) 
</script><template></template>