devttl/reference
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

doc: Update README.md #786

Browse Source
This commit is contained in:
jaywcjlove 2024-07-09 01:16:04 +08:00
parent 4f4ac84ec9
commit 0d7f6653b6
1 changed files with 27 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
docs/vue.md
View File

@ -511,37 +511,37 @@ watch(count, function() {
<!--rehype:className=wrap-text--> <!--rehype:className=wrap-text-->
### 监听多个值 ### 监听多个值
<!--rehype:wrap-class=col-span-2--> <!--rehype:wrap-class=col-span-2 row-span-2-->
```html ```html
<template> <template>
<h1> {{ count1 }} </h1> <h1> {{ count1 }} </h1>
<h1> {{ count2 }} </h1> <h1> {{ count2 }} </h1>
<button @click="count1++">count1</button> <button @click="count1++">count1</button>
<button @click="count2++">count2</button> <button @click="count2++">count2</button>
</template> </template>
<script setup> <script setup>
import { watch, ref } from 'vue'; import { watch, ref } from 'vue';
const count1 = ref(0) const count1 = ref(0)
const count2 = ref(0) const count2 = ref(0)
watch( watch(
// 监听的表达式或函数 // 监听的表达式或函数
() => ({ () => ({
count1: count1.value, count1: count1.value,
count2: count2.value count2: count2.value
}), }),
// 回调函数 // 回调函数
(newValue, oldValue) => { (newValue, oldValue) => {
// 在这里执行需要的逻辑 // 在这里执行需要的逻辑
console.log('count1 或 count2 变化了：', newValue); console.log('count1 或 count2 变化了：', newValue);
}, },
// immediate: true 表示在初始渲染时立即执行一次回调函数，以便处理初始的状态。 // immediate: true 表示在初始渲染时立即执行一次回调函数，以便处理初始的状态。
// deep: true 表示深度监听，即对 newValue 和 oldValue 进行深层比较，而不是简单的引用比较。 // deep: true 表示深度监听，即对 newValue 和 oldValue 进行深层比较，而不是简单的引用比较。
{ immediate: true, deep: true } { immediate: true, deep: true }
); );
</script> </script>
<style scoped> <style scoped>
@ -549,14 +549,14 @@ watch(count, function() {
``` ```
### 计算状态 ### 计算状态
<!--rehype:wrap-class=col-span-2-->
```html ```html
<script setup> <script setup>
import { ref, computed } from 'vue'; import { ref, computed } from 'vue';
const text = ref('') const text = ref('')
// computed 的回调函数里，会根据已有并用到的状态计算出新的状态 // computed 的回调函数里
// 会根据已有并用到的状态计算出新的状态
const capital = computed(function(){ const capital = computed(function(){
return text.value.toUpperCase(); return text.value.toUpperCase();
}) })