I believe that my followers have thoroughly mastered the basic changes of Vue3 responsive principle, today we will quickly taste the latest beta version of Vue3.0.

Note: Since Vue3.0 is still in the beta stage, this article only introduces the latest version v3.0.0-beta.14 at the time of publication. There is no guarantee that there will be syntax differences in subsequent versions, please pay attention to them.

Clone latest beta code

We can visit github:https://github.com/vuejs/vue-next, view the latest Vue3.0 code, as of today (June 6, 2020) the latest version for: v3.0.0 – beta. 14, we first clone code directly into the local.

git clone https://github.com/vuejs/vue-next.git
Copy the code

If the network is not strong, you can also use the domestic sync library address:

git clone https://gitee.com/332/vue-next
Copy the code

Install dependencies

Go to the code directory and install the dependencies

cd vue-next
NPM I or CNPM ICopy the code

Package the Vue code

Build Vue source code using commands

npm run dev
Copy the code

Packaged source code will be stored in a vue – after the next/packages/vue/dist/vue. Global. Js, then we need to quote this js file in HTML.

Start the service and access it using a browser

Our Clone code is just a separate Vue part, not a Vue Cli, which does not contain Webpack. We need to create HTML files to develop the code in the traditional way. We create index. HTML in vue-next root and import the vue file packaged above:


      
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
 <title>Document</title> </head> <body>  <div id="app">Hello Vue3.0</div> </body> <script src="./packages/vue/dist/vue.global.js"></script> <script>  console.log(Vue) </script> </html> Copy the code

Start the file service on the command line and access it in a browser:

npm run serve
// After success, visit http://localhost:5000 and you can see 'Hello Vue3.0'Copy the code

F12 Open the Console and you can see that the entire Vue object has been output in the Console

{
    BaseTransition: {name: "BaseTransition".inheritRef: true.props: {... },setup: ƒ}
    Comment: Symbol(Comment)
    Fragment: Symbol(Fragment)
    KeepAlive: {name: "KeepAlive".__isKeepAlive: true.inheritRef: true.props: {... },setup: ƒ}
 Static: Symbol(Static)  Suspense: {__isSuspense: true.process: ƒ.hydrate: ƒ}  Teleport: {__isTeleport: true.process: ƒ.remove: ƒ.move: ƒ.hydrate: ƒ}  Text: Symbol(Text)  Transition: (props, { slots }) = >{... } TransitionGroup: {props: {... },setup: ƒ} CallWithAsyncErrorHandling: ƒ callWithAsyncErrorHandling (fn, instance, type, args)ƒ callWithErrorHandling: ƒ callWithErrorHandling(FN, Instance, Type, ARgs) camelize: (str) = >{... }CloneVNode: ƒ cloneVNode (vnode, extraProps)The compile: ƒ compileToFunction (template, the options)The computed: ƒ computed $1(getterOrOptions) ..}  Copy the code

Create a Vue instance and render it into the Dom

Next we need to create an instance of Vue and render it onto the #app element in HTML.

// script
const App = {
    template: '
        

          creates a Vue instance 
        

}
Vue.createApp(App).mount('#app')
Copy the code

Refresh the browser and you’ll see that Vue has rendered the template to the Dom, showing only the words to create the Vue instance.

Create reactive objects

Since this article is only a quick start, it will not explain the syntax of Vue3.0 in detail. The next article will disassemble the syntax of Vue3.0 in detail, welcome to pay attention and collect!!

Instead of the fixed data objects in Version 2, Vue3.0 uses Reactive functions to create reactive objects manually. Reactive sets the passed object to a reactive object and returns:

const { reactive } = Vue
const data = reactive({ point: 0 })
console.log(data) // Proxy {point: 0, __v_reactive: Proxy}
Copy the code

From the printout we can see that the object has been wrapped as a Proxy instance.

  • Vue responsive principle and changes can be referred to the previous article, please visit the public number: front-end pickup

Render a reactive object into a template

Vue3.0 adds a new entry function, setup, which can be considered a lifecycle. In contrast, the setup function takes two parameters: the props component property and the context context; The data and methods used by the component need to be returned in an object in this function.

Now we render the reactive object into the template:

const { reactive } = Vue
const App = {
    template: `
        <div>
 <div>{{data.point}}</div> <button @click="onClick"> </button> </div>  `. setup(){  const data = reactive({ point: 0 })  return {  data,  onClick() {  data.point ++  }  }  } } Vue.createApp(App).mount('#app') Copy the code

Refresh the page, click the button in the page, you can see that the top value can continue to change in response.

Implement bidirectional binding

If you look at the above example, you can clearly see how bidirectional binding should be written:

const App = { template: ` < div > < div > {{data. Point}} < / div > < button @ click = "onClick" > click + + < / button > < input v - model = "data. Point" / > < / div > `, setup(){ const data = reactive({ point: 0 }) return { data, onClick() { data.point ++ } } } }Copy the code

Calculate attribute

Vue3.0 also writes calculated properties differently, using functions to customize each calculated property:

const { reactive, computed } = Vue
const App = {
    template: `
        <div>
 <div>{{pointCn}}</div> <button @click="onClick"> </button> </div>  `. setup(){  const data = reactive({ point: 0 })   // The calculated property returns the combined string  let pointCn = computed((a)= >{  return ` score:${data.point}Points `  })   return {  pointCn,  onClick() {  data.point ++  }  }  } } Vue.createApp(App).mount('#app') Copy the code

When we click the button, the calculated property evaluates the assembled string in response.

Create child components and pass values

The props definition remains the same. The properties passed this time can be retrieved in Setup, but only the contents of the fields already declared in props are retrieved.

const Child = {
    template: `
{{point}}</div>    `.    props: {
 point: Number. },  setup (props) {  console.log(props) // Get props. Point 666  } }  const App = {  template: `  <div>  <Child :point="666"/>  </div>  `. components: { Child } } Vue.createApp(App).mount('#app') Copy the code

Component communication

There are some changes to the component communication area. I use the setup second context parameter, which contains an EMIT function that passes events. Note that the function name does not contain the $sign

const Child = {
    template: `
<div @click='onClick'> {{point}}</div>    `.    props: {
 point: Number. },  setup (props, context) {  return {  onClick() {  // Pass events  context.emit("onChildEvent"."Child component passes event")  }  }  } }  const App = {  template: `  <div>  <Child @onChildEvent='onGetChildEvent' :point="666"/>  </div>  `. components: { Child },  setup(){  return {  // Trigger this function upon receiving the event  onGetChildEvent(v) {  console.log(v) // Child components pass events  }  }  } } Vue.createApp(App).mount('#app') Copy the code

conclusion

Vue3.0 has changed a lot. In terms of overall use, it has become more flexible, with function subdivision, on-demand introduction and lower coupling between modules. It is not too difficult to use a feeling, and the learning cost is very low. I hope uVU can release the official version as soon as possible. I am looking forward to the future development of Vue.

Thank you, more content welcome to pay attention to my public number: front-end pickup, record progress together.