Data binding in Vue does not function properly within functional components

Question

Data binding in Vue does not function properly within functional components

Clicking the button will cause the number n to increase, but the UI will display it as constant 1.

<script>
let n = 1
function add() {
  console.log(n)
  return ++n
}
export default {
  functional: true,
  render(h, ctx) {
    return (<div>
      <h1>{n}</h1>
      <button onClick={add}>click</button>
    </div>)
  }
}
</script>

javascript vue.js vuejs2 observable

Answer 1

Answer №1

Purposeful Functionality

This demonstrates the intended functionality of functional components, highlighting their efficiency. As stated in the documentation:

...we can designate components as functional, indicating they are stateless (lack reactive data)

Because functional components are essentially functions, their rendering process is cost-effective.

Clarification

The significance of this-- and why n does not exhibit reactivity-- lies in n lacking observable properties and not being subjected to dependency management/watching. The absence of overhead from dependencies contributes to the performance boost seen with functional components. Choosing speed means sacrificing observability, representing a favorable tradeoff when it's unnecessary. Opting for a non-functional component becomes advisable if observability is required.

Next Steps

Your decision could involve using a traditional non-functional component or pondering the feasibility of dividing your functional component further to isolate reactive parts into a non-functional subcomponent.

Additional Considerations

If you manually introduce observability to your functional component, the desired behavior can be attained; however, leveraging a non-functional component would be more appropriate. Pay attention to the usage of observable:

import Vue from 'vue';
let state = Vue.observable({n: 1});

function add() {
  console.log(state.n)
  return ++state.n
}

export default {
  functional: true,
  render(h, ctx) {
    return (<div>
      <h1>{state.n}</h1>
      <button onClick={add}>click</button>
    </div>)
  }
}

(Note: While render functions are common in normal components too, this information clarifies that functional components aren't obligatory for utilizing render functions.)

Answer 2

Purposeful Functionality

This demonstrates the intended functionality of functional components, highlighting their efficiency. As stated in the documentation:

...we can designate components as functional, indicating they are stateless (lack reactive data)

Because functional components are essentially functions, their rendering process is cost-effective.

Clarification

The significance of this-- and why n does not exhibit reactivity-- lies in n lacking observable properties and not being subjected to dependency management/watching. The absence of overhead from dependencies contributes to the performance boost seen with functional components. Choosing speed means sacrificing observability, representing a favorable tradeoff when it's unnecessary. Opting for a non-functional component becomes advisable if observability is required.

Next Steps

Your decision could involve using a traditional non-functional component or pondering the feasibility of dividing your functional component further to isolate reactive parts into a non-functional subcomponent.

Additional Considerations

If you manually introduce observability to your functional component, the desired behavior can be attained; however, leveraging a non-functional component would be more appropriate. Pay attention to the usage of observable:

import Vue from 'vue';
let state = Vue.observable({n: 1});

function add() {
  console.log(state.n)
  return ++state.n
}

export default {
  functional: true,
  render(h, ctx) {
    return (<div>
      <h1>{state.n}</h1>
      <button onClick={add}>click</button>
    </div>)
  }
}

(Note: While render functions are common in normal components too, this information clarifies that functional components aren't obligatory for utilizing render functions.)

Data binding in Vue does not function properly within functional components

Answer №1

Similar questions

Learn about generating PDF files with React Native Expo using the react-native-html-to-pdf library!

Different ways to resize an image in various sizes without relying on PHP thumb

XSL is the key component in creating a unique Custom Slider that remains stationary

What is the most effective method to verify the visibility of an element hidden by v-show when using testing-library in Vue?

Setting the texture for a loaded glb model using Three.js

Step-by-step guide on retrieving data from E-goi with REST API in Google Apps Script

The attempt to perform a Diffie-Hellman key exchange between Python and Node has hit a roadblock, as an error stating that

Tips for extracting a website's dynamic HTML content after AJAX modifications using Perl and Selenium

Display issue with ThreeJS cube

Troubleshooting JavaScript Integration in PHP Scripts

Resetting tests in Vue using vitest and testing-library: A complete guide

Link the values of mongoose array to a distinct identifier

Retrieve the input field value using JavaScript within a PHP iteration loop

Obtaining cookies from a separate domain using PHP and JavaScript

Evaluating Vue.js Watchers using Jasmine

Display the data returned from a computed property PromiseResult using VueJS

How to incorporate text into the white circle object using three.js

Enhancing Pinia setup stores with custom getters, setters, and actions for improved reusability

the power of using keywords and prototypes

What is the method for showcasing an array using AngularJs in my specific scenario?