Vue3 与 Vue2的不同之处一简单介绍 Vue 核心最基本的功能

1、弃用全局API new Vue,使用createApp

const app = Vue.createApp({})

2、需要手动挂载根节点

app.mount("#app")

3、弃用Vue.prototype,在Vue3中，使用如下定义方式

const app = Vue.createApp({})
app.config.globalProperties.$http = () => {}

4、不能直接使用Vue.nextTick / this.$nextTick, Vue3中使用方式如下

import { nextTick } from 'vue'
nextTick(() => {
  // something
})

5、创建一个简单的Vue3示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <!-- <div id="counter">
      Counter: {{ counter }}
      <br />
      <button @click="stop">停止</button>
      <br />
      <button @click="noStop">继续</button>
    </div> -->

    <br />
    <!-- <div id="bind-attribute">
      <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
      </span>
    </div> -->

    <br />

    <!-- <div id="event-handling">
      <p>{{message}}</p>
      <button v-on:click="reverseMessage">反转 Message</button>
    </div> -->

    <br />

    <div id="two-way-binding">
      <p>{{ message }}</p>
      <input v-model="message" />
    </div>

    <script>
      //   const Counter = {
      //     data() {
      //       return {
      //         counter: 0,
      //       };
      //     },

      //     mounted() {
      //       this.count();
      //     },

      //     methods: {
      //       count() {
      //         this.clearTimes = setInterval(() => {
      //           this.counter++;
      //         }, 1000);
      //       },

      //       stop() {
      //         clearInterval(this.clearTimes);
      //       },

      //       noStop() {
      //         this.count();
      //       },
      //     },
      //   };

      //注意
      //   1、弃用全局API new Vue ,使用 createApp
      //   2、需要手动挂载根节点 xx.mount("#counter")
      //   Vue.createApp(Counter).mount("#counter");

      //   const AttributeBinding = {
      //     data() {
      //       return {
      //         message: "You loaded this page on " + new Date().toLocaleString(),
      //       };
      //     },
      //   };

      //   Vue.createApp(AttributeBinding).mount("#bind-attribute");

      //   const EventHandling = {
      //     data() {
      //       return {
      //         message: "Hello Vue.js",
      //       };
      //     },

      //     methods: {
      //       reverseMessage() {
      //         console.log("111");
      //         this.message = this.message.split("").reverse().join("");
      //       },
      //     },
      //   };

      //   Vue.createApp(EventHandling).mount("#event-handling");

      const TwoWayBinding = {
        data() {
          return {
            message: "Hello Vue!",
          };
        },
      };

      Vue.createApp(TwoWayBinding).mount("#two-way-binding");
    </script>
  </body>
</html>

Vue3 与 Vue2的不同之处一 简单介绍 Vue 核心最基本的功能

Vue3 与 Vue2的不同之处一简单介绍 Vue 核心最基本的功能