preface
A colleague asked me the other day
Colleague: Have you learned Vue3.0 yet?
I: : 3.0? I now learn him why, especially big said that will update 2.7 recently, now learn when the time to forget ah.
Colleague: Vue3.0 is a bit like React.
So:
remind
This is the first chapter of Vue3.0 experience. How many chapters can YOU write Vue3.0? It’s still a mystery, maybe a chapter, maybe two…… , let’s look forward to it!
Vue2. X -> Vue3.0 changes
Vue3.0 fully supports Vue2.0!!!! There is no need to change the Vue code after the upgrade, but the plug-in you reference is… It’s luck.
Before we talk about changes, let’s look at how Vue3.0 creates projects.
The first method: vite
NPM init vite-app Project name CD Project name NPM run devCopy the codePros: Almost done (no webpack compilation required)
Disadvantages: unstable, but also need to install vue-Router, vuex, (knock key,vue-router, vuex to use 4.0, installation is also prone to error, enenen, error is certainly my computer problem, and vite has no relationship….
NPM install -g@vue /cli vue create Project name CD Project name vue add vue-nextVuex is 4.0, vue-Router is 4.0, vuex is 4.0
npm run serve
Copy the codeThis advantage and disadvantage will not say, after all, we are old hands!
Change a mian.js
The createApp method in mian.js has been changed
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import './App.scss'
const app = createApp(App)
app.use(router).use(store).mount('#app');
Copy the codeImport {createApp} from ‘vue’; Instead of importing Vue from ‘Vue ‘, all packages that use some Ui framework, as well as third parties, will report the following error.
Change two Vue-router, Vuex
Vue-router, Vuex has some minor changes, which will be discussed later in chapter 2, or you can also take a look at my source code, you are all big, you can see the difference immediately.
Change the three Template section
Vue2.0 allows only one root tag in the template template, whereas 3.0 allows multiple root tags
Changes in the four Composition API
In Vue2.0 we call the js part of the.vue file the Function API, and in 3.0 it becomes the Composition API and this is the biggest change, look at the picture below
How does it feel to see this. En, we haven’t started yet, but here comes the new Vue3.0 features.
Composition API What is the
The setup function
The Setup function is a new Vue component that is the Composition API entry point
<template>
</template>
<script>
import { setup } from 'vue'
export default {
setup(props, context) {
// Props is the function passed by the parent
// What is context?
We can't use this in setup()
$emit, this.$psrent, this.$refs in vue2.0 do not apply to this.
// Context is a set of these parameters
//context.attrs
//context.slots
//context.parent = this.$psrent
//context.root is equivalent to this in 2.0
//context.emit corresponds to this.$emit in 2.0
//context.refs corresponds to this.$refs in 2.0. }}</script>
<style>
</style>
Copy the codeData declaration
In vue2.0, data is declared in data(). In vue 3.0, data() is removed and Reactive() and ref() is used.
ref() Used when declaring a single underlying data type
Note: all defined variables and functions must return
<template> <div>{{count}}</div> </template> <script> import {setup, Ref} from 'vue' export default {setup(props, context) {let count = ref(0) console.log(count.value) //0, Console. log(isRef(count)) //true //isRef() returns {count // ref returns a responsive object}}} </script> <style> </style>Copy the codeReactive() Used when declaring a single object
<template> <div>{{data1}}</div> </template> <script> import { setup, Reactive } from 'vue' export default { setup(props, context) { const obj = reacttive({ data1: '123', data2: {} }) return { ... </script> <style> </style>Copy the codeWatchEffect () to monitor props
Vue <template> <ZiComp val:'1'/> </template> <script> import ZiComp from './ zicomp.vue 'export default { Components: {ziComp}, //components method is the same as 2.0 setup(props, context) { } } </script> -------------------------------------- //ziComp.vue <template> <div>{{obj.data1}}</div> </template> <script> import { Reactive } from 'vue' export default { props: ['val'], // Get props as in 2.0, you can also use object setup(props, Context) {watchEffect(() => {// console.log(props)})}} </script> <style> </style>Copy the codeThe watch () listener
Listening for individual data
<template> <div>{{count}}</div> </template> <script> import { Reactive } from 'vue' export default { setup(props, context) { let count1 = ref(0) let state = reactive({ count2: Count count count count count count count count count count count count count count count count count count PreCount old value console.log('') // here is the function that executes after listening for data changes}, {lazy: Count (count1, (count, preCount) => {count (count, preCount) => { PreCount old value console.log(")}) return {count... toRefs(state) } } } </script> <style> </style>Copy the codeListening for multiple data
<template> <div>{{count}}</div> </template> <script> import { setup, Reactive } from 'vue' export default { setup(props, context) { let count1 = ref(0) let name1 = ref(0) let state = reactive({ count2: 0, name2: 'yangy') // Watch reactive ([() => state.count2, () => state.name2] ([count, name], [preCount,]) PreName]) => {//count new values, preCount old values console.log('')}, {lazy: // Watch ([count2, name2] ([count, name], [preCount, preName]) => {//count new value, PreCount console.log('') // this is the function that listens for data changes}, {lazy: false}// does not listen for the first time) return {count,... toRefs(state) } } } </script> <style> </style>Copy the codeComputed () Computes attributes Can be created read-only, and readable and writable
<template> <div>{{addCount}}</div> <div>{{addCount2}}</div> </template> <script> import { setup, Reactive } from 'vue' export default { setup(props, Context) {let count = ref(0) setup () {const count = ref(0) const addCount = computed(() => count.value + 1) // Read-only, Const addCount2 = computed({get () => count.value + 1, set: (value) => count. Value = value}) // addCount2.value = 10 // Return {count, addCount, addCount2 } } } } </script> <style> </style>Copy the codeFront-end project addressGithub.com/YangY-19/vu…
Node project addressGithub.com/YangY-19/ko…
This is using Vue3. Demo. The new syntax is basically involved and will be optimized in the future. Even though it’s only dome, I hope you can give me a star for encouragement.
conclusion
This chapter will leave you there, and the next chapter will cover life cycle, dom, Router, vuex, etc. Keep your eye on it. The above are their own views and summary, if there is a wrong writing, hope to correct! If there are other aspects of Vue3.0 that are not clear, please feel free to comment below and discuss them together.