小编点评

## Summary of Vue Content This document explains different ways to achieve dynamic updates in Vue components using props and computed properties. **1. Reactivity without Functions:** - Props are used directly as data sources in the template. - Data changes trigger immediate updates because Vue detects changes. - This approach works for simple structures but may not be optimal for complex data structures. **2. Using `watchEffect`:** - `watchEffect` is a lifecycle hook that allows us to track changes in a data source. - It triggers an update function whenever the data changes. - This approach is efficient and allows for fine-grained control over updates. **3. Using `computed`:** - `computed` properties are functions that return a single, computed value based on multiple data sources. - They are computed lazily, only when accessed in the template. - This approach is useful for performing complex calculations or fetching data. **4. Using `useDouble` function:** - This function takes a prop as an argument and returns a computed property. - It uses `watchEffect` to track changes in the prop and updates the computed property accordingly. - This approach allows for dynamic calculations based on prop changes. **5. Passing Props with `watchEffect`:** - `watchEffect` can be used to track changes in any prop, regardless of its type. - We can pass complex objects and arrays as props and access their properties within the watchEffect callback. - This approach allows for flexible data handling and dynamic updates. **Overall, choosing the appropriate approach depends on the complexity of your data structure, performance requirements, and desired control over updates.**

正文

1、响应式本质

就是把数据和函数相关联起来，当数据变化时，函数自动执行。当然这对于函数和数据也是有要求的

函数必须是以下几种:

render

computed

watch

watchEffect

数据必须是以下几种：

响应式数据

在函数中用到的数据

2、例子

2.1

<template>
  <div class="responsive">
    <h1>responsive</h1>
    <div>传入的值:{{ count }}</div>
    <br>
    <div>doubled:{{doubleCount}}</div>
    <br>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
const props = defineProps({
  count: {
    type: Number,
    default: 0
  }
})
const doubleCount =ref(props.count * 2)
</script>

<style scoped>

</style>

结果：

当我们点击增加按钮时，页面并没有发生变化，这是因为我们的doubleCount并没有响应式。

原因：const doubleCount =ref(props.count * 2)这一过程不涉及到任何函数，数据和数据之间是无法形成关联的，所以doubleCount并不是响应式的。

2.2

<template>
  <div class="responsive">
    <h1>responsive</h1>
    <div>传入的值:{{ count }}</div>
    <br>
    <div>doubled:{{doubleCount}}</div>
    <br>
  </div>
</template>

<script setup>
import { ref, computed ,watchEffect} from 'vue'
const props = defineProps({
  count: {
    type: Number,
    default: 0
  }
})
const doubleCount =ref(0)
watchEffect(() => {
  console.log('watchEffect')
  doubleCount.value = props.count * 2
})
</script>

<style scoped>

</style>

结果:

当我们点击增加按钮时，页面发生了变化，这是因为我们的doubleCount是响应式的。

原因:
函数与数据关联起来了；

1、watchEffect是一个函数，props.count是一个响应式数据，且在watchEffect中用到了，所以props.count变化了，watchEffect就会执行，导致doubleCount变化；
2、doubleCount也是个响应式数据，在render函数中用到了，所以doubleCount变化了，render函数就会执行，更新页面。

2.3

<template>
  <div class="responsive">
    <h1>responsive</h1>
    <div>传入的值:{{ count }}</div>
    <br>
    <div>doubled:{{doubleCount}}</div>
    <br>
  </div>
</template>

<script setup>
import { ref, computed ,watchEffect} from 'vue'
const props = defineProps({
  count: {
    type: Number,
    default: 0
  }
})
function useDouble(count) {
  const doubleCount =ref(0)
  watchEffect(() => {
    console.log('watchEffect')
    doubleCount.value = count * 2
  })
  return doubleCount
}
const doubleCount = useDouble(props.count)

</script>

<style scoped>

</style>

结果:

当我们点击增加按钮时，页面未发生变化。

原因:
useDouble函数传的参数是一个原始值，没有读到任何响应式数据。所以doubleCount不会更新，从而render函数也不会执行。

2.4

<template>
  <div class="responsive">
    <h1>responsive</h1>
    <div>传入的值:{{ count }}</div>
    <br>
    <div>doubled:{{doubleCount}}</div>
    <br>
  </div>
</template>

<script setup>
import { ref, computed ,watchEffect} from 'vue'
const props = defineProps({
  count: {
    type: Number,
    default: 0
  }
})
const doubleCount = computed(() => {
  console.log('computed')
  return props.count * 2
})

</script>

<style scoped>

</style>

结果:

当我们点击增加按钮时，页面发生了变化。

原因:

1、computed是一个函数，props.count是一个响应式数据，且在computed中用到了，所以props.count变化了，computed就会执行，导致doubleCount变化；
2、doubleCount也是个响应式数据，在render函数中用到了，所以doubleCount变化了，render函数就会执行，更新页面。

2.5

<template>
  <div class="responsive">
    <h1>responsive</h1>
    <div>传入的值:{{ count }}</div>
    <br>
    <div>doubled:{{doubleCount}}</div>
    <br>
  </div>
</template>

<script setup>
import { ref, computed ,watchEffect} from 'vue'
const props = defineProps({
  count: {
    type: Number,
    default: 0
  }
})
function useDouble(props) {
  const doubleCount =ref(0)
  watchEffect(() => {
    console.log('watchEffect')
    doubleCount.value = props.count * 2
  })
  return doubleCount
}
const doubleCount = useDouble(props)

</script>

<style scoped>

</style>

结果:

当我们点击增加按钮时，页面发生变化。
原因:
1、props是一个响应式数据，跟watchEffect关联起来了，所以当props.count变化时，watchEffect就会执行，导致doubleCount变化；
2、doubleCount也是个响应式数据，在render函数中用到了，所以doubleCount变化了，render函数就会执行，更新页面。

tips:VueUse库中的基本都是传的props。