Skip to content

Commit

Permalink
doc: Update README.md jaywcjlove#786
Browse files Browse the repository at this point in the history
  • Loading branch information
jaywcjlove committed Jul 8, 2024
1 parent 4f4ac84 commit 0d7f665
Showing 1 changed file with 27 additions and 27 deletions.
54 changes: 27 additions & 27 deletions docs/vue.md
Original file line number Diff line number Diff line change
Expand Up @@ -511,52 +511,52 @@ watch(count, function() {
<!--rehype:className=wrap-text-->

### 监听多个值
<!--rehype:wrap-class=col-span-2-->
<!--rehype:wrap-class=col-span-2 row-span-2-->

```html
<template>
<h1> {{ count1 }} </h1>
<h1> {{ count2 }} </h1>
<button @click="count1++">count1</button>
<button @click="count2++">count2</button>
<h1> {{ count1 }} </h1>
<h1> {{ count2 }} </h1>
<button @click="count1++">count1</button>
<button @click="count2++">count2</button>
</template>

<script setup>
import { watch, ref } from 'vue';
const count1 = ref(0)
const count2 = ref(0)
watch(
// 监听的表达式或函数
() => ({
count1: count1.value,
count2: count2.value
}),
// 回调函数
(newValue, oldValue) => {
// 在这里执行需要的逻辑
console.log('count1 或 count2 变化了:', newValue);
},
// immediate: true 表示在初始渲染时立即执行一次回调函数,以便处理初始的状态。
// deep: true 表示深度监听,即对 newValue 和 oldValue 进行深层比较,而不是简单的引用比较。
{ immediate: true, deep: true }
);
import { watch, ref } from 'vue';
const count1 = ref(0)
const count2 = ref(0)
watch(
// 监听的表达式或函数
() => ({
count1: count1.value,
count2: count2.value
}),
// 回调函数
(newValue, oldValue) => {
// 在这里执行需要的逻辑
console.log('count1 或 count2 变化了:', newValue);
},
// immediate: true 表示在初始渲染时立即执行一次回调函数,以便处理初始的状态。
// deep: true 表示深度监听,即对 newValue 和 oldValue 进行深层比较,而不是简单的引用比较。
{ immediate: true, deep: true }
);
</script>

<style scoped>
</style>
```

### 计算状态
<!--rehype:wrap-class=col-span-2-->

```html
<script setup>
import { ref, computed } from 'vue';
const text = ref('')
// computed 的回调函数里,会根据已有并用到的状态计算出新的状态
// computed 的回调函数里
// 会根据已有并用到的状态计算出新的状态
const capital = computed(function(){
return text.value.toUpperCase();
})
Expand Down

0 comments on commit 0d7f665

Please sign in to comment.