preface

Awr, taking advantage of the pamphlet to learn, also made a preliminary attempt to use Vue3.0. At first glance, there is a big difference between Vue3.0 and Vue2.0 in writing.

Experience Vue3.0 in CDN mode
<body>
    <div id="app" v-cloak>
        <p>Name: {{name}}</p>
        <p>{{state.work}}</p>
      </div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const { createApp ,ref,reactive} = Vue
    const App = {
        setup(){
            const name = ref("Youlik");
            const state = reactive({
                work:'Software Engineer'
            })

            return {
                state,
                name
            }
        }
    }
    createApp(App).mount("#app")
</script>
Copy the code

Implement responsive distinctions

Object. DefineProPerty is used to redefine all attributes in data in Vue2.0. Dependencies are collected when attributes are used and dependencies are notified to update (interview questions). Vue3.0 uses a proxy, which can directly listen for changes in objects and arrays.

Vue3. 0
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

Vue2. 0
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
  render: h= > h(App),
}).$mount('#app')
Copy the code

By looking at the initialization, we can see that the contents of main.js are simplified and createApp is introduced for mounting.

Combination of the Api

Let’s take a look at the Options Api in Vue2.0. We need to write corresponding code in each module

        data(){
          return{}},props: {},methods:{
        },
        created(){}Copy the code

Composition Api We just need to write the corresponding control code in setup

The content of this article may be insufficient or there are problems, you are welcome to put forward suggestions, actively respond to the digging activities, this article is participating in the “digging gold pamphlet free learning!” Event, click to view details of the event