Chapter and Article Course Introduction:

Everything takes time to settle, and technology is no exception. Today, I am writing the chapter and article of Vue3.0 series, just hoping to try some new technologies earlier than others. After all, Vue3.0 has already been in Beta, so the official version of Vue3.0 is not far away. We will have more time than others to fully understand the features of Vue3.0, and only when you really understand a technology can you correctly determine whether it is appropriate and should be applied to your current actual project.

  • Day 1: Brief introduction to Vue3.0, initialization project: Hello World Vue3.0
  • I’m an Api call engineer
  • Day 3: How does VUE3 implement logic reuse
  • Day 4: Practice: Highly decoupled Mock API design and order list query
  • Day 5: How to optimize code

Today is the first day: Brief introduction to Vue3.0, initializing project: Hello World Vue3.0

Introduction to vue3.0

Today is the first day of the Vue3.0 live episode. In fact, yuxi explained the benefits of Vue3.0 and some of its changes in detail during the live broadcast of the Vue3.0 Beta on April 22nd. In fact, it can be roughly reflected in the following points:

  • (0) Use ES2015 Proxy as its observer mechanism. This eliminates pre-existing warnings, doubles the speed, and saves half the memory overhead
  • (1) Rewrote virtual Dom and DIff algorithm optimization
  • (2) Update performance increased by 1.3~2 times, SSR speed increased by 2~3 times
  • (3) Life cycle changes, API by naming export, can import life cycle functions as required
  • (4) More intuitive code reuse implementation (hooks)
  • (5) Friendlier and more coupled data communication (provide & Inject)
  • (6) API export by name, better support Tree Shaking
  • (7) New update strategy: Block Tree (distinguish dynamic nodes and static nodes)
  • 8) Better support for typescript

Initialize the project: Hello World Vue3.0

Installation package

// Create a directory
mkdir vue_3. 0
cd vue_3. 0
npm init --y

// Install the Vue3.0 core package and webPack related packages
yarn add vue@next @vue/compiler-sfc webpack webpack-cli webpack-dev-server --dev
// Install other webPack plug-ins
yarn add html-webpack-plugin mini-css-extract-plugin --dev
/ / install the loader
yarn add css-loader style-loader file-loader --dev

Copy the code

New WebPack configuration

webpack.config.js

const path = require("path");
 // Vue file page CSS extraction
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 // VUE format file processing
const { VueLoaderPlugin } = require("vue-loader");
// Generate an HTML entry file
const HtmlWebpackPlugin = require("html-webpack-plugin"); 
module.exports = {
  entry: "./src/main.js".output: {
    filename: "bundle.js".path: path.join(__dirname, `dist`),},optimization: {
    usedExports: true.minimize: true,},resolve: {
    alias: {
      vue: "@vue/runtime-dom",}},module: {
    rules: [{test: /\.vue$/.use: "vue-loader"}, {test: /\.(png|jpg|gif)$/.use: "file-loader"}, {test: /\.css$/.use: [{loader: "style-loader" }, 
          { loader: "css-loader"}],},],},devtool: "eval-source-map".plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",}).new MiniCssExtractPlugin({
      filename: "[hash][name].css",}).new VueLoaderPlugin(),
  ],
  devServer: {
    hot: true.// Automatically start hot updates
    contentBase: __dirname,
  },
};
Copy the code

src/main.js

import{ createApp } from "vue";
import App from "./App.vue";
createApp(App).mount("#root")
Copy the code

src/App.vue

<template> <section> <h2>{{ title }}</h2> </section> </template> <script> export default { setup() { return { title: "Hello World Vue3.0"}; }}; </script> <style> body { padding: 50px; color: #42b983; text-align: center; background-color: #282c34; } </style>Copy the code

public/index.html


      
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width"/>
    <title>Vue 3.0</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
Copy the code

package.json

{
  "name": "Vue_3. 0"."version": "1.0.0"."description": "vue3.0"."main": "index.js"."scripts": {
    "dev": "webpack-dev-server"."pro": "webpack"
  },
  "keywords": []."author": ""."license": "ISC"."dependencies": {
    "@vue/compiler-sfc": 5 "" ^ 3.0.0 - beta.."css-loader": "^ 3.5.3." "."file-loader": "^ 6.0.0"."html-webpack-plugin": "^ 4.3.0"."mini-css-extract-plugin": "^ 0.9.0"."style-loader": "^ 1.2.1." "."vue": 5 "" ^ 3.0.0 - beta.."vue-loader": "^ 16.0.0 - alpha. 3"."webpack": "^ 4.43.0"."webpack-cli": "^ 3.3.11." "."webpack-dev-server": "^ 3.10.3"}}Copy the code

Successful operation effect

I’m an Api call engineer

Day 3: How does VUE3 implement logic reuse

🎨 original is not easy, support please like, forward