Vue 3.0 is officially released at 😁. The new syntax will take a while to learn, but will need to be used extensively in a production environment, perhaps after the vuex, Vue-Router, and other peripheral tools have been upgraded.

Vue 3.0 uses a new compilation tool called Vite, which changes the life of webPack 😂. JSX syntax is supported. Since we have been developing projects using React, JSX has a completely different experience, which is more pure and flexible.

Project creation

npm init vite-app vite-vue
cd vite-vue
npm install
npm run dev
Copy the code

We found the directory deconstruction created very simple

Use the JSX

Vue 3.0 supports JSX syntax directly. Create demo.jsx

export default function JsxTemp() {
  return <div>
    <h3>jsx</h3>
  </div>
}
Copy the code

It can be fully displayed in app.vue

Try binding data again

import { ref } from 'vue'

export default function JsxTemp() {
  const state = ref(0)
  const onClick = () = > {
    state.value++;
    console.log(state.value)
  }
  return <div>
    <h3>state: {state.value}</h3>
    <button onClick={onClick}>Click on the</button>
  </div>
}
Copy the code

We find that the number of states does not keep increasing as we expected 😅This is because we need it in Vue 3.0defineComponentThe component parameter that wraps it into a bidirectional binding data issetup function | object

import { defineComponent, ref } from 'vue'

export default defineComponent(() = > {
  const state = ref(0)
  const onClick = () = > {
    state.value++;
    console.log(state.value)
  }
  return () = > (
    <div>
      <h3>state: {state.value}</h3>
      <button onClick={onClick}>Click on the</button>
    </div>)})Copy the code

And you can see that it’s now a real time click to autoincrement

Component communication

How to realize value communication between components 😮

We need to pass in the communication data as objects instead

App.vue
<JsxTemp site="imondo.cn"  @onGet="onGet" />
export default{...methods: {
    onGet(e) {
      console.log('emit:', e)
    }
  }
}
...
export default defineComponent({
  props: {
    site: String
  },
  setup({ site }) {
    const state = ref(0)
    const onClick = () = > {
      state.value++;
      console.log(state.value)
      context.emit('onGet'.'Mondo');
    }
    return () = > (
      <div>
        <h1>props: {site}</h1>
        <h3>state: {state.value}</h3>
        <button onClick={onClick}>Click on the</button>
      </div>)}})Copy the code

Implementation effect

conclusion

We tried out how to use JSX in Vue 3.0, which helped us share our components more flexibly in our projects, and thus differentiated the way we used them in our projects

  • Stateless components can be shown using pure functions
  • Stateful Components Components with logical and data binding require the use of a set of component apis provided by Vue 3.0

I also tried to summarize the entry level development booklet, welcome you to correct 😋

Reference:

  • vue global api