preface

I just joined a new company recently, and the front-end technology stack in my group is mainly Vue. I used to write React more in my previous company, so I spent several hours to review Vue’s documents, after all, I haven’t touched Vue for nearly three years. Only when two things have something in common can we compare the difference, and the difference may be the direction we usually pay more attention to. In the day-to-day business development, we will mainly focus on two points, state (the state | | data) and show (UI), the paper mainly expounds the UI, the problem of state level to do the analysis in subsequent articles.

Description of the UI layer

Vue is described as template, whereas React is described as JSX. (Of course, Vue can also be described as JSX, but it is essentially a template that provides a layer of sugar for development, so I won’t discuss it here.)

Vue:
<template>
    <div>hello</div>
</template>

React:
function render() {
    return (
       <div>hello</div>
    )
}
Copy the code

It feels similar at first sight, but it should be known that Vue and React are both modern front-end development kits. During development, it is necessary to consider whether this code can be reused and how to communicate when it is placed in different contexts. At this point, our code will look like this:

Vue:
<template>
    <div>{{text}}</div>
</template>
<script>
    export default {
      props: ['text']
    }
</script>

React:
function render(props) {
    return (
       <div>{props.text}</div>
    )
}
Copy the code

By means of the JSX natural advantages, in the React, ginseng and the definition of the component specifications can be directly using the function features, and in the Vue, because it is a template, the template can be executed directly, is the need to bring the template string parsing, and then according to the current context information, like {{text}} to replace string, The definition of component specifications falls into script and is described in JS. There is no clear distinction in Vue for the state that is currently available within the component. Both data and props can be accessed through this.xxx. In React, there are props and state accesses.

Let’s look at how the child component calls the parent component method

Vue:
<template>
    <div @click="onClick">{{text}}</div>
</template>
<script>
    export default {
      props: ['text'],
      methods: {
          onClick() {
              this.$emit('click')
          }
      }
    }
</script>

React:
function render(props) {
    return (
       <div onClick={props.click}>{props.text}</div>
    )
}
Copy the code

React also uses function features to make simple function calls. In Vue, you need to use its own Runtime to achieve this. $emit is called, and $emit continues to find and trigger the target event to complete the communication.

After saying pass attributes, pass functions, of course, in the daily development of the UI description (Element) needs.

Vue:
<template>
    <modal>
        <solt></solt>
    </modal>
</template>

React:
function render(props) {
    return (
       <Modal>{props.children}</Modal>
    )
}
Copy the code

Let’s take a modal box for example. To enable the caller to draw the content area itself, it’s not enough to pass a UI description (Element). In Vue, we use a keyword solt slot to occupy the space and replace it during instantiation, while in React, we use variable references as usual.

When we call the modal component, the code looks like this

Vue:
<template>
    <modal>
        <template>
            <div>hello</div>
        <template>
    </modal>
</template>

React:
function render(props) {
    return (
       <Modal>
           <div>hello</div>
       </Modal>
    )
}
Copy the code

It looks like this, but when you have multiple elements passing in, it looks like this

Vue:
<template>
    <modal>
        <template #title>
            <div>hello</div>
        <template>
        <template #content>
            <div>hello</div>
        <template>
    </modal>
</template>

React:
function render(props) {
    return (
       <Modal title={<div>hello</div>}>
           <div>hello</div>
       </Modal>
    )
}
Copy the code

It’s props. Children [0] props. Children [1]. It’s props. In terms of data structure, there is a name corresponding to an element, but the writing method is slightly different.

conclusion

Vue does a lot of things in the Template area, such as the instruction system not mentioned. Instead of logical coding, describe it. The benefits are obvious, the description is easier to read and the cost of getting started is low, but the downside is exactly the advantage of the other party, the flexibility of the logic coding. But everything is enough to pay attention to a DSL design is complete enough to meet daily development needs, it is enough.

</div> </div> </template> React </div> </div> React </div> </div> React </div> </div> React <div > </div> React <div > </div> function render1(props) { if (props.show) { return <div>hello</div> } return null; } function render2(props) { return props.show ? <div>hello</div> : null; } function render3(props) { return props.show && <div>hello</div>; }...Copy the code

Well, JS is so flexible.