The computed Vue

Whenever name or food changes, maG updates to the corresponding value

< h1 > {{MSG}} < / h1 > computed: {MSG () {return ` I is ${this. The name}, I love to eat the ${enclosing the food} `}}Copy the code

The React to implement

React uses the useMemo hook to implement computed effects

import { useState, useMemo } from 'react' function Demo() { const [name, setName] = useState('666') const [food, SetFood] = useState(' big gluten ') // Implement computed const MSG = useMemo(() => 'I am ${name}, ${food} ', [name, food]) const handleClick = (type: Number) => {if (type === 1) {setName(' Chicken ')} else if (type === 2) {setFood(' meat ')}} return (<div> <button) OnClick ={() => handleClick(1)}> </button> <button onClick={() => handleClick(2)}> </button> </div> ) }Copy the code