diff --git a/src/api/component-instance.md b/src/api/component-instance.md index 93f773df89..5d11d8020d 100644 --- a/src/api/component-instance.md +++ b/src/api/component-instance.md @@ -212,7 +212,7 @@ Imperative API for creating watchers. - **Details** - The first argument is the watch source. It can be a component property name string, a simple dot-delimited path string, or a getter function. + The first argument is the watch source. It can be a component property name string, a simple dot-delimited path string, or a [getter function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get#description). The second argument is the callback function. The callback receives the new value and the old value of the watched source. diff --git a/src/api/reactivity-core.md b/src/api/reactivity-core.md index 49c2cececb..02caac10f5 100644 --- a/src/api/reactivity-core.md +++ b/src/api/reactivity-core.md @@ -45,7 +45,7 @@ Takes an inner value and returns a reactive and mutable ref object, which has a ## computed() {#computed} -Takes a getter function and returns a readonly reactive [ref](#ref) object for the returned value from the getter. It can also take an object with `get` and `set` functions to create a writable ref object. +Takes a [getter function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set#description) and returns a readonly reactive [ref](#ref) object for the returned value from the getter. It can also take an object with `get` and `set` functions to create a writable ref object. - **Type** diff --git a/src/glossary/index.md b/src/glossary/index.md index 6125b5f596..4512c621b5 100644 --- a/src/glossary/index.md +++ b/src/glossary/index.md @@ -275,7 +275,7 @@ In a Vue context, reactivity is used to describe a collection of features. Those There are various different ways that a reactivity system could be implemented. For example, it could be done by static analysis of code to determine its dependencies. However, Vue doesn't employ that form of reactivity system. -Instead, Vue's reactivity system tracks property access at runtime. It does this using both Proxy wrappers and getter/setter functions for properties. +Instead, Vue's reactivity system tracks property access at runtime. It does this using both Proxy wrappers and [getter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set#description)/[setter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set#description) functions for properties. For more details see: - [Guide - Reactivity Fundamentals](/guide/essentials/reactivity-fundamentals.html) diff --git a/src/guide/essentials/computed.md b/src/guide/essentials/computed.md index ec97209a6f..60055f06fc 100644 --- a/src/guide/essentials/computed.md +++ b/src/guide/essentials/computed.md @@ -130,7 +130,7 @@ const publishedBooksMessage = computed(() => { [Try it in the Playground](https://play.vuejs.org/#eNp1kE9Lw0AQxb/KI5dtoTainkoaaREUoZ5EEONhm0ybYLO77J9CCfnuzta0vdjbzr6Zeb95XbIwZroPlMySzJW2MR6OfDB5oZrWaOvRwZIsfbOnCUrdmuCpQo+N1S0ET4pCFarUynnI4GttMT9PjLpCAUq2NIN41bXCkyYxiZ9rrX/cDF/xDYiPQLjDDRbVXqqSHZ5DUw2tg3zP8lK6pvxHe2DtvSasDs6TPTAT8F2ofhzh0hTygm5pc+I1Yb1rXE3VMsKsyDm5JcY/9Y5GY8xzHI+wnIpVw4nTI/10R2rra+S4xSPEJzkBvvNNs310ztK/RDlLLjy1Zic9cQVkJn+R7gIwxJGlMXiWnZEq77orhH3Pq2NH9DjvTfpfSBSbmA==) -Here we have declared a computed property `publishedBooksMessage`. The `computed()` function expects to be passed a getter function, and the returned value is a **computed ref**. Similar to normal refs, you can access the computed result as `publishedBooksMessage.value`. Computed refs are also auto-unwrapped in templates so you can reference them without `.value` in template expressions. +Here we have declared a computed property `publishedBooksMessage`. The `computed()` function expects to be passed a [getter function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get#description), and the returned value is a **computed ref**. Similar to normal refs, you can access the computed result as `publishedBooksMessage.value`. Computed refs are also auto-unwrapped in templates so you can reference them without `.value` in template expressions. A computed property automatically tracks its reactive dependencies. Vue is aware that the computation of `publishedBooksMessage` depends on `author.books`, so it will update any bindings that depend on `publishedBooksMessage` when `author.books` changes. diff --git a/src/guide/essentials/watchers.md b/src/guide/essentials/watchers.md index 592fbbe1ca..d950548db6 100644 --- a/src/guide/essentials/watchers.md +++ b/src/guide/essentials/watchers.md @@ -109,7 +109,7 @@ watch(question, async (newQuestion, oldQuestion) => { ### Watch Source Types {#watch-source-types} -`watch`'s first argument can be different types of reactive "sources": it can be a ref (including computed refs), a reactive object, a getter function, or an array of multiple sources: +`watch`'s first argument can be different types of reactive "sources": it can be a ref (including computed refs), a reactive object, a [getter function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get#description), or an array of multiple sources: ```js const x = ref(0) @@ -272,13 +272,12 @@ watch( - ## Once Watchers {#once-watchers} Watcher's callback will execute whenever the watched source changes. If you want the callback to trigger only once when the source changes, use the `once: true` option.
- + ```js export default { watch: { diff --git a/src/guide/extras/reactivity-in-depth.md b/src/guide/extras/reactivity-in-depth.md index 33415d80f8..91cf02ecf8 100644 --- a/src/guide/extras/reactivity-in-depth.md +++ b/src/guide/extras/reactivity-in-depth.md @@ -67,7 +67,7 @@ This `whenDepsChange()` function has the following tasks: We can't really track the reading and writing of local variables like in the example. There's just no mechanism for doing that in vanilla JavaScript. What we **can** do though, is intercept the reading and writing of **object properties**. -There are two ways of intercepting property access in JavaScript: [getter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get) / [setters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set) and [Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy). Vue 2 used getter / setters exclusively due to browser support limitations. In Vue 3, Proxies are used for reactive objects and getter / setters are used for refs. Here's some pseudo-code that illustrates how they work: +There are two ways of intercepting property access in JavaScript: [getter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get#description) / [setters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set#description) and [Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy). Vue 2 used getter / setters exclusively due to browser support limitations. In Vue 3, Proxies are used for reactive objects and getter / setters are used for refs. Here's some pseudo-code that illustrates how they work: ```js{4,9,17,22} function reactive(obj) { diff --git a/src/guide/reusability/composables.md b/src/guide/reusability/composables.md index ff147c5780..c9c1520270 100644 --- a/src/guide/reusability/composables.md +++ b/src/guide/reusability/composables.md @@ -199,7 +199,7 @@ const { data, error } = useFetch(url) url.value = '/new-url' ``` -Or, accept a getter function: +Or, accept a [getter function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get#description): ```js // re-fetch when props.id changes