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>Documenttitle>
<script src="https://unpkg.com/vue@next">script>
head>
<body>
<br />
<br />
<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>