Merge remote-tracking branch 'upstream/master'

Author: emanuelgsouza

src/.vuepress/components/community/team/members.js

@@ -252,7 +252,7 @@ const members = [
       languages: ['uk', 'ru', 'en'],
       reposOfficial: ['vuejs.org', 'vue-cli'],
       work: {
-        role: 'Senior Frontend Engineer',
+        role: 'Staff Frontend Engineer',
         org: 'GitLab',
         orgUrl: 'https://gitlab.com/'
       },

src/.vuepress/config.js

@@ -15,6 +15,7 @@ const sidebar = {
         '/guide/introduction',
         '/guide/instance',
         '/guide/template-syntax',
+        '/guide/data-methods',
         '/guide/computed',
         '/guide/class-and-style',
         '/guide/conditional',
@@ -156,6 +157,7 @@ const sidebar = {
     '/api/global-api',
     {
       title: 'Options',
+      path: '/api/options-api',
       collapsable: false,
       children: [
         '/api/options-data',
@@ -173,6 +175,7 @@ const sidebar = {
     '/api/built-in-components.md',
     {
       title: 'Reactivity API',
+      path: '/api/reactivity-api',
       collapsable: false,
       children: [
         '/api/basic-reactivity',
@@ -251,10 +254,10 @@ module.exports = {
     ],
     ['meta', { name: 'msapplication-TileColor', content: '#000000' }],
     [
-      ('script',
+      'script',
       {
         src: 'https://player.vimeo.com/api/player.js'
-      })
+      }
     ],
     [
       'script',
@@ -295,7 +298,7 @@ module.exports = {
       },
       {
         text: 'API Reference',
-        link: '/api/application-config'
+        link: '/api/'
       },
       {
         text: 'Ecosystem',

src/.vuepress/public/images/css-vs-js-ease.svg

@@ -71,7 +71,7 @@
     position: absolute;
     padding: 4px 20px;
     margin: 0;
-    height: calc(100% - 8px);
+    min-height: calc(100% - 8px);
     right: 4px;
     top: 4px;
     font-size: 1.05em;

src/.vuepress/public/images/sponsors/laravel.png

@@ -158,3 +158,58 @@ const foo = inject<string>('foo') // string | undefined
 - **See also**:
   - [Provide / Inject](../guide/component-provide-inject.html)
   - [Composition API Provide / Inject](../guide/composition-api-provide-inject.html)
+
+## `getCurrentInstance`
+
+`getCurrentInstance` enables access to an internal component instance useful for advanced usages or for library creators.
+
+```ts
+import { getCurrentInstance } from 'vue'
+
+const MyComponent = {
+  setup() {
+    const internalInstance = getCurrentInstance()
+
+    internalInstance.appContext.config.globalProperties // access to globalProperties
+  }
+}
+```
+
+`getCurrentInstance` **only** works during [setup](#setup) or [Lifecycle Hooks](#lifecycle-hooks)
+
+> When using outside of [setup](#setup) or [Lifecycle Hooks](#lifecycle-hooks), please call `getCurrentInstance()` on `setup` and use the instance instead.
+
+```ts
+const MyComponent = {
+  setup() {
+    const internalInstance = getCurrentInstance() // works
+
+    const id = useComponentId() // works
+
+    const handleClick = () => {
+      getCurrentInstance() // doesn't work
+      useComponentId() // doesn't work
+
+      internalInstance // works
+    }
+
+    onMounted(() => {
+      getCurrentInstance() // works
+    })
+
+    return () =>
+      h(
+        'button',
+        {
+          onClick: handleClick
+        },
+        `uid: ${id}`
+      )
+  }
+}
+
+// also works if called on a composable
+function useComponentId() {
+  return getCurrentInstance().uid
+}
+```

src/.vuepress/theme/components/Newsletter.vue

@@ -197,7 +197,7 @@
   <!-- shorthand -->
   <button @click="doThis"></button>
 
-  <!-- shorthand dynamic event (2.6.0+) -->
+  <!-- shorthand dynamic event -->
   <button @[event]="doThis"></button>
 
   <!-- stop propagation -->

src/api/composition-api.md

@@ -0,0 +1,15 @@
+# API
+
+The Vue.js API contains the following categories:
+
+- [Application Config](/api/application-config.html)
+- [Application API](/api/application-api.html)
+- [Global API](/api/global-api.html)
+- [Options API](/api/options-api.html)
+- [Instance Properties](/api/instance-properties.html)
+- [Instance Methods](/api/instance-methods.html)
+- [Directives](/api/directives.html)
+- [Special Attributes](/api/special-attributes.html)
+- [Built-in Components](/api/built-in-components.html)
+- [Reactivity API](/api/reactivity-api.html)
+- [Composition API](/api/composition-api.html)

src/api/directives.md

@@ -9,6 +9,7 @@
   - `{Object} options (optional)`
     - `{boolean} deep`
     - `{boolean} immediate`
+    - `{string} flush`
 
 - **Returns:** `{Function} unwatch`
 
@@ -158,7 +159,9 @@
   If you still want to call an unwatch function inside the callback, you should check its availability first:
 
   ```js
-  const unwatch = vm.$watch(
+  let unwatch = null
+  
+  unwatch = vm.$watch(
     'value',
     function() {
       doSomething()
@@ -170,6 +173,24 @@
   )
   ```
 
+- **Option: flush**
+
+  The `flush` option allows for greater control over the timing of the callback. It can be set to `'pre'`, `'post'` or `'sync'`.
+  
+  The default value is `'pre'`, which specifies that the callback should be invoked before rendering. This allows the callback to update other values before the template runs.
+  
+  The value `'post'` can be used to defer the callback until after rendering. This should be used if the callback needs access to the updated DOM or child components via `$refs`.
+
+  If `flush` is set to `'sync'`, the callback will be called synchronously, as soon as the value changes.
+
+  For both `'pre'` and `'post'`, the callback is buffered using a queue. The callback will only be added to the queue once, even if the watched value changes multiple times. The interim values will be skipped and won't be passed to the callback.
+  
+  Buffering the callback not only improves performance but also helps to ensure data consistency. The watchers won't be triggered until the code performing the data updates has finished.
+  
+  `'sync'` watchers should be used sparingly, as they don't have these benefits.
+
+  For more information about `flush` see [Effect Flush Timing](../guide/reactivity-computed-watchers.html#effect-flush-timing).
+
 - **See also:** [Watchers](../guide/computed.html#watchers)
 
 ## $emit

src/api/index.md

@@ -28,6 +28,8 @@
 
   The root DOM element that the component instance is managing.
 
+  For components using [fragments](../guide/migration/fragments), `$el` will be the placeholder DOM node that Vue uses to keep track of the component's position in the DOM. It is recommended to use [template refs](../guide/component-template-refs.html) for direct access to DOM elements instead of relying on `$el`.
+
 ## $options
 
 - **Type:** `Object`